1.下载地址https://github.com/wangfupeng1988/wangEditor/releases](https://github.com/wangfupeng1988/wangEditor/releases
把这个文件下载好了，用哪个引入哪个
2.创建一个文本编辑器
<script type="text/javascript">
var E = window.wangEditor
var editor1 = new E('#div1') // 两个参数也可以传入 elem 对象，class 选择器
editor1.create()
</script>
<div id="div1" class="text">
<p>请输入内容</p>
</div>
3.此时会看到文本编辑器已经显示出来了
4.注意路径js路径 如果不正确就会显示不出来
5.给编辑器显示区写东西
editor1.txt.html('<p>用 JS 设置的内容</p>')
6.给编辑器清空东西
editor.txt.clear()
7.获取内容
<button id="btn1">获取html</button>
<button id="btn2">获取text</button>
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
alert(editor1.txt.html())
}, false)
document.getElementById('btn2').addEventListener('click', function () {
// 读取 text
alert(editor1.txt.text())
}, false)
8.菜单配置，创建editor之前
editor1.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
]
默认的菜单就是
[
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
9.debug模式，创建editor之前
editor.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
10.插入链接，创建editor之前
editor.customConfig.linkImgCallback = function (url) {
console.log(url) // url 即插入图片的地址
}
11.背景颜色
editor.customConfig.colors = [
'#000000',
'#eeece0',
'#1c487f',
'#4d80bf',
'#c24f4a',
'#8baa4a',
'#7b5ba1',
'#46acc8',
'#f9963b',
'#ffffff'
]
12.base64位上传图片
editor1.customConfig.uploadImgShowBase64 = true
大家觉得不错的话可以支持一下
