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

CKEditor custom styles dropdown with preview but no inlining

本文关键字：CKEditor 样式 下拉列表 自定义      更新时间：2023-09-26

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

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

我开始为我的样式标签提供一个 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)
相关文章：