如何禁用TinyMce中在表格内插入表格的功能？

可以通过TinyMce的NodeChange事件监听光标位置，结合DOM判断方法识别当前是否处于表格单元格内，进而动态禁用Table菜单及相关操作。

具体实现步骤 #

• 初始化编辑器时，通过setup函数添加光标位置监听
• 在NodeChange回调中，检查当前选中节点是否属于表格元素（单元格或表格本身）
• 切换Table工具栏按钮的启用状态，同时禁用表格相关命令防止快捷键触发

示例代码：

tinymce.init({
  selector: 'textarea',
  plugins: 'table',
  toolbar: 'table',
  setup: function(editor) {
    // 监听光标节点变化事件
    editor.on('NodeChange', function(e) {
      // 判断当前是否处于表格范围内
      const isInTable = e.element && editor.dom.is(e.element, 'td, th, table');
      
      // 切换Table工具栏按钮的启用状态
      editor.ui.toggle('table', !isInTable);
      
      // 禁用所有表格相关命令，覆盖快捷键操作
      const tableCommands = ['mceInsertTable', 'mceTableProps', 'mceInsertRowBefore', 
        'mceInsertRowAfter', 'mceDeleteRow', 'mceInsertColBefore', 'mceInsertColAfter', 'mceDeleteCol'];
      tableCommands.forEach(cmd => {
        editor.setDisabled(cmd, isInTable);
      });
    });
  }
});

说明 #

• editor.dom.is()方法可快速判断节点是否匹配指定选择器，这里用td, th, table覆盖所有表格内场景
• editor.ui.toggle()直接控制工具栏按钮的可用状态，第二个参数为true启用，false禁用
• editor.setDisabled()禁用命令后，即使用户通过快捷键触发表格操作也会失效

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