Question

我为CKEditor 4编写了一个使用小部件和对话框的插件。我的小部件简化了一点，由一个div和一个嵌套的ul以及多个li组成。由于某些原因，当我从所见即所得模式切换到源代码模式时，ul变成了双重嵌套的ul。

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

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

<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'
  },
}

我还允许ul可以通过常规CKEditor实例进行编辑，如下所示：

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

在CKEditor配置中是否存在一些可能导致此行为的设置？

Answer 1

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

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

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

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

CKEditor自动嵌套双UL

1 个答案: