1. 程式人生 > >簡潔富文字編輯器wangEditor

簡潔富文字編輯器wangEditor

建立方式有兩種,非常簡單

第一種:直接建立

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()