vue-富文本 wangeditor

"wangeditor": "^4.6.5"

<template>
  <div id="wangEditor">
    <div id="toolbar-container" style="z-index: 20" class="toolbar" />
    <div id="text-container" style="z-index: 0" class="text_container" />
  </div>
</template>
<script>
import Wangeditor from 'wangeditor'
export default {
  props: {
    value: {
      type: String,
      default: ''
    },
    isClear: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      editor: ''
    }
  },
  watch: {
    isClear(val) {
      // 触发清除文本域内容
      if (val) {
        this.editor.txt.clear()
        this.info_ = null
      }
    },
    value(value) {
      if (value !== this.editor.txt.html()) {
        this.editor.txt.html(this.value)
      }
    }
    // value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
  },
  mounted() {
    const _this = this
    // eslint-disable-next-line no-undef
    _this.editor = new Wangeditor('#toolbar-container', '#text-container')
    // eslint-disable-next-line space-before-function-paren
    _this.editor.config.onchange = function (html) {
      _this.$emit('geteditor', html)
    }
    _this.editor.config.menus = [
      'head', // 标题
      'bold', // 粗体
      'fontSize', // 字号
      'fontName', // 字体
      'italic', // 斜体
      'underline', // 下划线
      'strikeThrough', // 删除线
      'foreColor', // 文字颜色
      'backColor', // 背景颜色
      'link', // 插入链接
      'list', // 列表
      'justify', // 对齐方式
      'quote', // 引用
      'emoticon', // 表情
      'image', // 插入图片
      'table', // 表格
      'video', // 插入视频
      'code', // 插入代码
      'undo', // 撤销
      'redo', // 重复
      'fullscreen' // 全屏
    ]
    _this.editor.config.onchangeTimeout = 500
    _this.editor.config.uploadImgServer =
      '/dev-api/monitor/user_base/uploadFile' // 图片上传地址
    _this.editor.config.uploadImgMaxSize = 5 * 1024 * 1024 // 2M
    _this.editor.config.uploadImgMaxLength = 1
    _this.editor.config.uploadFileName = 'file'
    _this.editor.config.uploadImgHeaders = {
      token: this.$store.state.code.token
    }
    _this.editor.config.uploadImgHooks = {
      // 上传图片之前
      before() {
        // 可阻止图片上传
      },
      // 图片上传并返回了结果，图片插入已成功
      success(xhr) {
        console.log('success', xhr)
      },
      // 图片上传并返回了结果，但图片插入时出错了
      fail(xhr, editor, resData) {
        console.log('fail', resData)
      },
      // 上传图片出错，一般为 http 请求的错误
      error(xhr, editor, resData) {
        console.log('error', xhr, resData)
      },
      // 上传图片超时
      timeout(xhr) {
        console.log(xhr)
      },
      customInsert(insertImgFn, result) {
        console.log(insertImgFn, result)
        insertImgFn(result.data.show_path) // 根据接口格式写入回显的img地址
      }
    }
    this.editor.create()
  },
  beforeDestroy() {
    // 销毁编辑器
    this.editor.destroy()
    this.editor = null
  }
}
</script>
<style lang="scss" scope>
#wangEditor {
  height: 100%;
  width: 100%;
}
.toolbar {
  //height: 45px;
  border: 1px solid #ccc;
  position: relative;
}
.text_container {
  height: calc(100% - 45px);
  position: relative;
}
</style>

使用

 <Wangeditor
          ref="Wangeditor"
          :value="WangeditorForm.wordContent"
          @geteditor="geteditor"
        >
</Wangeditor>
import Wangeditor from './wangeditor'
components: { Wangeditor },
data() {
    return {
      WangeditorForm: {
        wordContent: '' // 初始值
      }
    }
 },
methods: {
  geteditor(html) {
      this.WangeditorForm.wordContent = html
      console.log(this.WangeditorForm.wordContent)
    }
}