wangEditor的了解之路

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

　大家觉得不错的话可以支持一下