8

I have an HTML code as follows

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

In CSS, code has "word-wrap: pre" attribute, such that the text in the inner DIV will show two lines. I use CKEditor with DIV replacement method to edit it. However, it becomes

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

The text inside the HTML tag will become one line long, beginning and trailing spaces and new line are stripped. So in CKEditor, although I have specified the config.contentsCss, it still shows one line because CKEditor has merge those two lines into one (I checked this in Chrome "Inspect Element" in CKEditor's iframe editor). Therefore, I see the source code or saved HTML, two lines format is not preserved because they are only one line.

I've googled and tried the CKEditor HTML writer or addRules to restrict the indent format and new line in begin/close tags, however, those seems work on HTML tags, not the document text. Is there any other methods to preserve line breaks of text?

4

5 回答 5

4

我找到了。

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

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

于 2016-03-20T20:52:27.907 回答
1 
$(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');
    });
});
于 2014-10-31T14:16:01.230 回答
1

使用<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/>在两行之间放置一个标签。它与按 Enter 相同。

于 2014-10-31T14:19:34.897 回答
0

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

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

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

于 2014-11-03T07:02:01.120 回答
0

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

于 2018-10-28T14:54:50.940 回答