问题描述：

在需求中遇到一个问题，要在同一个页面展示并支持编辑多个富文本。修改工具栏，仅支持部分工具使用

实现效果

解决方案

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save

yarn add @wangeditor/editor-for-vue
# 或者 npm install @wangeditor/editor-for-vue --save

<template>
    <div v-for="item in list" :key='item.id' :key="refreshKey">
    <Toolbar
            style="border-bottom: 1px solid #ccc"
            :mode="mode"
            :editor="item.editor"
            :defaultConfig="toolbarConfig"
          />

          <Editor
            style="height: 380px"
            v-model="item.content"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="(e) => onCreated(e, index)"
            @onChange="onChange"
          />
    <div/>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { DomEditor } from '@wangeditor/editor'
export default Vue.extend({
    components: { Editor, Toolbar },
    data() {
        return {
            refreshKey: ''
            editor: null,
            toolbarConfig: {
	        showLinkImg: false,
	        uploadImgShowBase64: true,
	        excludeKeys: [
	          'insertVideo', // 删除视频
	          'uploadVideo',
	          'group-video',
	          'insertImage',// 删除网络图片上传
	          'insertLink',// 删除链接
	          'insertTable',// 删除表格
	          'codeBlock',// 删除代码块
	        ]
	      },
            editorConfig: {
		        placeholder: '',
		        readOnly: false, // 是否只允许阅读，不可编辑
		        autoFocus: true,
		        MENU_CONF: {
		          // 配置上传图片,只允许base64上传
		          uploadImage: {
		            server: '/api/upload', // 不使用
		            allowedFileTypes: ['image/*'],
		            maxFileSize: 1 * 1024 * 1024, // 1M
		            base64LimitSize: 1 * 1024 * 1024, // 1g 以下插入 base64
		            onError: (file, err, res) => {
		              this.$message.warning('当前选择的图片过大！请选择1M以内')
		            },
		          },
		     }
      },

       mode: 'default', // or 'simple'
       list:[]
      }
    },
    watch: {
	    techniquesInfo: {
	      handler(val, oldVal) {
	        if (val.id) {
	        // 根据状态切换富文本是否是可以编辑的
	          val.status == 1 ? this.editorConfig.readOnly = false : this.editorConfig.readOnly = true
	            this.refreshKey = Math.random()
	          }
	      },
	      deep: true,
	      immediate: true
	    }
  },

    methods: {
        onCreated(editor) {
          // 因为是数组，页面上有多个富文本，相当于每个富文本都得有一个editor。如果不每个富文本绑定一个，那切换 	readOnly状态时会有2问题
          //  this.editor = Object.seal(editor) // 一定要用 Object.seal()
          let E = Object.seal(editor)
          this.$set(this.list, index, { ...this.list[index], editor: E })
	    },
	    onChange(editor) {
	       // 点击一下富文本编辑页窗口就会执行
	      const toolbar = DomEditor.getToolbar(editor)
	      console.log("工具栏配置", toolbar.getConfig().toolbarKeys); // 工具栏配置
	    },
	    getList(){
	          // ...获取后端数据方法，省略
	    },
	 }，
    beforeDestroy() {
        const editor = this.editor
        if (editor == null) return
        editor.destroy() // 组件销毁时，及时销毁编辑器
    }
})
</script>