Search code examples
javascripthtmlckeditor

how to use a defined class in ckeditor?

CKEditor 4.6.0

I would like to use CKEditor, here is the CodePen where I show the code

https://codepen.io/anon/pen/RQBMzp

In my code, I have defined allowedContent to true and extraAllowedContent.

I have defined a style for the 'CreateDiv' button (but I don't know why we can't see the CreateDiv button).

So, I have simulated a div with a class in the CKEditor, just read the code.

Why the class is not used? if I try with a style tag, there is no issue

Thank you

Solution

  • CKEditor creates an iframe, so your CSS is not used since it is applied in the host page (it would work however if you were using Div Editing Area add-on, which uses div instead of iframe). Use one of the following solutions:

    • Edit contents.css in CKEditor folder and insert your CSS rules (it is overwritten however on CKEditor update).

    • Create another CSS file, let's say mystyles.css, insert your CSS rules and in config.js insert:

      config.contentsCss = [CKEDITOR.getUrl('contents.css'), CKEDITOR.getUrl('mystyles.css')];

    • For a quick solution, insert the following line before your CKEditor.replace command to be applied for a specific page:

      CKEDITOR.addCss('.collapse { background-color: tan; }');

    See here: https://codepen.io/anon/pen/NyBzaq