Vue中使用wangeditor

1
npm install wangeditor -S

1
<div class="editor" id="editor" ref="editor"></div>

1
2
3
4
5
6
.editor{
 width: 100%;
 height: 700px;
 margin-bottom: 40px;
 background-color: #fff;
}

1
2
3
4
5
data(){
    return{
        editor:''
    }
}

1
import E from 'wangeditor'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
methods:{
    //富文本配置
    editorConfig(){
       let that = this;
       that.editor = new E("#editor");//editor实例化
       //配置参数
       that.editor.customConfig.menus = [
           'head',  // 标题
           'bold',  // 粗体
           'fontSize',  // 字号
           'fontName',  // 字体
           'italic',  // 斜体
           'underline',  // 下划线
           'strikeThrough',  // 删除线
           'foreColor',  // 文字颜色
           'backColor',  // 背景颜色
           'link',  // 插入链接
           'list',  // 列表
           'justify',  // 对齐方式
           'quote',  // 引用
           'emoticon',  // 表情
           'image',  // 插入图片
           'table',  // 表格
           'video',  // 插入视频
           'code',  // 插入代码
           'undo',  // 撤销
           'redo'  // 重复
       ];
       //实时获取富文本内容
       that.editor.customConfig.onchange = function (text) {
           that.artical_content = text;
       };
       that.editor.create();//以上配置完成之后调用其create()方法进行创建
       that.editor.txt.html(that.artical_content);//设置内容在富文本中(必须在update中调用该方法)
    }
}

1
2
3
updated(){
    this.editorConfig();//数据更新之后初始化富文本
}