基于 Vue3 集成 WangEditor 富文本编辑器

本文由ScriptEcho平台提供技术支持

项目地址：传送门

## 使用 Vue 集成 WangEditor，实现富文本编辑功能

应用场景

WangEditor 是一款功能强大的富文本编辑器，广泛应用于各种场景，如文章编辑、邮件撰写、内容管理系统等。它提供了丰富的编辑功能，包括文本格式化、插入图片和表格、代码块编写等。

基本功能

此代码集成了 WangEditor 的核心功能，包括：

• 文本格式化：加粗、斜体、下划线、删除线、字体大小和颜色
• 段落操作：对齐、缩进、行间距
• 列表：有序列表、无序列表
• 链接：插入和编辑链接
• 图片：插入和编辑图片
• 表格：插入和编辑表格
• 代码块：插入和编辑代码块
• 预览：实时预览编辑内容

功能实现步骤及关键代码分析

1. 安装依赖

npm install @wangeditor/editor-for-vue

2. 引入组件

在 Vue 组件中引入 Editor 和 Toolbar 组件：

import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

3. 创建编辑器实例

在 setup() 钩子中，创建编辑器实例并将其附加到 ref：

const editor = shallowRef()

const handleEditorCreated = (editorInstance) => {
  editor.value = editorInstance
}

4. 销毁编辑器实例

在 onBeforeUnmount() 钩子中，销毁编辑器实例以释放资源：

onBeforeUnmount(() => {
  editor.value.destroy()
  editor.value = null
})

5. 配置编辑器

使用 editorConfig 选项配置编辑器的默认设置，如占位符：

const editorConfig = ref({
  placeholder: '请输入内容...',
})

6. 渲染组件

在模板中渲染 Editor 和 Toolbar 组件：

<template>
  <div class="editor-container">
    <div class="editor-toolbar">
      <Toolbar :editor="editor" />
    </div>
    <div class="editor-content">
      <Editor :defaultConfig="editorConfig" @onCreated="handleEditorCreated" />
    </div>
  </div>
</template>

关键代码分析

• Editor 组件用于创建编辑器实例，并通过 defaultConfig 选项配置默认设置。
• Toolbar 组件提供了编辑器的工具栏，包含各种编辑功能按钮。
• handleEditorCreated 函数在编辑器实例创建后执行，将实例附加到 editor 引用。
• onBeforeUnmount 钩子在组件卸载前执行，销毁编辑器实例以释放资源。

总结与展望

开发这段代码的过程让我深入了解了 WangEditor 的集成和使用。我学会了如何创建编辑器实例、配置默认设置、销毁实例以及使用工具栏提供编辑功能。

未来，该卡片功能可以进一步拓展和优化，例如：

• 支持更多高级功能，如公式编辑、Markdown 语法解析
• 集成第三方服务，如图片上传和文件管理
• 优化编辑器性能，提高编辑体验

• 提供更丰富的自定义选项，满足不同场景的需要

  更多组件：

  获取更多Echos

  本文由ScriptEcho平台提供技术支持

  项目地址：传送门

  扫码加入AI生成前端微信讨论群：