简洁富文本编辑器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() 

最后

以上就是贪玩飞机为你收集整理的简洁富文本编辑器wangEditor的全部内容，希望文章能够帮你解决简洁富文本编辑器wangEditor所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。