富文本編輯器--設置和獲取內容


設置內容

以下方式中,如果條件允許,盡量使用第一種方式,效率最高。

html 初始化內容

直接將內容寫到要創建編輯器的<div>標簽中

<div id="div1"> <p>初始化的內容</p> <p>初始化的內容</p> </div> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') editor.create() </script> 

js 設置內容

創建編輯器之后,使用editor.txt.html(...)設置編輯器內容

<div id="div1"> </div> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') editor.create() editor.txt.html('<p>用 JS 設置的內容</p>') </script> 

追加內容

創建編輯器之后,可使用editor.txt.append('<p>追加的內容</p>')繼續追加內容。

清空內容

可使用editor.txt.clear()清空編輯器內容

 

讀取內容

可以htmltext的方式讀取編輯器的內容

<div id="div1"> <p>歡迎使用 wangEditor 編輯器</p> </div> <button id="btn1">獲取html</button> <button id="btn2">獲取text</button> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor = new E('#div1') editor.create() document.getElementById('btn1').addEventListener('click', function () { // 讀取 html alert(editor.txt.html()) }, false) document.getElementById('btn2').addEventListener('click', function () { // 讀取 text alert(editor.txt.text()) }, false) </script> 

需要注意的是:從編輯器中獲取的 html 代碼是不包含任何樣式的純 html,如果顯示的時候需要對其中的<table><code><blockquote>等標簽進行自定義樣式(這樣既可實現多皮膚功能),下面提供了編輯器中使用的樣式供參考

/* table 樣式 */ table { border-top: 1px solid #ccc; border-left: 1px solid #ccc; } table td, table th { border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 3px 5px; } table th { border-bottom: 2px solid #ccc; text-align: center; } /* blockquote 樣式 */ blockquote { display: block; border-left: 8px solid #d0e5f2; padding: 5px 10px; margin: 10px 0; line-height: 1.4; font-size: 100%; background-color: #f1f1f1; } /* code 樣式 */ code { display: inline-block; *display: inline; *zoom: 1; background-color: #f1f1f1; border-radius: 3px; padding: 3px 5px; margin: 0 3px; } pre code { display: block; } /* ul ol 樣式 */ ul, ol { margin: 10px 0 10px 20px; }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM