robertgarrigos's picture

I would like to add custom styles to ckeditor. There is a button for that, but cannot get my styles listed. I managed to add the js with the new styles, with backdrop_add_js() function (instructions here: https://ckeditor.com/docs/ckeditor4/latest/features/styles.html).

But then I need to add those styles to the config file of ckeditor, as stated here: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_configuration.html#.... I'm unable to do this last step. Any ideas?

Thanks.

Accepted answer

Robert, when you add the Styles dropdown to the editor, it should also reveal a new textarea field in the UI:

With this, you can specify the classes and labels for the Styles dropdown:

A list of classes that will be provided in the "Styles" dropdown. Enter one class on each line in the format: element.class|Label. Example: h1.title|Title.
Each style should be in your theme's main CSS as well as in your theme's ckeditor-iframe.css file.

Most helpful answers

Robert, are you using a custom theme or sub-theme? If so be sure to add

ckeditor_stylesheets[] = css/ckeditor-iframe.css

to the .info file of the theme. See the documentation for this in this page

Comments

Robert, when you add the Styles dropdown to the editor, it should also reveal a new textarea field in the UI:

With this, you can specify the classes and labels for the Styles dropdown:

A list of classes that will be provided in the "Styles" dropdown. Enter one class on each line in the format: element.class|Label. Example: h1.title|Title.
Each style should be in your theme's main CSS as well as in your theme's ckeditor-iframe.css file.

robertgarrigos's picture

I can't get my theme's ckeditor-iframe.css file loaded. I have it in my theme directory as well as set in the .info file, but I cannot see the style applied to the textarea.

 

Robert, are you using a custom theme or sub-theme? If so be sure to add

ckeditor_stylesheets[] = css/ckeditor-iframe.css

to the .info file of the theme. See the documentation for this in this page

robertgarrigos's picture

Thanks, Argiepiano. That was the problem. I was setting my ckeditor-iframe.css as a normal css (stylesheets[all][] =).