How to keep line breaks in CKEditor WYSIWYG editor

7
votes

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?

5
javascripthtmlgoogle-chromedomckeditor
You need the code formatted inside CKEditor? – aldux
NO, I don't want the code formatted, such that it keeps all whitespace s and line breaks before/after CKeditor. – jclin
Then you'll have to deal with line breaks (\n) and <br>'s – aldux
I don't have to deal with line breaks manually. Actually, if CKeditor think it can strip all begin and tail white-spaces (^[ \n\r\t]*|[ \n\r\t]*$), it means those does not affect the layout of line breaks viewed in the browser. But why this affect the result as I described in the problem because I have a CSS style of using word-wrap: pre, and CKeditor does not know that. It delete those white-spaces and make the viewing strange. And I find the solution, however, there is no config option to control that. It is acceptable with a very small hack. – jclin
@jclin could you share the solution by answering your own question? – Edmund Sulzanok

5 Answers

3
votes

I found it. 

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

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

1
votes
$(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');
    });
});
1
votes

Use the <pre> HTML 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 in between your lines. Its the ssame as hitting enter.

0
votes

In my particular case, it was an extra tag, univis, that I needed to give similar semantics (i.e., leave indentation and inebreaks alone), and what we ended up doing was:

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

But that looks like it might or might not be extensible to classes.

0
votes

I got some Craft sites running and I don't want to paste the config file everywhere. For everyone else still having the problem: Just use redactor. Install and replace the field type. Correct everything once and you're done.