vue加载wangeditor富文本编辑器方法

完整代码链接

1、下载依赖包

cnpm install wangeditor -S

2、引入

import E from 'wangeditor'

3、定义HTML容器

<div class="editor-container">
    <div id="editor-toolbar" class="toolbar"></div>
    <div id="editor-text"></div>
</div>

4、加载编辑器

this.editor = new E('#editor-toolbar', '#editor-text')
this.editor.customConfig.menus = [
    // 按需加载菜单
    'head',  // 标题
    'bold',  // 粗体
    'redo'  // 重复
]
this.editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
this.editor.create()

5、设置样式

.editor-container {
    min-width: 968px;
    width: 80vw;
    height: 80vh;
}

#editor-text {
    width: 100%;
    border: 1px solid #333;
}

.toolbar {
    height: 30px;
    border: 1px solid #333;
    border-bottom: none;
}

#editor-text {
    height: 700px;
}

完整代码：https://github.com/leegoc/myApp.git