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

wdebmtf2 于 2023-06-27 发布在 Go

关注(0)|答案(6)|浏览(142)

我有一个HTML代码如下

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

在CSS中，代码具有“自动换行：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“InspectElement”中检查了这一点）。因此，我看到的源代码或保存的HTML，两行格式是不保留的，因为他们只有一行。
我在谷歌上搜索并尝试了CKEditor HTML writer或addRules来限制开始/结束标记中的缩进格式和新行，但是，这些似乎适用于HTML标记，而不是文档文本。有没有其他方法可以保留文本的换行符？

google-chrome

来源：https://stackoverflow.com/questions/17528107/how-to-keep-line-breaks-in-ckeditor-wysiwyg-editor

6条答案

按热度按时间

omtl5h9j1#

我找到了

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

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

赞(0）回复(0）举报 2023-06-27

ehxuflar2#

使用<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/>标签。这就像打回车一样。

赞(0）回复(0）举报 2023-06-27

beq87vna3#

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

赞(0）回复(0）举报 2023-06-27

dwbf0jvd4#

在我的特定例子中，它是一个额外的标签univis，我需要给予类似的语义（即，不使用缩进和inebreak），我们最终做的是：

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

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

赞(0）回复(0）举报 2023-06-27

jogvjijk5#

我有一些工艺网站运行，我不想粘贴配置文件无处不在。对于其他仍然有问题的人：使用redactor。安装并更换字段类型。一次纠正所有问题，就大功告成了。

赞(0）回复(0）举报 2023-06-27

yh2wf1be6#

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

.replace( /\n/g, '</p><p>' )

赞(0）回复(0）举报 2023-06-27

我来回答

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

6条答案

相关问题

热门标签

最新问答