简洁富文本编辑器wangEditor

GIT免费下载地址:https://github.com/wangfupeng1988/wangEditor/releases

创建方式有两种,非常简单

第一种:直接创建

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