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数组定义了想要显示的按钮，其他按钮将不会显示在工具栏上。