vue中wangeditor富文本编辑器的基本使用

1.安装

 npm install @wangeditor/editor --save

2.基本使用方法

   

<div
      ref="editor"
      class="editored"
      id="editor"
     style="height: 40vh"
></div>


//js
import E from "wangeditor";

//初始化时
this.$nextTick(() => {
        var editor = new E(this.$refs.editor);
        editor.config.uploadImgServer = "/imgUpdata"; //配置图片上传后台处理路径
        editor.config.uploadFileName = "file";
        editor.config.uploadImgHooks = {
          customInsert: function (insertImg, result, editor) {
            // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
            // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
            let url = "http://112.6.224.72:885/file/" + result.data.fileName;
            insertImg(url);
          },
        };
        editor.create();
        this.editor = editor;
        
      });

3.常用配置项/方法

        3.1设置编辑器的文本内容

   this.editor.txt.text(item);

        3.2清空编辑器内容

this.editor.txt.clear()

        3.3粘贴过滤

this.editor.config.pasteFilterStyle = false

        3.4修改默认提示

this.editor.config.placeholder = '自定义 placeholder 文字' 

4.相关推荐

        4.1富文本编辑器 wangeditor 的使用

        4.2官方文档