CKEditor custom styles dropdown with preview but no inlining

Question

Using CKEditor 4 and the custom styles feature. I've got it working great but something is really bothering me. It seems like if you want a preview of the style in the dropdown, your CKEDITOR.stylesSet objects need to have the styles property. Like:

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

What I really want is just to add the class that's in attributes to the page element you have highlighted when you select a style. But when you apply a style to your content it adds the class and inlines whatever you have listed in styles, which kind of makes this whole feature pointless.

The reason CKEditor offers the ability to load custom styles and attribute them to a css class is so you can modify the style and then anything with that css class will be updated automagically. However, when it also applies the inline styling changing the custom style has no effect because now the custom styles new styles are overridden by the inline ones (whew, getting wordy).

I'm asking if anyone has ever wanted to have their styles previewed in the dropdown (the custom style is applied to the list element) and didn't want those styles to be inlined on the page content — you only want the css class to be applied. How did you do it?

I think that it has to do with the dropdown being in an iframe (so the css from the parent window isn't carried to that one), because the given css class for the style is on the style option, but the styles aren't applied. Which is why if the styles are inlined on the style option, the option takes the styling.

Luke Luke · Accepted Answer · 2016-05-23T17:30:25

I eventually found a (hacky) solution for this so I thought I'd post it if anyone was curious.

I started out giving an id to my style tag that held my custom style definitions.
<style id="_custom_styles">...</style>

Then when an instance of CKEditor was ready I listened for clicks on the styles dropdown then grabbed the style element and copied it into the styles dropdown so the list elements could be styled by their given 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 custom styles dropdown with preview but no inlining

1 Answers