vue 中使用 wangeditor

项目中用到了富文本，选来选去选择了wangeditor,先写了demo，用起来还算比较简单

用法

安装

npm install @wangeditor/editor --save
npm install @wangeditor/editor-for-vue --save

空白编辑器

其他用到的配置

菜单不显示某个按钮

toolbarConfig: {
        excludeKeys: [
          'fullScreen',//不显示全屏
          'insertVideo',//不显示插入视频
        ]
      },

上传图片

editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            customUpload: this.uploadImageMe // this.uploadImageMe 是 methods 中的一个普通方法
          },
        }
      },

//上传文件配置
    uploadImageMe(file, insertFn){
      // file 即选中的文件
      // 自己实现上传，并得到图片 url alt href
      let name = file.name;
      let suffix = file.type.split("/")[1];
      name = name + '.' + suffix;

      let formdata = new FormData()
      formdata.append("file", file)  
        
        //上传方法
      uploadImg(formdata).then(res => {
        // 最后插入图片
        insertFn(res.url , res.name, res.url )
      })

    },

还有就是上传视频，但是我的版本比较低（应该是v4.6.3 开始支持上传本地视频） ，只能上传网络视频

这个的话，就比较鸡肋了，所以放弃了这个功能

其他API

判断是否为空

this.editor.isEmpty() 

有标签就不算空，所以我判断是否为空用的是

this.editor.getText()=='' //this.editor.getText() 获取纯文本

 获取toolbar所有key

this.editor.getAllMenuKeys()