Vue中使用wangeditor

这款富文本还行，使用起来比较简单

首先安装npm包

npm install wangeditor -S

 然后在需要的组件中使用

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

设置 editor 的css

.editor{
 width: 100%;
 height: 700px;
 margin-bottom: 40px;
 background-color: #fff;
}

然后在data中声明editor

data(){
    return{
        editor:''
    }
}

然后在script中引入editor

import E from 'wangeditor'

在methods中写入富文本的配置

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中调用该方法)
    }
}

在updated中调用该方法可以设置data中的内容在富文本中

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

再加一个wangeditor的官方文档 wangeditor官方文档

最后

以上就是落后仙人掌为你收集整理的Vue中使用wangeditor的全部内容，希望文章能够帮你解决Vue中使用wangeditor所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。