Coming to grips with Backdrop and have switched to using the CKE5 editor from CKE4. I'd still like the option of adding colour to my text via the editor - for example I like to make my * red so they stand out.
What is the situation regarding CKE5 in Backdrop - I have a feeling its part of the core, but is it as simple as downloading the relevant extension from CKE5 or is it trickier because the editor is in core?
Hi ian,
I belief, the easiest way to achieve that is via styles.
There's a "styles" dropdown button for the toolbar. And as soon as that button is part of the active toolbar, you get a textarea to add your styles.
Go to admin/config/content/formats/filtered_html and drag the "Styles" item up to the "Active toolbar".
Below, in the vertical tabs there's now a "Style list" textarea. Drop in (for example) span.red-text|Red text and save.
Then, when you open a node form with editor, you'll find the dropdown, which now contains "Red text".
What's still missing then, is the actual style. Ideally in a custom theme, but you can also use the CSS Injector module for that.
span.red-text {
color: red;
}
That should do the trick.
took me a while to work out where the relevant css was put, but once I had tthis in play the solution works. I seemed to need to put the css in two locations - my local.css file in my sub-theme and in the ckeditor5.css in the ckeditor5 module's css sub-directory. Initially this was not clear to me from the documentation I was reading. :D
I seemed to need to put the css in two locations - my local.css file in my sub-theme and in the ckeditor5.css in the ckeditor5 module's css sub-directory.
The latter will be gone with the next update, as that file belongs to the core module.
Instead, add one line to your own theme's (not core, not base theme) .info file:
ckeditor5_stylesheets[] = css/local.css
However, this might not fully work as expected, as the editor (as of its version 5) runs inside the document you're currently in - no longer in its own iframe. So there might be conflicts with the theme, you chose for content editing on admin/appearance (maybe the admin theme).
To overcome that, you could alternatively use the frontend theme (your own theme) for content editing - then the theme's CSS is applied out of the box, without any additional steps (like the one with the .info file).
Hi ian,
I belief, the easiest way to achieve that is via styles.
There's a "styles" dropdown button for the toolbar. And as soon as that button is part of the active toolbar, you get a textarea to add your styles.
Go to admin/config/content/formats/filtered_html and drag the "Styles" item up to the "Active toolbar".
Below, in the vertical tabs there's now a "Style list" textarea. Drop in (for example)
span.red-text|Red textand save.Then, when you open a node form with editor, you'll find the dropdown, which now contains "Red text".
What's still missing then, is the actual style. Ideally in a custom theme, but you can also use the CSS Injector module for that.
span.red-text {color: red;}That should do the trick.