使用wangEditor富文字編輯器
阿新 • • 發佈：2020-09-10
客戶端配置說明
使用wangEditor首先要下載它的js，下面是下載地址，也可以到網上搜索去下載，
下載方式1：https://github.com/wangfupeng1988/wangEditor/releases
下載方式2：
百度網盤地址：點我下載
下載密碼：x09x
使用方法
首先要引入wangEditor的js檔案，然後引入jQuery
然後在body裡：
1 <body> 2 <button id="btn1">檢視HTML內容</button> 3 <button id="btn2">檢視文字內容</button> 4 <button id="btn3">設定Edit文字</button> 5 6 <div id="editor"> 7 <p>aaa</p> 8 </div> 9 </body>
之後寫建立富文字編輯器的 js
1 <script type="text/javascript"> 2 $(function() { 3 var E = window.wangEditor;4 var editor = new E('#editor'); 5 editor.create() 6 </script>
然後訪問一下，就會出現下面效果，為了掩飾檢視輸入的效果我設定了幾個按鈕，用來顯示不同的顯示效果
（1）給第一個按鈕新增點選事件，點選第一個按鈕，就會彈出文字框中的文字，並以HTML的形式顯示，實現程式碼和顯示效果如下所示
1 //點選按鈕獲取編輯框中的內容(html形式) 2 $("#btn1").click(function() { 3 var text = editor.txt.html(); 4 alert(text);5 })
（2）給第二個按鈕新增點選事件，點選第二個按鈕，就會彈出文字框中的文字，並以輸入的文字的形式顯示，實現程式碼和顯示效果如下所示
1 //點選按鈕獲取編輯框中的內容(純文字形式) 2 $("#btn2").click(function() { 3 var text = editor.txt.text(); 4 alert(text); 5 })
（3）給第三個按鈕新增點選事件，點選第三個按鈕，會給文字框賦值，實現程式碼和顯示效果如下所示
1 //點選按鈕獲設定Edit文字 2 $("#btn3").click(function() { 3 editor.txt.html("勤快的懶羊羊部落格"); 4 })
拓展
這個編輯器的工具欄有很多工具，如果不想顯示太多，可以在建立編輯器的同時修改編輯器的選單欄，程式碼和顯示效果如下
1 $(function() { 2 var E = window.wangEditor; 3 var editor = new E('#editor'); 4 editor.customConfig.menus = [ 5 'head', 6 'bold', 7 'italic', 8 'underline' 9 ] 10 editor.create()
wangEditor編輯器的簡單使用就到此結束了，下面是這個頁面的原始碼。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="js/jquery-1.11.0.min.js"></script> 7 <script src="js/wangEditor.js"></script> 8 9 <script type="text/javascript"> 10 $(function() { 11 var E = window.wangEditor; 12 var editor = new E('#editor'); 13 editor.customConfig.menus = [ 14 'head', 15 'bold', 16 'italic', 17 'underline' 18 ] 19 editor.create() 20 21 //點選按鈕獲取編輯框中的內容(html形式) 22 $("#btn1").click(function() { 23 var text = editor.txt.html(); 24 alert(text); 25 }) 26 27 //點選按鈕獲取編輯框中的內容(純文字形式) 28 $("#btn2").click(function() { 29 var text = editor.txt.text(); 30 alert(text); 31 }) 32 33 //點選按鈕獲設定Edit文字 34 $("#btn3").click(function() { 35 editor.txt.html("勤快的懶羊羊部落格"); 36 }) 37 38 }) 39 </script> 40 41 </head> 42 <body> 43 <button id="btn1">檢視HTML內容</button> 44 <button id="btn2">檢視文字內容</button> 45 <button id="btn3">設定Edit文字</button> 46 47 <div id="editor"> 48 <p>aaa</p> 49 </div> 50 </body> 51 </html>