Answers.Body: <p>Redactor uses newline <code>\n</code> for line breaks, resulting in needing to use the <code>|nl2br</code> filter to have them render as <code>&lt;br/&gt;</code></p>
  <p><a href="https://twig.symfony.com/doc/3.x/filters/nl2br.html" rel="nofollow noreferrer">https://twig.symfony.com/doc/3.x/filters/nl2br.html</a></p>
  <p>CKEditor does not use <code>\n</code> 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 <code>&lt;p&gt;</code> element. Holding shift while hitting enter will do a &quot;soft break&quot; using <code>&lt;br/&gt;</code></p>
  <p><em>Basic Info:</em> <a href="https://ckeditor.com/docs/ckeditor5/latest/features/index.html#why-does-the-editor-filter-out-content-styles-classes-elements" rel="nofollow noreferrer">https://ckeditor.com/docs/ckeditor5/latest/features/index.html#why-does-the-editor-filter-out-content-styles-classes-elements</a></p>
  <p><em>A Really, Reallllly, deep dive:</em>
  <a href="https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/editing-engine.html" rel="nofollow noreferrer">https://ckeditor.com/docs/ckeditor5/latest/framework/architecture/editing-engine.html</a></p>
  <p>Other noteworthy behaviour:</p>
  <ul>
  <li>CKEditor 5 always moves line breaks (<code>&lt;br&gt;</code> elements) outside inline elements</li>
  <li>CKEditor does not preserve newlines, they are stripped from source.</li>
  <li>CKEditor 5 always creates a new paragraph (<code>&lt;p&gt;</code> element) as specified by <a href="http://ckeditor.github.io/editor-recommendations/usability/enter-key.html" rel="nofollow noreferrer">Editor Recommendations - Enter key</a>.</li>
  </ul>
  <p><strong>Making Life Slightly Easier:</strong></p>
  <ul>
  <li>Use Craft's conversion command to go from redactor -&gt; CKEditor
  <a href="https://github.com/craftcms/ckeditor?tab=readme-ov-file#converting-redactor-fields" rel="nofollow noreferrer">https://github.com/craftcms/ckeditor?tab=readme-ov-file#converting-redactor-fields</a></li>
  </ul>
  <p>You'll need to either edit how the job board does newlines (if you built it) to use <code>&lt;br&gt;</code>, or you'll need to do some data cleanup to replace <code>\n</code> with <code>&lt;br/&gt;</code> 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.</p>
  <p>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.</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-04-26T21:11:14.493Z
Answers.Text: Thank you, this is great information and a good resource for others. It sounds like converting them on initial save from the form makes the most sense.
Answers.UserDisplayName: Mosswalker
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2024-04-26T03:44:47.850Z
Answers.LastActivityDate: 2024-04-26T03:53:53.570Z
Answers.LastEditDate: 2024-04-26T03:53:53.570Z
Answers.UserDisplayName: cherrykoda
Body: <p>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.</p>
  <p>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.</p>
  <p>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.</p>
  <p>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?</p>
  
Tags: <templating><richtext><ckeditor5>
Title: ckEditor and line breaks
ThreadText: # ckEditor and line breaks
  
  (Asked by: username_0 on 2024-04-23)
  
  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?
  
  **Tags:** templating, richtext, ckeditor5
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2024-04-26. Score: 3 | Accepted answer
  
  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](http://ckeditor.github.io/editor-recommendations/usability/enter-key.html).
  
  **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.
  
  > **Comments:**
  > **username_0**: Thank you, this is great information and a good resource for others. It sounds like converting them on initial save from the form makes the most sense.  
  
  ---
  
  