如何限制TinyMCE编辑器的缩进次数？未找到对应配置求解决方案

嘿，这个需求确实在TinyMCE的默认配置项里找不到直接对应的开关，但我们可以通过自定义逻辑来实现，给你几个实用的思路：

1. 监听缩进操作事件，实时拦截超出限制的行为 #

TinyMCE的缩进/反缩进操作本质是执行mceIndent和mceOutdent命令，我们可以在编辑器初始化的setup回调里监听命令执行事件，提前判断当前选中内容的缩进层级，超过限制就阻止默认行为。

示例代码：

tinymce.init({
  selector: '#myeditor',
  setup: function(editor) {
    // 定义最大允许缩进次数和每次缩进的增量（和编辑器默认保持一致，比如2em）
    const MAX_INDENT_TIMES = 3;
    const INDENT_STEP = '2em';

    editor.on('ExecCommand', function(e) {
      // 只处理缩进命令
      if (e.command === 'mceIndent') {
        const selectedNode = editor.selection.getNode();
        // 获取当前元素的margin-left值（TinyMCE默认用margin-left实现缩进）
        const currentIndent = window.getComputedStyle(selectedNode).marginLeft;
        // 转换为数值（假设单位是em）
        const currentIndentValue = parseFloat(currentIndent);
        const stepValue = parseFloat(INDENT_STEP);
        
        // 如果当前缩进次数已达上限，阻止默认操作
        if (currentIndentValue >= stepValue * MAX_INDENT_TIMES) {
          e.preventDefault();
          return false;
        }
      }
    });
  }
});

注意：如果你的编辑器用padding-left实现缩进，记得把代码里的marginLeft换成paddingLeft，保持和编辑器的默认行为一致。

2. 重写默认缩进命令，完全自定义逻辑 #

如果需要更精细的控制，可以直接重写mceIndent命令，替换成我们自己的逻辑：

tinymce.init({
  selector: '#myeditor',
  setup: function(editor) {
    const MAX_INDENT_TIMES = 3;
    const INDENT_STEP = 40; // 单位px，根据需求调整

    // 重写缩进命令
    editor.addCommand('mceIndent', function() {
      const selectedNode = editor.selection.getNode();
      let currentIndent = parseInt(selectedNode.style.marginLeft) || 0;
      
      if (currentIndent < INDENT_STEP * MAX_INDENT_TIMES) {
        currentIndent += INDENT_STEP;
        selectedNode.style.marginLeft = `${currentIndent}px`;
      }
      // 超过上限则不做任何操作
    });
  }
});

这种方式完全脱离编辑器的默认缩进逻辑，你可以自己定义每次缩进的增量和上限，灵活性更高。

3. 内容过滤：自动修正超出限制的缩进 #

如果担心用户通过粘贴或其他方式绕过前面的拦截，可以在编辑器内容变化时自动检查并修正所有元素的缩进：

tinymce.init({
  selector: '#myeditor',
  setup: function(editor) {
    const MAX_INDENT_TIMES = 3;
    const INDENT_STEP = '2em';
    const MAX_INDENT = `${parseFloat(INDENT_STEP) * MAX_INDENT_TIMES}em`;

    editor.on('change', function() {
      // 遍历所有块级元素
      const blocks = editor.dom.select('p, div, h1, h2, h3, h4, h5, h6');
      blocks.forEach(block => {
        const currentIndent = window.getComputedStyle(block).marginLeft;
        if (parseFloat(currentIndent) > parseFloat(MAX_INDENT)) {
          editor.dom.setStyle(block, 'marginLeft', MAX_INDENT);
        }
      });
    });
  }
});

这个方法相当于给内容加了一道“保险”，确保最终输出的内容不会有超出限制的缩进。

你可以根据自己的实际场景选择其中一种或组合多种方案，比如用事件拦截实时阻止，再加上内容过滤做兜底，效果会更好。

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