记一次实现wangeditor自定义菜单遇到的问题

2024-01-15 23:06:33

引言

wangeditor是一款功能强大且易于使用的富文本编辑器，它允许用户轻松地创建和编辑富文本内容。为了满足不同的使用需求，wangeditor提供了自定义菜单功能，允许用户根据自己的需要添加或删除菜单项。本文将记录我在实现wangeditor自定义菜单时遇到的问题以及相应的解决方法。

实现wangeditor自定义菜单

v5版本

在v5版本中，实现自定义菜单相对简单，只需要在创建编辑器实例时，将自定义菜单项添加到config.menus选项中即可。例如：

const editor = new WangEditor({
  menus: [
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    'backColor',  // 背景颜色
    'link',  // 链接
    'list',  // 列表
    'quote',  // 引用
    'image',  // 图片
    'video',  // 视频
    'table',  // 表格
    'code',  // 代码
    'undo',  // 撤销
    'redo',  // 重做
  ]
});

v4版本

在v4版本中，实现自定义菜单稍微复杂一些，需要使用createMenu方法来创建自定义菜单。例如：

const editor = new WangEditor(document.getElementById('editor'));
const menu = editor.createMenu([
  'head',  // 标题
  'bold',  // 粗体
  'fontSize',  // 字号
  'fontName',  // 字体
  'italic',  // 斜体
  'underline',  // 下划线
  'strikeThrough',  // 删除线
  'foreColor',  // 文字颜色
  'backColor',  // 背景颜色
  'link',  // 链接
  'list',  // 列表
  'quote',  // 引用
  'image',  // 图片
  'video',  // 视频
  'table',  // 表格
  'code',  // 代码
  'undo',  // 撤销
  'redo',  // 重做
]);
editor.menus.extend(menu);

遇遇到的问题

问题一：v5版本自定义菜单无法正常显示

在实现v5版本自定义菜单时，我遇到一个问题：自定义菜单无法正常显示。经过排查，我发现问题出在config.menus选项的配置上。原来，config.menus选项需要传入一个数组，数组中的每个元素都是一个字符串，表示菜单项的名称。但是，我在配置时，将config.menus选项配置成了一个对象，导致自定义菜单无法正常显示。

解决方法：

const editor = new WangEditor({
  menus: [
    'head',  // 标题
    'bold',  // 粗体
    'fontSize',  // 字号
    'fontName',  // 字体
    'italic',  // 斜体
    'underline',  // 下划线
    'strikeThrough',  // 删除线
    'foreColor',  // 文字颜色
    'backColor',  // 背景颜色
    'link',  // 链接
    'list',  // 列表
    'quote',  // 引用
    'image',  // 图片
    'video',  // 视频
    'table',  // 表格
    'code',  // 代码
    'undo',  // 撤销
    'redo',  // 重做
  ]
});

问题二：v4版本自定义菜单无法与vue实例交互

在实现v4版本自定义菜单时，我遇到另一个问题：自定义菜单无法与vue实例交互。经过排查，我发现问题出在createMenu方法的配置上。原来，createMenu方法需要传入一个对象，对象中的每个键值对都表示一个菜单项的名称和回调函数。但是，我在配置时，将createMenu方法配置成了一个数组，导致自定义菜单无法与vue实例交互。

解决方法：

const editor = new WangEditor(document.getElementById('editor'));
const menu = editor.createMenu({
  head: {
    $el: $('#head'),
    onClick: function (e) {
      // 菜单项点击时的回调函数
    }
  },
  bold: {
    $el: $('#bold'),
    onClick: function (e) {
      // 菜单项点击时的回调函数
    }
  },
  fontSize: {
    $el: $('#fontSize'),
    onClick: function (e) {
      // 菜单项点击时的回调函数
    }
  },
  // ...其他菜单项
});
editor.menus.extend(menu);