CKEditor 自动嵌套双ul答案

【问题标题】：CKEditor automatically nesting double ulCKEditor 自动嵌套双ul
【发布时间】：2019-05-07 10:35:44
【问题描述】：

我为 CKEditor 4 编写了一个使用小部件和对话框的插件。我的小部件，稍微简化一下，由一个div 和一个嵌套的ul 和一些li 组成。由于某种原因，当我从 WYSIWYG 模式切换到 SOURCE 模式时，ul 变成了双重嵌套的ul。

我已经定义了小部件中的哪些元素应该是可编辑的，并且我已经定义了哪些元素应该允许这些可编辑的内容。

我在所见即所得模式下（对话框关闭并创建小部件后）的原始结构是这样的：

<div class="mycustombox">
  <div class="conditions-box">
    <div class="conditions-services">
      <span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
      <ul class="services-list">
        <li>an example list item</li>
        <li>another example list item</li>
      </ul>
    </div>
  </div>
</div>

通过在 Chrome 开发者控制台中检查页面的源代码，我再次确认这是实际的 html。但是当我切换到 SOURCE 模式时，结构就变成了：

<div class="mycustombox">
  <div class="conditions-box">
    <div class="conditions-services">
      <span class="rwd-line-title">TITLE FOR THE UNORDERED LIST</span>
      <ul class="services-list">
        <ul>
          <li>an example list item</li>
          <li>another example list item</li>
        </ul>
      </ul>
    </div>
  </div>
</div>

原来的ul 和我给它的类在那里，但是有一个额外的嵌套ul 包装li 元素。

我在 plugin.js 中定义了我允许的小部件内容：

allowedContent: 'div(!mycustombox); div(!conditions-box); div(!conditions-services); span(!rwd-line); span(!rwd-line-title); ul(!services-list); li; p; div',
requiredContent: 'div(mycustombox)',
upcast: function( element ) {
    return element.name == 'div' && element.hasClass( 'mycustombox' );
},

我已经将 ul 元素定义为可编辑的元素，如下所示：

editables: {
  priceincludes: {
    selector: 'div.conditions-box div.conditions-services ul',
    allowedContent: 'li em strong'
  },
}

我还允许通用 CKEditor 实例可以编辑 ul，如下所示：

CKEDITOR.dtd.$editable[ 'ul' ] = 1;

CKEditor 配置中是否有某些设置可能导致此行为？

【问题讨论】：

标签： ckeditor ckeditor4.x

【解决方案1】：

好吧，我不知道这是否是最好的解决方案，但它确实有效。告诉 CKEEditor 停止尝试使用 ul 标签自动包装 li 元素。出于某种原因，它将它们视为尚未包装在ul 标签中。在我的 plugin.js 开头使用它可以解决问题：

    delete CKEDITOR.dtd.$listItem['li'];
    delete CKEDITOR.dtd.$intermediate['li'];

我从这里得到了这个想法： http://margotskapacs.com/2014/11/ckeditor-stop-altering-elements/

对我来说似乎有点 hackish，但在我找到更好的解决方案之前，我会使用它。

【讨论】：