ckEditor and line breaks

Question

Here's something about line breaks I don't understand. I've recently upgraded from Redactor to ckEditor on a project that accepts public submissions to a job board. These jobs are almost always copy/pasted into a front-end form by office admins.

With Redactor, the text would come into the entry looking well-formatted with line breaks but when I displayed it on the page I had to do so with {{fieldValue|nl2br}} or the text would be one large block.

With ckEditor the text comes into the entry as one large block-- no line breaks or indentations. It displays fine with the same {{fieldValue|nl2br}} method. The problem is, if I edit the text in the backend at all and resave, all the newlines are stripped and I get a big block of text.

I'm not sure what I'm not understanding or even what question to ask other than: why? Can someone help me understand what is going on and what might be a more manageable approach?

Answer 1

Redactor uses newline \n for line breaks, resulting in needing to use the |nl2br filter to have them render as <br/>

https://twig.symfony.com/doc/3.x/filters/nl2br.html

CKEditor does not use \n for linebreaks and won't preserve any. Once you save or interact with the CKEditor it'll get stripped. As you type in the editor hitting enter will create a new <p> element. Holding shift while hitting enter will do a "soft break" using <br/>

Basic Info: https://ckeditor.com/docs/ckeditor5/latest/features/index.html#why-does-the-editor-filter-out-content-styles-classes-elements

A Really, Reallllly, deep dive: https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/editing-engine.html

Other noteworthy behaviour:

• CKEditor 5 always moves line breaks (<br> elements) outside inline elements
• CKEditor does not preserve newlines, they are stripped from source.
• CKEditor 5 always creates a new paragraph (<p> element) as specified by Editor Recommendations - Enter key.

Making Life Slightly Easier:

• Use Craft's conversion command to go from redactor -> CKEditor https://github.com/craftcms/ckeditor?tab=readme-ov-file#converting-redactor-fields

You'll need to either edit how the job board does newlines (if you built it) to use <br>, or you'll need to do some data cleanup to replace \n with <br/> during import, before saving to the field. The reason they import 'OK' is that CKEditor does its commands and cleanup on interaction (Redactor worked the same way actually) so when you're saving content straight into the database it bypasses that behaviour. You then encounter it when you interact with the editor.

Remember - both Redactor and CKEditor are the richtext interface and have little to do with the data that's in the database. They interact with it before save.