vue2中使用wangeditor/editor-for-vue富文本插件的方法（封装组件）

首先安装wangeditor/editor-for-vue（node版本问题加上--legacy-peer-deps，不然安装不上）

npm install @wangeditor/editor-for-vue --save --legacy-peer-deps

 这个是封装的文件上传的接口

// 文件上传
  uploadImg: file => {
    const formData = new FormData()
    formData.append('files', file)
    return request({
      url: '/upload/uploadFile',
      method: 'POST',
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    })
  }

 封装的组件代码

<template>
  <div style="border: 1px solid #ccc" class="relative">
    <div v-if="disabled" class="disable-layer" />
    <Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <Editor style="overflow-y: hidden" :value="value" :default-config="editorConfig" :mode="mode" @input="handleInput" @onCreated="onCreated" />
  </div>
</template>

<script>
// 引入包
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 上传文件的接口
import { videoApi } from '@/api/video'
// 引入wangeditor/editor-for-vue的样式
import '@wangeditor/editor/dist/css/style.css'
// 上传文件的路径前缀
import { baseUrl } from '@/utils/pictureUrl'
export default {
  name: 'WangEditor',
  components: { Editor, Toolbar },
  props: {
    value: String,
    disabled: Boolean,
    cusHeight: {
      type: String,
      default: '150px'
    }
  },
  data() {
    return {
      editor: null,
      html: '',
      // wangeditor/editor-for-vue的配置
      toolbarConfig: {
        toolbarKeys: [
          'bold',
          'underline',
          'italic',
          'through',
          'clearStyle',
          'color',
          'bgColor',
          'fontSize',
          'justifyLeft',
          'justifyRight',
          'justifyCenter',
          'justifyJustify',
          'lineHeight',
          'header1',
          'header2',
          'header3',
          'header4',
          'header5',
          'bulletedList',
          'numberedList',
          'uploadImage'
          // "uploadVideo"
        ]
      },
      editorConfig: {
        placeholder: '请输入内容...',
        MENU_CONF: {
          uploadImage: {
            // 自定义图片上传
            async customUpload(file, insertFn) {
              videoApi.uploadImg(file).then(response => {
                if (response.result == 1) {
                  const url = baseUrl + response.msg
                  // 将图片插入到文本框中
                  insertFn(url)
                }
              })
            }
          }
          // uploadVideo: {
          //   // 自定义图片上传
          //   async customUpload(file, insertFn) {
          //     uploadFile('', file).then(response => {
          //       const url = response.data
          //       insertFn(this.$getFilePath(url))
          //     })
          //   }
          // }
        }
      },
      mode: 'default' // or 'simple'
    }
  },
  mounted() {},
  created() {},
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      // console.log('this.editor :>> ', this.editor.getAllMenuKeys());
    },
    handleInput(value) {
      console.log(value)
      // 将文本内容传给父组件（引用这个组件的vue文件的）
      this.$emit('input', value)
    }
  }
}
</script>

<style lang="scss" scoped>
.disable-layer {
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0.5;
}
</style>

 然后再mani.js入口文件全局注册使用即可

import myEditor from '@/components/myEditor/CusWangEditor.vue'

Vue.component('myEditor', myEditor)

<template>
  <div>
    <el-card>
      <myEditor :value="initForm.content" @input="input" />
      <div class="btn"><el-button type="primary" size="small" @click="submit">保存</el-button></div>
    </el-card>
  </div>
</template>

<script>
import { contentApi } from '@/api/content'
export default {
  name: 'Area',
  data() {
    return {
      // 搜索
      postForm: {
        currentPage: 1,
        pageSize: 10
      },
      initForm: {
        content: '',
        plateId: 5,
        id: ''
      }
    }
  },
  computed: {},
  mounted() {
    this.loadData()
  },
  methods: {
    // 将myEditor富文本传过来的content文本内容进行存储
    input(value) {
      this.initForm.content = value
    },
    // 保存
    submit() {
      this.$confirm('确认保存吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          contentApi.text(this.$filNull(this.initForm)).then(res => {
            const { result, msg } = res
            if (result == 1) {
              this.$message.success(msg)
            } else {
              this.$message.warning(msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消保存'
          })
        })
    },
    // 获取眼谷A区文本
    loadData() {
      contentApi.getRichTextContent({ plateId: this.initForm.plateId }).then(res => {
        const { data, result, msg } = res
        if (result == 1) {
          this.initForm.content = data.content
          this.initForm.id = data.id
        } else {
          this.$message.warning(msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
.btn {
  margin-top: 50px;
  display: flex;
  justify-content: center;
}
::v-deep .ql-container {
  height: 500px !important;
}
</style>

这样就可了

最主要的就是下面这些代码

// 引入包
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 上传文件的接口
import { videoApi } from '@/api/video'
// 引入wangeditor/editor-for-vue的样式
import '@wangeditor/editor/dist/css/style.css'
// 上传文件的路径前缀
import { baseUrl } from '@/utils/pictureUrl'

<template>
  <div style="border: 1px solid #ccc" class="relative">
    <div v-if="disabled" class="disable-layer" />
    <Toolbar ref="toolbar" style="border-bottom: 1px solid #ccc" :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <Editor style="overflow-y: hidden" :value="value" :default-config="editorConfig" :mode="mode" @input="handleInput" @onCreated="onCreated" />
  </div>
</template>

MENU_CONF: {
          uploadImage: {
            // 自定义图片上传
            async customUpload(file, insertFn) {
              // 上传图片
              videoApi.uploadImg(file).then(response => {
                if (response.result == 1) {
                  const url = baseUrl + response.msg
                  // 将图片插入到文本框中（一定要记得insertFn到文本框内不然没作用）
                  insertFn(url)
                }
              })
            }
          }
          // uploadVideo: {
          //   // 自定义图片上传
          //   async customUpload(file, insertFn) {
          //     uploadFile('', file).then(response => {
          //       const url = response.data
          //       insertFn(this.$getFilePath(url))
          //     })
          //   }
          // }
        }

beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
      // console.log('this.editor :>> ', this.editor.getAllMenuKeys());
    },
    handleInput(value) {
      console.log(value)
      // 将文本内容传给父组件（引用这个组件的vue文件的）
      this.$emit('input', value)
    }
  }