javascript - 带有预览但无内联的CKEditor自定义样式下拉列表

使用CKEditor 4和自定义样式功能。我的工作非常好，但是确实让我感到困扰。似乎如果要在下拉菜单中预览样式，则CKEDITOR.stylesSet对象需要具有styles属性。喜欢：

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

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

CKEditor能够加载自定义样式并将其归为css类的原因是，您可以修改样式，然后具有该css类的所有内容都会自动更新。但是，当它也应用内联样式时，更改自定义样式无效，因为现在自定义样式新样式已被内联样式覆盖（为什么会变得冗长）。

我在问是否有人想在下拉列表中预览其样式（自定义样式已应用于list元素），并且不希望这些样式内嵌在页面内容中—您只希望css类被应用。你是怎么做到的？

我认为这与iframe中的下拉列表有关（因此不会将父窗口中的css传递到该窗口中），因为样式的给定css类在样式选项上，但是样式不是' t应用。这就是为什么如果将样式内联在样式选项上，则该选项将采用样式。

最佳答案

我最终找到了一个（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)