Vue3 中值得推荐的富文本编辑器组件盘点

念九_ysl

5585人浏览 · 2025-07-02 21:37:06

念九_ysl · 2025-07-02 21:37:06 发布

在 Web 开发中，富文本编辑器是内容管理系统（CMS）、博客平台、在线协作工具等场景的核心组件。Vue3 作为主流框架之一，拥有丰富的富文本编辑器组件生态。本文将盘点几款主流的 Vue3 富文本编辑器组件，涵盖其核心功能、依赖安装、适用场景及代码示例，帮助开发者快速选型。

一、vue3-tinymce

1. 依赖与安装

依赖: TinyMCE（商业功能需付费）
安装:
```
npm install @tinymce/tinymce-vue
```

2. 核心功能

跨平台兼容性: 支持桌面端和移动端，适配多种浏览器。
高度可定制: 提供丰富的配置项（如工具栏、快捷键、插件扩展）。
企业级功能: 商业版支持实时协作、AI 写作辅助、文档保护等。
国际化支持: 多语言切换，适合全球化项目。

3. 适用场景

企业级 CMS 或文档协作平台（如 Notion 替代方案）。
需要复杂格式控制（如表格、代码块）的场景。
需要集成 AI 插件（如自动补全、语法检查）的项目。

4. 示例代码

<template>
  <editor
    api-key="your-api-key" <!-- 商业版需申请 API Key -->
    v-model="content"
    :init="{
      height: 500,
      menubar: false,
      plugins: 'lists link image table code',
      toolbar: 'undo redo | bold italic | alignleft aligncenter alignright | bullist numlist | link image table code'
    }"
  />
</template>

<script setup>
import { ref } from 'vue';
import Editor from '@tinymce/tinymce-vue';

const content = ref('<p>初始内容</p>');
</script>

二、tiptap (with @tiptap/vue-3)

1. 依赖与安装

依赖: @tiptap/core, @tiptap/starter-kit

安装:

npm install @tiptap/vue-3 @tiptap/core @tiptap/starter-kit

2. 核心功能

模块化设计: 通过插件系统灵活扩展功能（如自定义节点、标记）。
轻量级: 基础版本仅需 20KB，适合性能敏感项目。
TypeScript 支持: 完善的类型定义，开发体验友好。
双向绑定: 支持 v-model 实现数据同步。

3. 适用场景

需要深度定制编辑器功能（如自定义 Markdown 解析）的项目。
轻量级应用场景（如移动优先的 Web App）。
需要集成自定义逻辑（如自定义命令、状态管理）的场景。

4. 示例代码

<template>
  <editor-content :editor="editor" />
</template>

<script setup>
import { Editor, EditorContent } from '@tiptap/vue-3';
import StarterKit from '@tiptap/starter-kit';

const editor = new Editor({
  content: '<p>初始内容</p>',
  extensions: [
    StarterKit.configure({
      // 自定义配置，如禁用某些功能
    }),
  ],
});
</script>

三、Quasar q-editor

1. 依赖与安装

依赖: Quasar Framework
安装:
```
npm install quasar
```

2. 核心功能

移动端优化: 专为触摸屏设计，工具栏适配移动端手势操作。
内置样式: 提供 Quasar 主题一致的 UI 风格。
快速集成: 无需额外配置即可直接使用。

3. 适用场景

移动端优先的 Web 应用（如移动 CMS、社交平台）。
需要与 Quasar 框架深度集成的项目。
快速原型开发（如 MVP 阶段的产品）。

4. 示例代码

<template>
  <q-editor
    v-model="content"
    min-height="5rem"
    :toolbar="[
      ['bold', 'italic', 'underline'],
      ['unordered', 'ordered'],
      ['link', 'image']
    ]"
  />
</template>

<script setup>
import { ref } from 'vue';
const content = ref('<p>初始内容</p>');
</script>

四、WangEditor

1. 依赖与安装

依赖: @wangeditor/editor-for-vue
安装:
```
npm install @wangeditor/editor-for-vue
```

