在Vue3中集成wangEditor富文本编辑器：完整指南

介绍

在现代Web应用中，富文本编辑器是不可或缺的组件。本文将详细介绍如何在Vue3项目中集成wangEditor，一个轻量级、功能强大的Web富文本编辑器。

安装与配置

首先，我们需要安装wangEditor的相关依赖：

npm install @wangeditor/editor@^5.1.23 @wangeditor/[email protected]

组件实现

下面是完整的富文本编辑器组件实现代码：

关键点解析

1. 编辑器实例管理：

   • 使用shallowRef来存储编辑器实例，这是wangEditor的推荐做法

   • 在组件销毁时调用editor.destroy()进行清理

2. 双向绑定：

   • 通过v-model绑定valueHtml实现内容双向绑定

   • 提供onChange事件处理内容变化

3. 配置选项：

   • toolbarConfig：配置工具栏按钮

   • editorConfig：配置编辑器行为，如占位文本

4. 异步内容加载：

   • 演示了如何异步设置编辑器内容

使用示例

在父组件中使用这个编辑器：

高级配置

自定义工具栏

const toolbarConfig = {
  excludeKeys: [
    'headerSelect',
    'italic',
    'group-more-style' // 排除菜单组，写菜单组 key 的值即可
  ]
}

扩展编辑器功能

const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      server: '/api/upload-image',
      fieldName: 'image'
    }
  }
}

总结

wangEditor为Vue3提供了简单易用的富文本编辑解决方案。通过本文的组件实现，你可以快速在项目中集成功能完善的富文本编辑器，并根据需要进行定制扩展。这种实现方式既保持了编辑器的完整功能，又能很好地融入Vue3的响应式系统。