CKEditor自动嵌套双ul

Question

我为 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 和我给的 class 在那里，但是有一个额外的嵌套 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 配置中是否有某些设置可能导致此行为？

Answer 1

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

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

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

我觉得有点老套，但在找到更好的解决方案之前，我会一直使用它。

CKEditor自动嵌套双ul

CKEditor automatically nesting double ul

ckeditor

ckeditor4.x