CKEditor: how to apply classes (instead of inline styles) to content

2
votes

For CKeditor, is there a way to have it apply a class name instead of a style? So instead of doing:

<span style="color: #ffffff;">Text</span>

It would do:

<span class="white">Text</span>

Simplified to make more sense, but except for the typical bold/italics/underline, we need to be able to use variables in a SCSS sheet for consistency and multiple clients. This would not be something picked from a custom style list - it needs to be automatic when people click on existing toolbar options. Has anyone managed something like this?

1
cssclassckeditor
Just check this tutorial, should be simple. – skobaljic
@skobaljic Thank you, but as I said to the answer below, I don't want to make people pick a style from a list, I would like it to be automatic when people click to the toolbar options. I am updating my original question to try and clarify. – Hitokage
You would have to create your own tools I think, or edit existing one. Each tool is an addon in separate folder (look at not-compressed source files of CKEditor) - it is easy to find files and to edit them, those programmers are good. – skobaljic
Hey! Have You found a solution? – Tadeusz Majkowski

1 Answers

0
votes

Try to put this code in your config.js file:

    config.stylesSet = [
    { name: 'CSS White', element: 'span', attributes: { 'class': 'white' } }
]

It will show you a 'CSS White' option in the style select field of your ceditor.