CKEditor 自定义样式下拉列表，带有预览但没有内联答案

【问题标题】：CKEditor custom styles dropdown with preview but no inliningCKEditor 自定义样式下拉列表，带有预览但没有内联
【发布时间】：2016-04-26 19:54:41
【问题描述】：

使用 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 类位于样式选项中，但是不应用样式。这就是为什么如果样式在样式选项中内联，则该选项采用样式。

【问题讨论】：

标签： javascript css iframe ckeditor

【解决方案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)

【讨论】：