vue3 wangeditor工具栏配置

### Vue3 中集成 wangeditor 编辑器并配置工具栏 在 Vue3 项目中集成 `wangeditor` 并自定义其工具栏是一个常见的需求。以下是详细的实现过程： #### 安装依赖包 为了能够在 Vue3 项目中使用 `wangeditor`，需要先安装必要的 npm 包。 ```bash npm install @wangeditor/editor @wangeditor/editor-for-vue --save ``` 这一步骤确保了编辑器核心库及其针对 Vue 的封装都被正确引入到项目当中[^4]。 #### 创建编辑器实例 接下来，在 Vue 组件内部创建一个新的 Editor 实例，并对其进行初始化设置。 ```javascript import { onBeforeUnmount, ref } from 'vue'; import E from '@wangeditor/editor/dist/base-editor'; // 引入 editor 对象 import '@wangeditor/editor/dist/css/style.css'; // 引入默认样式文件 import createEditor from '@wangeditor/editor-for-vue'; export default { setup() { const editorRef = ref(null); let editor; const initEditor = () => { if (editor == null) { editor = new E(editorRef.value); // 自定义菜单配置项 editor.config.menus = [ 'head', // 标题 'bold', // 粗体 'fontSize', // 字号 'fontName', // 字体 'italic', // 斜体 'underline', // 下划线 'strikeThrough', // 删除线 'foreColor', // 文字颜色 'backColor', // 背景颜色 'link', // 插入链接 'list', // 列表 'justify' // 对齐方式 ]; editor.create(); } }; onBeforeUnmount(() => { if (editor != null) { editor.destroy(); // 销毁编辑器 } }); return { editorRef, initEditor }; }, }; ``` 上述代码展示了如何通过修改 `menus` 属性来自定义工具栏中的按钮集合[^1]。 #### 渲染编辑区域 最后，在模板部分添加用于承载编辑器 DOM 结构的容器节点，并调用之前定义好的初始化函数完成渲染工作。 ```html <template> <div id="app"> <!-- 编辑区 --> <div class="text-container" :ref="(el) => editorRef = el"></div> <!-- 初始化编辑器 --> <button type="button" @click="initEditor">初始化</button> </div> </template> ``` 这样就完成了基于 Vue3 和 `wangeditor` 的富文本编辑器的基础搭建以及简单的工具栏定制化操作[^2]。