vue2 wangeditor5 回显

Question

<template>
  <div class="editor-wrapper">
    <toolbar :editor="editor" :default-config="toolbarConfig" :mode="mode" />
    <editor
      v-model="html"
      :style="{ height: height + 'px' }"
      :default-config="editorConfig"
      :mode="mode"
      @onCreated="onCreated"
      @onChange="onChange"
    />
    <div v-if="maxlength" class="useful-num">{{ useLen }}/{{ maxlength }}</div>
  </div>
</template>

<script>
  import { postFileUpload } from '@/api/upload'
  import '@wangeditor/editor/dist/css/style.css'
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
  export default {
    name: 'MyEditor',
    components: {
      Editor,
      Toolbar,
    },
    model: {
      prop: 'value',
      event: 'change',
    },
    props: {
      value: {
        type: String,
        default: '',
      },
      maxlength: {
        type: Number,
        default: 0,
      },
      height: {
        type: [String, Number],
        default: 300,
      },
    },
    data() {
      return {
        editor: null,
        html: '',
        toolbarConfig: {},
        editorConfig: {
          placeholder: '请输入内容',
          MENU_CONF: {
            uploadImage: {
              // 自定义图片上传功能
              customUpload: (resultFile, insertImgFn) => {
                const formData = new FormData()
                formData.append('file', resultFile)
                // 将文件上传至服务器，res.data返回服务器存放文件的url
                postFileUpload(formData).then((res) => {
                  // 插入图片，三个参数分别对应，url alt href
                  insertImgFn(res.data, '', res.data)
                })
              },
            },
            uploadVideo: {
              // 自定义视频上传功能
              customUpload: (resultFile, insertImgFn) => {
                const formData = new FormData()
                formData.append('file', resultFile)
                // 将文件上传至服务器，res.data返回服务器存放文件的url
                postFileUpload(formData).then((res) => {
                  // 插入视频，三个参数分别对应，url alt href
                  // "url": "xxx", // 图片 src ，必须
                  //   "alt": "yyy", // 图片描述文字，非必须
                  //   "href": "zzz" // 图片的链接，非必须
                  insertImgFn(res.data, '', res.data)
                })
              },
            },
          },
        },
        mode: 'default', // or 'simple'
        useLen: 0,
      }
    },
    watch: {
      value(val) {
        this.html = val
      },
    },
    beforeDestroy() {
      // editor销毁
      const editor = this.editor
      if (editor == null) {
        return
      }
      editor.destroy()
    },
    methods: {
      onCreated(editor) {
        this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
        console.log(this.editor)
      },
      onChange() {
        const text = this.editor.getText()
        // 计算当前输入了多少文字
        this.useLen = (text || '').length
        // 每次富文本内容改变，触发change事件
        this.$emit('change', this.html)
      },
    },
  }
</script>

<style scoped>
  .editor-wrapper {
    z-index: 3;
    position: relative;
  }
  .editor-wrapper /deep/.w-e-toolbar {
    z-index: 2 !important;
    border: solid 1px #e6e9ec !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    .w-e-bar-item {
      padding: 1px;
    }
  }
  .editor-wrapper /deep/.w-e-text-container {
    z-index: 1 !important;
    border: solid 1px #e6e9ec !important;
    border-top: none !important;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
  }
  .useful-num {
    position: absolute;
    right: 6px;
    bottom: 10px;
    z-index: 99999;
    font-size: 12px;
    color: $text-3;
    background: #fff;
    padding: 0 6px;
    height: 28px;
    line-height: 28px;
  }
</style>

调用第一次回显会把内容 变成 <p>
</p>