How to save line breaks in the CKEditor WYSIWYG editor

Question

I have HTML code as follows

<div class="editable" ...> <div class="code"> This is an example. This is a new line </div> </div> 

In CSS, the code has the attribute "word-wrap: pre", so the text in the inner DIV will show two lines. I am using CKEditor with the DIV replacement method to edit it. However he becomes

  <div class="code"> This is an example.This is a new line </div> 

The text inside the HTML tag will become one line long, the beginning and end of spaces, and the new line will be stripped. Therefore, in CKEditor, although I specified config.contentsCss, it still shows one line, because CKEditor concatenates the two lines into one (I checked this in Chrome's “Inspect Element” in the CKEditor iframe editor). Therefore, I see the source code or saved HTML, the format of two lines is not saved, because it is only one line.

I googled and tried the CKEditor HTML writer or addRules to limit the indentation format and the new line in the start and close tags, however they seem to work with HTML tags, not the document text. Are there any other ways to keep line breaks in the text?

Answer 1

I found him.

 // preserve newlines in source config.protectedSource.push( /\n/g ); 

http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-protectedSource

Answer 2

 $(document).on('paste', 'textarea', function (e) { $(e.target).keyup(function (e) { var inputText = $(e.target).val(); $(e.target).val(inputText.replace(/\n/g, '<br />')) .unbind('keyup'); }); }); 

Answer 3

Use the HTML <pre> tag. Like this:

 <div class="editable" ...> <div class="code"><pre> This is an example in a "pre". This is a new line </pre></div> </div> <div class="editable" ...> <div class="code"> This is an example NOT in a "pre". Therefore this is NOT a new line </div> </div> 

Or you can put a <br/> tag between your lines. It is administered as a hit.

Answer 4

In my particular case, it was an additional univis tag, which I needed to give similar semantics (i.e. leave indentation and inebreaks alone), and as a result we ended up:

  CKEDITOR.dtd.$block.univis=1; CKEDITOR.dtd.$cdata.univis=1; CKEDITOR.dtd.univis=CKEDITOR.dtd.script; 

But it looks like it may or may not be extensible for classes.