wangEditor富文本编辑器的使用(一)——基本介绍
1、介绍
wangEditor-Typescript 开发的 Web 富文本编辑器。
兼容常见的 PC 浏览器:Chrome,Firefox,Safar,Edge,QQ 浏览器,IE11。
不支持移动端。
- 官网 http://www.wangeditor.com/
- V4 文档 http://www.wangeditor.com/doc/
- 源码 https://github.com/wangeditor-team/wangEditor
2、使用手册
官方 https://www.wangeditor.com/doc/
看云 https://www.kancloud.cn/wangfupeng/wangeditor3/332599
在线体验 demo https://codepen.io/collection/DNmPQV
示例
3、基本使用
NPM
npm i wangeditor --save
安装后几行代码即可创建一个编辑器:
import E from "wangeditor"
const editor = new E("#div1")
editor.create()
CDN
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script type="text/javascript">
const E = window.wangEditor
const editor = new E("#div1")
// 或者 const editor = new E(document.getElementById('div1'))
editor.create()
</script>
配置 onchange 函数
配置onchange
函数之后,用户操作(鼠标点击、键盘打字等)导致的内容变化之后,会自动触发onchange
函数执行。
示例1
<div id="div1">
<p>请输入内容...</p>
</div>
<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
var editor = new wangEditor("div1");
// 配置 onchange 事件
editor.onchange = function () {
// 编辑区域内容变化时,实时打印出当前内容
console.log(this.$txt.html());
};
editor.create();
</script>
示例2
<div id="div1">
<p>欢迎使用 wangEditor 富文本编辑器</p>
</div>
<p>手动触发 onchange 函数执行</p>
<button id="btn1">change</button>
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#div1')
editor.customConfig.onchange = function (html) {
// html 即变化之后的内容
console.log(html)
}
editor.create()
document.getElementById('btn1').addEventListener('click', function () {
// 如果未配置 editor.customConfig.onchange,则 editor.change 为 undefined
editor.change && editor.change()
})
</script>
另外,如果需要修改 onchange 触发的延迟时间(onchange 会在用户无任何操作的 xxx 毫秒之后被触发),可通过如下配置
// 自定义 onchange 触发的延迟时间,默认为 200 ms
editor.customConfig.onchangeTimeout = 1000 // 单位 ms