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标记。像这样：

＆＃13;

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

＆＃13;

或者您可以在行之间添加<br/>标记。它就像进入的那样芝麻。

Answer 4

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

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

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

Answer 5

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

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

5 个答案: