Question

使用CKEditor 4和自定义样式功能。我的工作做得很好，但有些事情真让我困扰。看起来如果要在下拉列表中预览样式，您的CKEDITOR.stylesSet对象需要具有styles属性。喜欢：

{ name: name, element: element, attributes: { class: css_class }, styles: styles_as_json }

我真正想要的只是将attributes中的类添加到您选择样式时突出显示的页面元素中。但是当你将一种风格应用于你的内容时，它会添加类和内联你在styles中列出的内容，这使得整个功能毫无意义。

CKEditor提供加载自定义样式并将其归因于css类的原因是因为您可以修改样式，然后任何具有该css类的内容都将自动更新。但是，当它也应用内联样式时，更改自定义样式没有任何效果，因为现在自定义样式新样式被内联样式覆盖（哇，变得罗嗦）。

我问是否有人想要在下拉列表中预览他们的样式（自定义样式应用于列表元素）和并不希望这些样式在页面内容上内联 - 您只希望应用css类。你是怎么做到的？

我认为它与iframe中的下拉列表有关（因此父窗口中的css不会被带到那个窗口），因为样式的给定css类在样式选项上，但风格并未适用。这就是为什么如果在样式选项中内联样式，该选项将采用样式。

Answer 1

我最终为此找到了一个（hacky）解决方案，所以我想如果有人好奇我会发布它。

我开始给我的样式标签提供一个id，该标签包含我的自定义样式定义 <style id="_custom_styles">...</style>

然后当CKEditor的一个实例准备就绪时，我听了样式下拉列表的点击，然后抓住了样式元素并将其复制到样式下拉列表中，这样列表元素就可以通过给定的类来设置样式。

CKEDITOR.on 'instanceReady', ->
  $(".cke").on "click", ".cke_combo__styles", (e) ->
    node = document.getElementById("_custom_styles").cloneNode(true)
    $(".cke_combopanel__styles").find("iframe")[0].contentWindow.document.head.appendChild(node)

CKEditor自定义样式下拉列表，包含预览但没有内联

1 个答案: