wangeditor 封装组件及使用

版本

"@wangeditor/editor": "^5.1.23",

"@wangeditor/editor-for-vue": "^1.0.2",

封装组件

<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px">
      <!-- 工具栏 -->
      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editor" :defaultConfig="toolbarConfig" />
      <!-- 编辑器 -->
      <Editor
        :class="isDisabled?'editor-disabled':''"
        :style="'height: '+height+'px'"
        :defaultConfig="editorConfig"
        v-model="content"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { i18nAddResources, i18nChangeLanguage, i18nGetResources } from '@wangeditor/editor'

export default {
  name: 'WangEditor',
  components: { Editor, Toolbar },
  props: {
    html: {
      type: String,
      default: '',
    },
    isDisabled:{
        type: Boolean,
        default: false
    },
    height:{
        type: Number,
        default: 400
    }
  },
  data() {
    return {
      content: this.html,
      editor: null,
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        /* 隐藏哪些菜单 */
        excludeKeys: [
          'bgColor',
          'blockquote',
          'underline',
          'italic',
          'lineHeight',
          'todo',
          'codeBlock',
          'group-more-style',
          'emotion', // 表情
          'insertLink', // 插入链接
          'group-image',
          'group-video',
          'insertTable', // 插入表格
          'divider', // 分割线
          'fullScreen', // 全屏
        ],
      },
      editorConfig: {
        placeholder: '',
        // autoFocus: false,
        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {},
      },
    }
  },
  watch: {
    //为了解决实时显示编辑器内容
    html: {
      handler(newVal) {
        this.$nextTick(()=>{
          if(!newVal){
            this.content = ''
          }else{
            this.content = newVal
          }
          if(!this.isDisabled&&this.editor){
            this.editor.enable()
          }else if(this.isDisabled&&this.editor){
            this.editor.disable()
          }
        })
      },
      deep: true
    },
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错
      if(this.isDisabled){
        this.editor.disable()
      }else{
        this.editor.enable()
      }
      // 富文本多语言
      if (this.editor) {
        // 添加繁体中文语言资源
        i18nAddResources('zh-TW', {
          editor: {
            more: '更多',
            justify: '對齊',
            indent: '縮進',
            image: '圖片',
            video: '視頻',
          },
          common: {
            ok: '確定',
            delete: '刪除',
            enter: '回車',
          },
          blockQuote: {
            title: '引用',
          },
          codeBlock: {
            title: '代碼塊',
          },
          color: {
            color: '文字顏色',
            bgColor: '背景色',
            default: '默認顏色',
            clear: '清除背景色',
          },
          divider: {
            title: '分割線',
          },
          emotion: {
            title: '表情',
          },
          fontSize: {
            title: '字號',
            default: '默認字號',
          },
          fontFamily: {
            title: '字體',
            default: '默認字體',
          },
          fullScreen: {
            title: '全屏',
          },
          header: {
            title: '標題',
            text: '正文',
          },
          image: {
            netImage: '網絡圖片',
            delete: '刪除圖片',
            edit: '編輯圖片',
            viewLink: '查看連結',
            src: '圖片地址',
            desc: '圖片描述',
            link: '圖片連結',
          },
          indent: {
            decrease: '減少縮進',
            increase: '增加縮進',
          },
          justify: {
            left: '左對齊',
            right: '右對齊',
            center: '居中對齊',
            justify: '兩端對齊',
          },
          lineHeight: {
            title: '行高',
            default: '默認行高',
          },
          link: {
            insert: '插入連結',
            text: '連結文本',
            url: '連結地址',
            unLink: '取消連結',
            edit: '修改連結',
            view: '查看連結',
          },
          textStyle: {
            bold: '粗體',
            clear: '清除格式',
            code: '行內代碼',
            italic: '斜體',
            sub: '下標',
            sup: '上標',
            through: '刪除線',
            underline: '下劃線',
          },
          undo: {
            undo: '撤銷',
            redo: '重做',
          },
          todo: {
            todo: '待辦',
          },
          listModule: {
            unOrderedList: '無序列表',
            orderedList: '有序列表',
          },
          tableModule: {
            deleteCol: '刪除列',
            deleteRow: '刪除行',
            deleteTable: '刪除表格',
            widthAuto: '寬度自適應',
            insertCol: '插入列',
            insertRow: '插入行',
            insertTable: '插入表格',
            header: '表頭',
          },
          videoModule: {
            delete: '刪除視頻',
            uploadVideo: '上傳視頻',
            insertVideo: '插入視頻',
            videoSrc: '視頻地址',
            videoSrcPlaceHolder: '視頻文件 url 或第三方 <iframe>',
            videoPoster: '視頻封面',
            videoPosterPlaceHolder: '封面圖片 url',
            ok: '確定',
            editSize: '修改尺寸',
            width: '寬度',
            height: '高度',
          },
          uploadImgModule: {
            uploadImage: '上傳圖片',
            uploadError: '{{fileName}} 上傳出錯',
          },
          highLightModule: {
            selectLang: '選擇語言',
          },
        })
        if(localStorage.getItem('language')=='en-US'){
          i18nChangeLanguage('en')
        }else if(localStorage.getItem('language')=='zh-CN'){
          i18nChangeLanguage('zh-CN')
        }else{
          i18nChangeLanguage('zh-TW')
        }
      }
    },
    onChange(editor) {
      let content = editor.getHtml()
      this.$emit('receiveContent', content)
    },
    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
    },
  },
  mounted() {
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
  },
}
</script>

<style src="@wangeditor/editor/dist/css/style.css"></style>
<style>
.editor-disabled .w-e-text-container{
  background: #f3f3f3;
  cursor: not-allowed;
}
</style>

使用

<wang-editor :html.sync="stageGoals" @receiveContent="receiveContent" :height="500"></wang-editor>

 methods: {
    receiveContent(content) {
      this.stageGoals = content
    },
 }