如何在CKEditor WYSIWYG编辑器中保持换行符

Question

我有一个HTML代码如下

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

在CSS中,代码具有"word-wrap:pre"属性,这样内部DIV中的文本将显示两行.我使用CKEditor和DIV替换方法来编辑它.然而,它变成了

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

HTML标记内的文本将变为一行,开始和尾随空格和新行被剥离.所以在CKEditor中,虽然我已经指定了config.contentsCss,但它仍然显示一行,因为CKEditor已将这两行合并为一行(我在CKEditor的iframe编辑器中的Chrome"Inspect Element"中检查了这一行).因此,我看到源代码或保存的HTML,不保留两行格式,因为它们只有一行.

我用Google搜索并尝试使用CKEditor HTML编写器或addRules来限制缩进格式和开始/关闭标记中的新行,但是,这些似乎适用于HTML标记,而不是文档文本.有没有其他方法来保留文本的换行符？

Answer 1

我找到了。

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