如何在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網站，我不想在任何地方粘貼配置文件。 對於仍然遇到問題的其他人：只需使用編輯器。 安裝並替換字段類型。 糾正一切，你就完成了。