vue wangeditor配置

wangeditor富文本编辑器配置
1.下载

npm i wangeditor --save

2.使用

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

import E from 'wangeditor'
export default {
  components: {},
  model: {
    prop: 'desc',
    event: 'change'
  },
  props: {
    desc: String,

  },
  data() {
    return {
      content: '',
      editor: ''
    }
  },
  computed: {},
  watch: {
    desc: {
      immediate: true,
      handler(value) {
        //  console.log('desc', value)
        //判断父组件传递过来的值跟当前编辑器内容是否一样
        if (
          value != this.editor?.txt?.html() &&
          value != '' &&
          this.editor != ''
        ) {
          this.editor.txt.html(value)
        }
        if (value) {
          this.content = value
        }
      }
    }
    //接收父组件传递过来的值
  },
  created() {},
  mounted() {
    this.initE()
  },
  activated() {},
  methods: {
    //清除编辑器缓存 使用ref调用这个方法
    clearFun() {
      this.editor.txt.clear()
    },
    //初始化
    initE() {
      this.editor = new E(this.$refs.editor) //使用这个初始化,可以在同一界面创建多个编辑器
      // this.editor = new E('#e') //用这个。到用两个编辑框的时候会出现 ：初始化节点已存在编辑器实例，无法重复创建编辑
      let that = this
      this.editor.config.lineHeights = ['1', '1.15', '1.6', '2', '2.5', '3'] //行高
      //上传图片
      this.editor.config.customUploadImg = function(resultFiles, insertImgFn) {
        // resultFiles 是 input 中选中的文件列表
        // insertImgFn 是获取图片 url 后，插入到编辑器的方法
        console.log(resultFiles)
        that
          .uploadImgReq(resultFiles[0])//自己封装的请求
          .then(res => {
            insertImgFn(that.$img(res))
            console.log(res)
          })
          .catch(err => {
            console.log(err)
          })
        // 上传图片，返回结果，将图片插入到编辑器中
      }
      //上传视频
      this.editor.config.customUploadVideo = function(
        resultFiles,
        insertVideoFn
      ) {
        // resultFiles 是 input 中选中的文件列表
        // insertVideoFn 是获取视频 url 后，插入到编辑器的方法
        that
          .uploadvideoReq(resultFiles[0])
          .then(res => {
            // 上传视频，返回结果，将视频地址插入到编辑器中
            insertVideoFn(that.$img(res))
            console.log(res)
          })
          .catch(err => {
            console.log(err)
          })
      }
      this.editor.config.pasteFilterStyle = false
      this.editor.config.menus = [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        // 'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'lineHeight', //行高
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'undo', // 撤销
        'redo' // 重复
        // 'video',//视频
      ]
      this.editor.config.uploadImgMaxSize = 1 * 1024 * 1024 //限制图片上传大小 1M
	  this.editor.config.showFullScreen = false //全屏按钮
      this.editor.config.showLinkImg = false//隐藏网络图片
      this.editor.config.showLinkVideo = false//隐藏网络视频
      this.editor.create()
      //判断model是否传值，如果有就添加，没有就清除  ！！一定要在editor.create()之后使用
      if (this.content) {
        this.editor.txt.html(this.content)
      }else{
        this.editor.txt.clear()
      }
    },
    // 图片上传
    async uploadImgReq(formdata) {
      try {
        let imgRes = await this.request({
          url: '/uploads/files',
          method: 'post',
          dataType: 'blob',
          loading: true,
          data: {
            img: formdata
          }
        })
        //  console.log(imgRes.content.img)
        return Promise.resolve(imgRes.content.img)
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    },
    // 视频上传
    async uploadvideoReq(formdata) {
      try {
        let imgRes = await this.request({
          url: '',
          method: 'post',
          dataType: 'blob',
          loading: true,
          data: {
            img: formdata
          }
        })
        return Promise.resolve(imgRes.content.img)
      } catch (error) {
        console.log(error)
        return Promise.reject(error)
      }
    }
  }
}

3.组件使用

 <x-wangeditor v-model="formData.intro" ref="xwangeditor"> </x-wangeditor>

ps：我这个是注册的全局组件所以是x-wangeditor标签，如果不会注册的全局组件，也可以像组件一样引入使用，都是一样的。同时我这wangeditor是配合vue的keep-alive使用的。