Markdown 编辑器：Vue3 中集成 WangEditor

应用场景

WangEditor 是一款功能强大的 Markdown 编辑器，广泛应用于在线文档编辑、笔记记录、博客撰写等场景。它提供了一系列丰富的文本编辑功能，可以帮助用户轻松创建和格式化 Markdown 文档。

基本功能

此代码示例展示了如何在 Vue3 中集成 WangEditor，实现了 Markdown 编辑器基本功能，包括：

• **富文本编辑：**支持粗体、斜体、下划线、删除线、列表、链接等文本格式化。
• **图片上传：**支持本地图片上传，并可限制图片大小。
• **内容变更监听：**实时监听编辑器内容变化，并输出 HTML 内容。

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

1. 引入依赖

import 'https://unpkg.com/@wangeditor/editor@latest/dist/index.js'

2. 初始化编辑器

const editor = E.createEditor({
  selector: '#editor-text-area',
  content: [],
  config: editorConfig,
})

• selector 指定编辑器容器的 ID。
• content 初始化编辑器内容，可以是字符串或数组。
• config 配置编辑器选项，包括语言、菜单配置、事件监听等。

3. 创建工具栏

const toolbar = E.createToolbar({
  editor,
  selector: '#editor-toolbar',
  config: {
    excludeKeys: 'fullScreen',
  },
})

• editor 指定要关联的编辑器实例。
• selector 指定工具栏容器的 ID。
• config 配置工具栏选项，例如排除某些按钮。

4. 点击空白处聚焦编辑器

document.getElementById('editor-text-area').addEventListener('click', (e) => {
  if (e.target.id === 'editor-text-area') {
    editor.blur()
    editor.focus(true) // focus 到末尾
  }
})

• 此代码监听编辑器区域的点击事件，当点击空白处时，先取消焦点再重新聚焦到末尾。

总结与展望

通过这段代码的开发，我学到了以下经验与收获：

• 熟练掌握 Vue3 中集成第三方库的方式。
• 理解 WangEditor 的 API 和配置选项，灵活定制编辑器功能。
• 优化了编辑器用户体验，如点击空白处聚焦。

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

• 集成更多编辑器插件，如代码高亮、公式编辑等。
• 支持协同编辑，实现多人同时编辑文档。
• 优化编辑器性能，提高加载和编辑速度。