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

Question

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

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

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

CKEditor 提供加载自定义样式并将它们归因于 css class 的能力的原因是您可以修改样式，然后修改任何带有该样式的内容 css class 将自动更新。但是，当它还应用内联样式时，更改自定义样式没有任何效果，因为现在自定义样式新样式被内联样式覆盖（哇，越来越罗嗦）。

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

我认为这与 iframe 中的下拉列表有关（因此来自父 window 的 css 未传送到那个），因为给定的 css class 因为样式在样式选项上，但未应用样式。这就是为什么如果样式在样式选项中内联，则该选项采用样式。

Answer 1

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

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

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

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 自定义样式下拉列表

CKEditor custom styles dropdown with preview but no inlining

javascript

css

iframe

ckeditor