如何在CKEditor所见即所得编辑器中保持换行符

How to keep line breaks in CKEditor WYSIWYG editor

本文关键字：换行符 编辑器 所见即所得 CKEditor      更新时间：2023-09-26

我有一个HTML代码，如下

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

在CSS中，代码具有"word wrappe: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，两行格式没有保留，因为它们只是一行。

我已经在谷歌上搜索并尝试了CKEditor HTML编写器或addRules来限制缩进格式和开始/结束标记中的新行，然而，这些似乎适用于HTML标记，而不是文档文本。有没有其他方法可以保留文本的换行符？

我找到了。

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

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

使用<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/>标记。这是击球进入的ssame。

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

在我的特殊情况下，它是一个额外的标签univis，我需要给出类似的语义（即，不使用缩进和换行符），我们最终做的是：

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

但看起来它可能是可扩展的，也可能不是可扩展到类的。

我运行了一些Craft站点，我不想到处粘贴配置文件。对于其他仍有问题的人：只需使用密文。安装并更换字段类型。每件事都纠正一次，你就完了。

您也可以简单地使用javascript替换函数

.replace( /'n/g, '</p><p>' )
相关文章：