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

Posted 2023-02-22

【中文标题】如何在 CKEditor 所见即所得编辑器中保留换行符

【英文标题】：How to keep line breaks in CKEditor WYSIWYG editor

【发布时间】：2013-07-05 20:55:54

【问题描述】：

我有一个html代码如下

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

在 CSS 中，代码具有“word-wrap:pre”属性，这样内部 DIV 中的文本将显示两行。我使用带有 DIV 替换方法的 CKEditor 来编辑它。但是，它变成了

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

HTML 标记内的文本将变成一行，开头和结尾的空格和换行被去除。所以在 CKEditor 中，虽然我指定了 config.contentsCss，但它仍然显示一行，因为 CKEditor 已将这两行合并为一行（我在 CKEditor 的 iframe 编辑器中的 Chrome“检查元素”中检查了这一点）。所以，我看源码还是保存的HTML，两行格式没有保留，因为只有一行。

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

【问题讨论】：

您需要在 CKEditor 中格式化代码吗？

不，我不希望代码被格式化，以便在 CKeditor 之前/之后保留所有空格和换行符。

那么你将不得不处理换行符（\n）和的

我不必手动处理换行符。实际上，如果 CKeditor 认为它可以去除所有开头和结尾的空格(^[ \n\r\t]*|[ \n\r\t]*$)，这意味着这些不会影响在浏览器中查看的换行符的布局。但是为什么这会影响我在问题中描述的结果，因为我有一个使用 word-wrap: pre 的 CSS 样式，而 CKeditor 不知道这一点。它会删除那些空白并使观看变得奇怪。我找到了解决方案，但是，没有配置选项可以控制它。一个非常小的 hack 是可以接受的。

@jclin 你可以通过回答你自己的问题来分享解决方案吗？

【参考方案1】：

我找到了。

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

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

【讨论】：

最初我虽然这是一个很好且简单的解决方案，但事实证明它可能会用 <!--cke_protected%A-- >.这在属性值方面不好，所以要小心。

【参考方案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');
    );
);

【讨论】：

这仅适用于paste 事件。如果有人需要在源代码模式下输入多行并保持换行符怎么办？

由于 CKEditor 构建/保留了 HTML 的树模型，因此可能无法保留它。无论如何，它们允许自定义显示：sdk.ckeditor.com/samples/htmlformatting.html

【参考方案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/> 标签。和回车一样。

【参考方案4】：

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

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

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

【讨论】：

将这些行添加到 CKEditor 时会做什么？你是什​​么意思，在你的情况下，“它”是一个额外的标签？当您说“它是提供相似语义的额外标签”时，“它”指的是什么？你的意思是“功能”而不是“语义”这个词 - 即如果你的句子被重写 - 意思是：“在我的情况下，为了获得所需的功能（即单独留下换行符），我们最终这样做了： "

我们试过这个，它似乎对换行没有影响，因为我们在查看源代码和查看 CKEditor 中呈现的 HTML 之间来回切换。

【参考方案5】：

我有一些 Craft 网站正在运行，我不想将配置文件粘贴到任何地方。对于其他仍然有问题的人：只需使用 redactor。安装和更换字段类型。将所有内容更正一次即可完成。