How to keep line breaks in CKEditor WYSIWYG editor

Question

I have an HTML code as follows

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

In CSS, code has "word-wrap: pre" attribute, such that the text in the inner DIV will show two lines. I use CKEditor with DIV replacement method to edit it. However, it 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, beginning and trailing spaces and new line are stripped. So in CKEditor, although I have specified the config.contentsCss, it still shows one line because CKEditor has merge those two lines into one (I checked this in Chrome "Inspect Element" in CKEditor's iframe editor). Therefore, I see the source code or saved HTML, two lines format is not preserved because they are only one line.

I've googled and tried the CKEditor HTML writer or addRules to restrict the indent format and new line in begin/close tags, however, those seems work on HTML tags, not the document text. Is there any other methods to preserve line breaks of text?

Answer 1

I found it.

// 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');
    });
});