vue wangeditor富文本编辑器使用

先安装

npm install wangeditor

代码参考：

1. MyEditor.vue

<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
      
      <Editor style="height: 175px; overflow-y: hidden" :defaultConfig="editorConfig" v-model="html" @onChange="onChange"
        @onCreated="onCreated" />
    div>
  div>
template>
 
<script>
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
export default {
  name: "MyEditor",
  components: { Editor, Toolbar },
  props: {
    wangType:'',
    aaaId: '',
    bbbId: '',
  },
  data() {
    return {
      editor: null,
      html: "",

      content: {
        type: String,
        default: '',
      },
      toolbarConfig: {
        /* 显示哪些菜单，如何排序、分组 */
        toolbarKeys: [
          "headerSelect",
          "blockquote",
          "codeBlock",
          "|",
          "bold",
          "underline",
          "italic",
          {
            key: "group-more-style",
            title: "更多",
            iconSvg: " +
              "" +
              "" +
              "" +
              "",
            menuKeys: ["through", "code", "sup", "sub", "clearStyle"]
          },
          "color",
          "bgColor",
          "|",
          "fontSize",
          "fontFamily",
          "lineHeight",
          "|",
          "bulletedList",
          "numberedList",
          "todo",
          {
            key: "group-justify",
            iconSvg: "",
            title: "对齐",
            menuKeys: ["justifyLeft", "justifyRight", "justifyCenter", "justifyJustify"]
          },
          {
            key: "group-indent",
            title: "缩进",
            iconSvg: "",
            menuKeys: ["indent", "delIndent"]
          },
          "|",
          "emotion",
          // "insertLink",
          {
            key: "group-image",
            title: "图片",
            iconSvg: "",
            menuKeys: ["uploadImage"]
            // menuKeys: ["insertImage", "uploadImage"]
          },
          // {
          //   key: "group-video",
          //   title: "视频",
          //   iconSvg: "",
          //   menuKeys: ["insertVideo", "uploadVideo"]
          // },
          "insertTable",
          "divider",
          "|",
          "undo",
          "redo",
          "|",
          "fullScreen"
        ]

        // excludeKeys: [ ], /* 隐藏哪些菜单 */ 
      },

      editorConfig: {
        placeholder: "",
        // autoFocus: false,
        readOnly: false, // true只读、不可编辑
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          uploadImage: {
            // 后端上传地址，必填
            server: this.$store.state.updataurl,
            // form-data fieldName，后端接口参数名称，默认值wangeditor-uploaded-image
            // fieldName: "file",
            // 1M，单个文件的最大体积限制，默认为 2M
            maxFileSize: 1 * 1024 * 1024,
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedFileTypes: ['image/*'],
            // 15 秒，超时时间，默认为 10 秒
            timeout: 15 * 1000,
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            // meta: {
            //     token: 'xxx',
            //     otherKey: 'yyy'
            // },
            // 将 meta 拼接到 url 参数中，默认 false
            // metaWithUrl: false,
            // 自定义增加 http  header
            headers: {
              Authorization: this.$store.getters.token  || localStorage.getItem("token"),
              // soloFileName: 'article' //和后端协商的图片标识
            },
            uploadImgHeaders: {
              'Access-Control-Allow-Origin': 'origin'
            },
            // withCredentials:true,
            // 自定义上传
            // async customUpload(file, insertFn) {  // JS 语法
            //   const res = await API.Comm.upload(file)
            //   let resultUrl = this.$store.state.baseurl + res.response.data.src;
            //   insertFn(resultUrl)
            //   // insertFn(url, alt, href)
            // }
            // uploadImgHooks:{ //customInsert
            //插入图片的主要方法！！！！
            customInsert: (result, insertImg, editor) => {
              // 图片上传成功，插入图片的回调
              //result为上传图片成功的时候返回的数据
              let url = this.$store.state.baseurl + result.data.src;
              insertImg(url);
            }
            // }
          },
        },
      }
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor); // 【注意】一定要用 Object.seal() 否则会报错
    },

    onChange(editor) {          
      this.$emit('catchData', editor.getHtml());
    },
    getEditorText() {
      const editor = this.editor;
      if (editor == null) return;
      // console.log(editor.getText()); // 执行 editor API
    },
    printEditorHtml() {
      const editor = this.editor;
      if (editor == null) return;
      // console.log(editor.getHtml()); // 执行 editor API
    },
    async getContent() {
    	//因为多个地方用到了该控件，所以在富文本编辑器内进行了异步区分，从而执行哪个异步方法
      if(this.wangType=='aaa'){
        if(this.aaaId){
          const res = await this.$API.AsyncFile.getContentByAAAId(this.aaaId)
          this.content = res.data.data.content
        }else{
          this.content = ''
        }
      }else if(this.wangType=='bbb'){
        if(this.bbbId){
          const res = await this.$API.AsyncFile.getContentByBBBId(this.bbbId)
          this.content = res.data.data.content
        }else{
          this.content = ''
        }
      }
      if (this.content) {
      	//图片替换
        this.html = this.content.replace(/]*src=['"]([^'"]+)[^>]*>/gi, (match, p1) => {
          return `) > -1 ? p1 : 'http://xxxxxxxxxx.com.cn/' + p1}' />`
        })
      }
      // console.log("this.html", this.html)
    },
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    this.getContent()
  },

  beforeDestroy() {
    const editor = this.editor;
    if (editor == null) return;
    editor.destroy(); // 组件销毁时，及时销毁 editor ，重要！！！
  }


}
script>
 
<style src="@wangeditor/editor/dist/css/style.css">style>

2.test.vue

<template>
  <div class="body">
    <span>测试span>
    <span>正文span>
    <my-editor @catchData="catchData" :aaaId='aaaId' :wangType="wangType">my-editor>
  div>
template>

<script>
import MyEditor from '@/components/MyEditor'
export default {
  components: {
    MyEditor
  },
  data() {
    return {
      aaaId: '',
      wangType: 'aaa',
      content:''
    }
  },
  
  methods: {
    catchData(html) {
      this.content = html.replace(', ');
      // console.log("catchData---html", html)
    },
  }
}
script>

<style lang="less" scoped>

style>

3.store文件夹下的index.js

import Vue from 'vue'
import Vuex from 'vuex'
import tab from './tab'
import user from './user'

import getters from './getters'


Vue.use(Vuex)

export default new Vuex.Store({
  modules:{
    tab,
    user
  },
  state: {
    MAX_NUM:9999,
    baseurl: "http://xxxxxxxxxx.com.cn/",  //图片前缀
    updataurl:"http://xxxxx/uploadPic", //图片上传地址
    videoUploadUrl:"http://xxxx/uploadVideo", //视频上传地址
  },
  getters
})

使用富文本编辑器的时候直接将获取的正文内容传了过去，但每次获取到都是空，后来就直接在富文本编辑器里异步获取到正文内容，数据进行了显示，详情请参考以下链接：

参考：
vue使用wangEditor(富文本编辑器)时，异步获取数据，后端返回数据无法显示问题（已解决）