如何自定义WangEditor富文本，让你的编辑器更得心应手？

2022-11-20 05:52:08

使用 Vue3 实现富文本编辑：WangEditor 指南

在当今内容驱动的数字世界中，创建引人入胜且内容丰富的文本至关重要。而 Vue3 中的 WangEditor 恰好可以满足这一需求，作为一款功能强大的富文本编辑器，它让您能够在 Vue3 项目中轻松集成富文本编辑功能。

安装和配置 WangEditor

要开始使用，请使用以下命令通过 npm 安装 WangEditor：

npm install wang-editor --save

在项目中导入 WangEditor：

import WangEditor from 'wang-editor'

创建 WangEditor 实例并将其挂载到 Vue3 组件：

export default {
  data() {
    return {
      editor: null
    }
  },
  mounted() {
    this.editor = new WangEditor(this.$refs.editor)
    this.editor.create()
  }
}

自定义工具栏菜单

WangEditor 提供了丰富的工具栏菜单，您可以根据需要进行自定义。

要显示特定的菜单，请修改 config.menus 数组：

this.editor.config.menus = [
  'bold', 'underline', 'italic', 'strikethrough',
  'foreColor', 'backColor', 'link', 'list', 'quote',
  'image', 'video', 'table', 'code', 'fullscreen'
]

自定义工具栏功能

您可以进一步自定义工具栏功能，例如粗体按钮：

this.editor.config.menus.bold = {
  exec: function (editor) {
    editor.selection.restoreSelection()
    document.execCommand('bold')
  }
}

扩展新功能菜单

WangEditor 还允许您添加新的功能菜单：

this.editor.config.menus.myNewMenu = {
  // 菜单名称
  name: '我的新菜单',
  // 菜单图标，可选
  icon: 'fa fa-heart',
  // 菜单快捷键，可选
  hotkey: 'ctrl+shift+m',
  // 菜单执行函数
  exec: function (editor) {
    // 执行你的自定义功能
  }
}

示例代码

以下是一个使用 WangEditor 的完整示例代码：

<template>
  <div>
    <div id="editor" ref="editor"></div>
  </div>
</template>

<script>
import WangEditor from 'wang-editor'

export default {
  mounted() {
    const editor = new WangEditor(this.$refs.editor)
    editor.config.menus = ['bold', 'underline', 'italic', 'strikethrough']
    editor.create()
  }
}
</script>