自定义Jodit单元格弹窗图标功能异常问题求助

问题原因 #

直接通过Jodit.atom()传入命令名字符串数组配置popup.cells是错误的，因为单元格相关操作依赖于绑定了上下文处理逻辑的动作配置，而非普通编辑器命令。仅传字符串会导致编辑器无法找到对应的事件处理函数，因此按钮失效；而delete命令触发的是默认的字符删除动作，并非单元格删除操作。

解决方案 #

需要基于Jodit默认的单元格弹窗动作配置来筛选或修改，确保每个项都包含完整的图标、处理函数等信息。

方法1：筛选默认配置中的需要项 #

直接从Jodit.defaultOptions.popup.cells中提取你需要的动作项：

const editor = new Jodit('#editor', {
  popup: {
    cells: Jodit.atom(
      Jodit.defaultOptions.popup.cells.filter(item => 
        ['valign', 'splitv', 'merge', 'addcolumn', 'addrow', 'deletecell'].includes(item.name)
      )
    ),
  }
});

注意：单元格删除的正确动作名是deletecell，而非delete，这会修复按钮样式和功能问题。

方法2：手动构建完整动作配置 #

如果需要自定义动作，可以手动构建包含name、icon、exec处理函数的配置项：

const editor = new Jodit('#editor', {
  popup: {
    cells: Jodit.atom([
      {
        name: 'valign',
        icon: 'align-middle',
        exec: (editor) => editor.execCommand('valign')
      },
      {
        name: 'splitv',
        icon: 'split-v',
        exec: (editor) => editor.execCommand('splitv')
      },
      {
        name: 'merge',
        icon: 'merge-cells',
        exec: (editor) => editor.execCommand('mergecells')
      },
      {
        name: 'addcolumn',
        icon: 'table-column-plus-after',
        exec: (editor) => editor.execCommand('insertcolafter')
      },
      {
        name: 'addrow',
        icon: 'table-row-plus-after',
        exec: (editor) => editor.execCommand('insertrowafter')
      },
      {
        name: 'deletecell',
        icon: 'trash',
        exec: (editor) => editor.execCommand('deletecell')
      }
    ]),
  }
});

验证说明 #

通过上述配置，单元格弹窗的按钮会正常显示图标，且点击时触发对应的表格操作（如合并单元格、删除单元格等），而非字符删除动作。

内容的提问来源于stack exchange，提问作者GuruBob