最新版TinyMCE粘贴代码自动加<ul>标签致轮播脚本失效如何解决

问题原因 #

这是TinyMCE默认HTML净化逻辑导致的必然结果，不是随机异常。按照W3C标准HTML语法规则，<li>标签的合法父元素只能是<ul>、<ol>、<menu>三类列表容器，直接将<li>放在<div class="bxslider">下属于非标准DOM结构，编辑器触发自动修复规则后，会给游离状态的<li>外层补全<ul>父标签，最终输出篡改后的代码，导致bxslider轮播脚本匹配不到目标子元素，功能失效。

复现代码对比 #

粘贴入编辑器的原始代码：

<div class="bxslider">
  <li><img style="border-radius: 0;" src="pics/slider/Image1.jpg" /></li>
  <li><img style="border-radius: 0;" src="pics/slider/Image2.jpg" /></li>
  <li><img style="border-radius: 0;" src="pics/slider/Image3.jpg" /></li>
  <li><img style="border-radius: 0;" src="pics/slider/Image4.jpg" /></li>
</div>

编辑器自动篡改后输出的异常代码：

<div class="bxslider">
  <ul>
    <li><img style="border-radius: 0;" src="pics/slider/Image1.jpg" /></li>
    <li><img style="border-radius: 0;" src="pics/slider/Image2.jpg" /></li>
    <li><img style="border-radius: 0;" src="pics/slider/Image3.jpg" /></li>
    <li><img style="border-radius: 0;" src="pics/slider/Image4.jpg" /></li>
  </ul>
</div>

解决方法 #

两种方案二选一即可，优先选择第二种，长期兼容性更稳定：

• 方案1：修改编辑器初始化配置，放开嵌套限制、关闭列表自动修复
  在TinyMCE初始化参数中新增如下配置，跳过对应规则校验，即可保留原始代码结构：

  tinymce.init({
    // 替换为实际绑定的编辑器选择器
    selector: '#editor',
    // 关闭列表元素自动修复逻辑，禁止自动补全缺失的父级列表标签
    fix_list_elements: false,
    // 将div下直接嵌套li标记为合法结构，不触发净化
    valid_children: '+div[li]',
    // 保留li标签上所有属性，避免被过滤
    extended_valid_elements: 'li[*]'
  })
  

• 方案2：适配编辑器输出规则，调整轮播逻辑
  编辑器自动插入的<ul>标签无任何额外class、行内样式，不会破坏原有DOM层级，只需要把bxslider初始化的挂载节点从.bxslider调整为.bxslider ul，同时清除ul默认的margin、padding、列表样式即可让轮播正常运行。该方案不需要修改编辑器配置，后续TinyMCE版本升级也不会因为配置项变更出现同类问题。

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