轉載請說明作者或者註明出處，謝謝
說到前端常用的編輯器，自然也少不了富文本編輯器（RichText Editor）
筆者在此之前也看了一些相關的在線編輯器，其中包括了當百度搜索“富文本編輯器”字樣時出現在最上面的百度UEditor，裏面的功能相當豐富，但是配置也相對複雜，對於使用者要求較高。況且在輕量級網頁應用的開發中也並不需要如此多的功能，所以真正需要的是一個使用簡單的輕量級富文本編輯器，出於方便考慮，也應該儘可能保證“所見即所得”原則。
wangEditor正是其中之一（官網鏈接：wangEditor）
另外值得一提的是，該editor的官網所提供的demo以及入門文檔寫的十分友好，稍有前端經驗的代碼手即可快速配置上手。好了廢話不多說，上我自己的源代碼：
1 <html> 2 <head> 3 <!--在這裏字符集的設定很重要，如果設定不當將會出現亂碼--> 4 <meta charset="UTF-8"> 5 <title>wangEditor demo</title> 6 </head> 7 <body> 8 <!--wangEditor是一款基於jquery框架開發的插件--> 9 <script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/lib/jquery-2.2.1.js"></script> 10 11 <!--編輯器位置--> 12 <div style="max-width:700px;margin:50px"> 13 <div id="txtdiv" style="border:1px solid gray;min-height:240px"> 14 15 </div> 16 </div> 17 18 <!--效果展示框--> 19 <div id="show_box" style="border: 1px solid gray;margin-left:50px"></div> 20 21 <!--腳本控制--> 22 <script> 23 $(function(){ 24 //初始化編輯器 25 editor = new wangEditor("txtdiv"); 26 editor.create(); 27 28 //內容修改事件，此處做的是實時展示實際效果 29 editor.onchange = function(){ 30 //獲取editor的html值 31 var html = editor.$txt.html(); 32 $("#show_box").html(html) 33 } 34 }) 35 </script> 36 37 <!--按照官網上的說明，js和css的這兩個引用應該放在body的末尾--> 38 <script src="http://cdn.bootcss.com/wangeditor/2.1.20/js/wangEditor.js"></script> 39 <link href="http://cdn.bootcss.com/wangeditor/2.1.20/css/wangEditor.css" rel="stylesheet"> 40 </body> 41 </html>
效果圖：
