TinyMCE advlist插件有序列表嵌套及回车行为修改诉求

我懂你这个需求——现在用advlist插件时，在有序列表的"Title 1"后按两次回车，列表直接被拆成两个独立的，完全不是想要的嵌套效果对吧？别着急，咱们可以通过自定义TinyMCE的键盘事件处理来修改这个默认行为，实现按两次回车插入嵌套有序列表的效果。

具体实现步骤 #

你只需要在TinyMCE的初始化配置里，利用setup函数监听回车事件，然后重写空列表项的回车行为：

tinymce.init({
  selector: 'textarea',
  plugins: 'advlist lists', // 务必确保advlist和lists插件已启用
  setup: function(editor) {
    // 监听键盘按下事件
    editor.on('keydown', function(e) {
      // 只处理回车键（keyCode 13）
      if (e.keyCode === 13) {
        const currentNode = editor.selection.getNode();
        
        // 判断当前光标是否在有序列表的列表项内
        if (currentNode.nodeName === 'LI' && currentNode.parentElement.nodeName === 'OL') {
          // 检查当前列表项是否为空（对应按两次回车的场景）
          if (currentNode.textContent.trim() === '') {
            e.preventDefault(); // 阻止默认的拆分列表行为
            
            // 创建嵌套的有序列表和第一个列表项
            const nestedOl = editor.dom.create('ol');
            const nestedLi = editor.dom.create('li');
            
            // 清空当前空列表项，插入嵌套列表
            editor.dom.setHTML(currentNode, '');
            nestedOl.appendChild(nestedLi);
            currentNode.appendChild(nestedOl);
            
            // 将光标定位到嵌套列表的第一个项内，方便直接输入内容
            editor.selection.select(nestedLi);
            editor.selection.collapse(true);
          }
        }
      }
    });
  }
});

代码说明 #

这段代码的核心逻辑是：

1. 监听回车键，判断当前光标是否处于有序列表的空列表项中（也就是你按两次回车后的状态）
2. 阻止TinyMCE默认的拆分列表行为
3. 动态创建一个嵌套的有序列表，插入到当前空列表项中，并把光标定位到嵌套列表的第一个项里，这样你就能直接输入嵌套内容了

如果需要调整触发嵌套的条件（比如不需要空项也能触发嵌套），可以修改currentNode.textContent.trim() === ''这个判断逻辑来适配你的需求。

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