如何在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');
    });
});

Answer 3

使用<pre> HTML标记。 像这样：

 <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> 

或者你可以把<br/>标签在你的字里行间。 它击中了芝麻。

Answer 4

在我的特定情况下，它是一个额外的标记， univis ，我需要给出类似的语义（即，单独留下缩进和inebreaks），我们最终做的是：

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

但看起来它可能会或可能不会扩展到类。

Answer 5

我运行了一些Craft网站，我不想在任何地方粘贴配置文件。 对于仍然遇到问题的其他人：只需使用编辑器。 安装并替换字段类型。 纠正一切，你就完成了。