簡潔富文字編輯器wangEditor
阿新 • • 發佈:2019-01-11
建立方式有兩種,非常簡單
第一種:直接建立
html:
<div id="editor">
<p>歡迎使用 wangEditor 富文字編輯器</p>
</div>
js:
// 引用
var E = require('wangeditor') // 使用 npm 安裝
var E = require('/wangEditor.min.js') // 使用下載的原始碼
// 建立編輯器
var editor = new E('#editor')
editor.create()
第二種:功能欄和編輯視窗分開建立
<div id="div1" class="toolbar"> </div> <div style="padding: 5px 0; color: #ccc">中間隔離帶</div> <div id="div2" class="text"> <!--可使用 min-height 實現編輯區域自動增加高度--> <p>請輸入內容</p> </div> <script type="text/javascript" src="/wangEditor.min.js"></script> <script type="text/javascript"> var E = window.wangEditor var editor1 = new E('#div1', '#div2') // 兩個引數也可以傳入 elem 物件,class 選擇器 editor1.create() </script>
這裡的引用只需要引用wangEditor.min.js或者wangEditor.js中的一個就行了,css不用引入
禁用編輯功能:
editor.$textElem.attr('contenteditable', false)
設定內容:
editor.txt.html('<p>用 JS 設定的內容</p>')
獲取內容:
editor.txt.html()
追加內容:
editor.txt.append('<p>追加的內容</p>')
清空內容:
editor.txt.clear()