2. 核心功能

中文友好: 本地化支持完善，适合国内开发者。
简单易用: 提供开箱即用的工具栏和默认配置。
自定义扩展: 支持自定义菜单项（如插入图表、公式）。
云存储集成: 可轻松对接阿里云/OSS 实现图片上传。

3. 适用场景

国内企业内部系统（如 OA、ERP 的内容编辑模块）。
需要快速集成富文本功能的中小型项目。
需要支持中文排版和本地化功能的场景。

4. 示例代码

<template>
  <div>
    <toolbar :editor="editor" />
    <editor
      v-model="valueHtml"
      :default-config="editorConfig"
      @on-created="handleCreated"
    />
  </div>
</template>

<script setup>
import { ref, onBeforeUnmount } from 'vue';
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

const valueHtml = ref('<p>初始内容</p>');
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      customUpload: async (file, insertFn) => {
        // 自定义图片上传逻辑
        const url = await uploadToOSS(file);
        insertFn(url, '图片描述');
      }
    }
  }
};
const editor = ref(null);

const handleCreated = (editorInstance) => {
  editor.value = editorInstance;
};

onBeforeUnmount(() => {
  if (editor.value) editor.value.destroy();
});
</script>

五、Quill + @vueup/vue-quill

1. 依赖与安装

依赖: quill, @vueup/vue-quill
安装:
```
npm install quill @vueup/vue-quill
```

2. 核心功能

轻量级: Quill 本身仅 100KB 左右。
模块化扩展: 支持通过插件添加功能（如代码高亮、表格）。
主题支持: 提供 snow 和 bubble 两种默认主题。

3. 适用场景

需要高度定制化主题的项目（如设计类工具）。
对性能要求极高的场景（如嵌入式系统）。
需要集成第三方插件（如语法高亮、表格操作）的场景。

4. 示例代码

<template>
  <div class="editor-container">
    <QuillEditor
      v-model:content="content"
      contentType="html"
      :toolbar="toolbarOptions"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { QuillEditor } from '@vueup/vue-quill';
import '@vueup/vue-quill/dist/vue-quill.snow.css';

const content = ref('<p>初始内容</p>');
const toolbarOptions = [
  ['bold', 'italic', 'underline'],
  [{ header: [1, 2, 3, false] }],
  ['image', 'code-block']
];
</script>

六、CKEditor 5

1. 依赖与安装

依赖: @ckeditor/ckeditor5-vue
安装:
```
npm install @ckeditor/ckeditor5-vue
```

2. 核心功能

现代编辑体验: 支持实时协作、语音输入等前沿功能。
企业级安全: 提供文档加密、权限控制等高级功能。
多平台支持: 支持桌面端、移动端及 React/Vue/Angular 等框架。

3. 适用场景

企业级文档协作平台（如 Google Docs 替代方案）。
需要高级安全功能的金融、医疗行业应用。
多平台统一开发（如跨框架项目）。

4. 示例代码

<template>
  <ckeditor
    v-model="content"
    :config="editorConfig"
    @ready="onReady"
  />
</template>

<script setup>
import { ref } from 'vue';
import CKEditor from '@ckeditor/ckeditor5-vue';

const content = ref('<p>初始内容</p>');
const editorConfig = {
  toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
  ckfinder: {
    uploadUrl: '/api/upload' // 自定义文件上传接口
  }
};

const onReady = (editor) => {
  // 初始化逻辑
};
</script>

总结与选型建议

组件	优点	适用场景	学习曲线
vue3-tinymce	功能全面，企业级支持完善	企业级 CMS、文档协作平台	中等
tiptap	轻量、高度可定制	需要深度定制的项目	高
q-editor	移动端优化，集成 Quasar 主题	移动优先的 Web 应用	低
WangEditor	中文友好，开箱即用	国内企业系统、中小型项目	低
Quill	轻量、模块化扩展	需要自定义主题或插件的场景	中等
CKEditor 5	现代功能、多平台支持	企业级协作平台、多框架项目	中等