Trumbowyg编辑器列表缩进HTML结构错误问题求助

看起来你遇到了Trumbowyg编辑器在处理列表缩进时生成不符合预期HTML结构的问题，这种错误的嵌套列表标签不仅会破坏内容的语义化，还可能导致页面渲染出现异常。我给你几个可行的解决思路，你可以根据自己的场景尝试：

1. 优先检查编辑器的内置配置 #

Trumbowyg可能提供了控制列表生成逻辑的配置项，你可以在初始化编辑器时尝试调整相关参数，看看能否修正默认的缩进行为。比如有些版本支持通过配置控制嵌套列表的生成方式，你可以这样尝试：

$('#your-editor-element').trumbowyg({
  // 确保缩进/缩出按钮在工具栏中
  btns: ['indent', 'outdent'],
  // 尝试开启自定义列表支持（如果你的版本有这个配置）
  allowCustomLists: true,
  // 部分版本可能有list相关的语义化配置
  semanticLists: true
});

如果官方文档中存在专门控制嵌套列表的配置项，调整这个是最直接且无侵入的解决方式。

2. 重写缩进按钮的事件处理逻辑 #

如果默认的缩进逻辑无法满足需求，你可以通过Trumbowyg的API重写indent按钮的点击事件，手动实现正确的嵌套列表生成逻辑。核心思路是：当用户点击缩进按钮时，判断当前选中的列表项，手动创建<li>标签包裹嵌套的<ul>，替换掉错误的HTML结构。

示例代码参考（需要结合Trumbowyg的实际API调整）：

// 初始化编辑器
const editorInstance = $('#your-editor-element').trumbowyg();

// 重写indent按钮的处理函数
editorInstance.addBtnDef('indent', {
  fn: function() {
    const currentRange = this.range.getSelection();
    const selectedLi = currentRange.anchorNode.closest('LI');
    
    if (selectedLi && selectedLi.parentNode.tagName === 'UL') {
      const parentUl = selectedLi.parentNode;
      // 创建新的嵌套结构：用li包裹当前要缩进的ul部分
      const wrapperLi = document.createElement('LI');
      const newNestedUl = document.createElement('UL');
      
      // 将选中的li移动到新的嵌套ul中
      newNestedUl.appendChild(selectedLi);
      wrapperLi.appendChild(newNestedUl);
      // 替换原来的位置
      parentUl.appendChild(wrapperLi);
    }
    
    // 同步编辑器内容
    this.syncCode();
  }
});

注意：这段代码是简化的思路示例，实际使用时你需要完善选区判断、多列表项选中的处理逻辑，确保适配各种选中场景。

3. 对编辑器输出的HTML进行后处理 #

如果前面的方法都无法解决，你可以在获取编辑器内容（比如提交表单时）对生成的HTML进行批量修正，通过DOM解析的方式自动修复错误的嵌套结构。

示例修复函数：

function fixInvalidNestedLists(editorHtml) {
  const tempContainer = document.createElement('DIV');
  tempContainer.innerHTML = editorHtml;
  
  // 遍历所有ul元素，检查父节点是否为ul，如果是则用li包裹
  const allUls = tempContainer.querySelectorAll('UL');
  allUls.forEach(ul => {
    if (ul.parentNode.tagName === 'UL') {
      const wrapperLi = document.createElement('LI');
      ul.parentNode.replaceChild(wrapperLi, ul);
      wrapperLi.appendChild(ul);
    }
  });
  
  return tempContainer.innerHTML;
}

// 使用方式：获取编辑器内容时调用修复函数
const correctedHtml = fixInvalidNestedLists($('#your-editor-element').trumbowyg('html'));

这种方法属于“事后补救”，虽然没有从源头解决编辑器的逻辑问题，但能确保最终输出的HTML结构符合预期。

4. 尝试升级/降级编辑器版本 #

这种嵌套列表的生成错误有可能是编辑器的已知bug，你可以尝试将Trumbowyg升级到最新稳定版本，查看官方的更新日志是否有修复类似问题；如果最新版本仍存在该问题，也可以尝试降级到之前口碑较好的稳定版本，看是否能规避这个问题。

备注：内容来源于stack exchange，提问作者Manouthé