【前端】wangEditor（富文本編輯器）簡易使用示例

時間 2019-12-05

標籤前端 wangeditor 文本編輯器簡易使用示例简体版

原文原文鏈接

轉載請說明做者或者註明出處，謝謝css

說到前端經常使用的編輯器，天然也少不了富文本編輯器（RichText Editor）html

筆者在此以前也看了一些相關的在線編輯器，其中包括了當百度搜索「富文本編輯器」字樣時出如今最上面的百度UEditor，裏面的功能至關豐富，可是配置也相對複雜，對於使用者要求較高。何況在輕量級網頁應用的開發中也並不須要如此多的功能，因此真正須要的是一個使用簡單的輕量級富文本編輯器，出於方便考慮，也應該儘量保證「所見即所得」原則。前端

wangEditor正是其中之一（官網連接：wangEditor）jquery

另外值得一提的是，該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>