vue3中，wangEditor富文本组件的使用——.disable()富文本禁用、toolbarKeys配置菜单、shallowRef()创建实例、.destroy()销毁富文本、内容为html格式

在Vue 3中，若要禁用wangEditor富文本编辑器并配置工具栏的按钮，可以通过编程方式调用编辑器实例的disable()方法来禁用编辑器，并使用toolbarKeys配置想要显示或隐藏的工具栏按钮。

以下是一个示例代码：

<template>
  <div>
    <button @click="disableEditor">禁用编辑器</button>
    <div ref="editor"></div>
  </div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import E from 'wangeditor';
 
const editor = ref(null);
const editorInstance = ref(null);
 
onMounted(() => {
  editorInstance.value = new E(editor.value);
  editorInstance.value.create();
});
 
const disableEditor = () => {
  if (editorInstance.value) {
    // 禁用编辑器
    editorInstance.value.disable();
 
    // 配置工具栏按钮
    const toolbarKeys = ['bold', 'italic', 'underline', 'strikeThrough', 'foreColor', 'backColor'];
    editorInstance.value.config.toolbarKeys = toolbarKeys;
  }
};
</script>

在这个例子中，我们首先导入了wangeditor，并在组件挂载后创建了一个编辑器实例。通过点击按钮，触发disableEditor函数，该函数将编辑器实例禁用，并重新配置了工具栏按钮。这里的toolbarKeys数组定义了想要显示的按钮，其他按钮将不会显示在工具栏上。