Tinymce-table表格插件改造

最新推荐文章于 2025-03-09 15:06:44 发布

bin彬彬彬

最新推荐文章于 2025-03-09 15:06:44 发布

阅读量2.2k

点赞数

分类专栏： Tinymce 文章标签：前端 javascript chrome html5 css

本文链接：https://blog.csdn.net/weixin_43402720/article/details/128898373

版权

Tinymce 专栏收录该内容

2 篇文章

订阅专栏

文章讲述了如何改进Tinymce编辑器中table插件的交互方式，以满足产品经理的需求。通过分析源码，可以删除不必要的菜单项，或者创建一个新的自定义插件quickTable，简化用户插入表格的步骤，直接在点击表格按钮后设置行列数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本次改造是基于"version": "6.3.1"的源码下修改！

Tinymce提供了table插件，只需在plugins和toolbar配置项中加上table即可，交互如下：

插件原交互方式是点击表格按钮后，下方弹窗菜单，用户需要鼠标滑到菜单第一项（表格)处才可设置表格的行列。产品经理表示此处交互过于繁琐，希望用户点击工具栏中的表格按钮既可去设置表格的行列

现有交互如下：

产品经理期望的交互：

修改思路，首先找到table插件源码

可以看到原插件自带配置了7个菜单项，inserttable则是插入表格的快捷方式。

此处如果想达到期望的效果，可以直接把后面的6个配置项删除，即可达到。

但是考虑下在能不到源码则不动的情况下，我们换个思路，我知道了inserttable这个快捷方式，那么我们可以自定义新增一个插件。新增插件的步骤可参照官网 plugin.js内容如下

tinymce.PluginManager.add("quickTable", function (editor) {
  editor.ui.registry.addMenuButton("quickTable", {
    icon: "table",
    tooltip: "Table",
    fetch: (callback) =>
      callback([
        {
          type: "fancymenuitem",
          fancytype: "inserttable",
          onAction: (data) =>
            editor.execCommand("mceInsertTable", false, {
              rows: data.numRows,
              columns: data.numColumns,
            }),
        },
      ]),
  });
});

添加自定义插件后，我们只需要quickTable引入这个插件，即可实现想要的快捷插入表格的效果