8

次のようなHTMLコードがあります

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

CSS では、コードに「word-wrap: pre」属性があり、内側の DIV のテキストが 2 行で表示されます。DIV置換メソッドでCKEditorを使用して編集します。ただし、

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

HTML タグ内のテキストは 1 行になり、先頭と末尾のスペースと改行は削除されます。そのため、CKEditor では、config.contentsCss を指定しましたが、CKEditor がこれらの 2 行を 1 つにマージしたため、まだ 1 行が表示されます (CKEditor の iframe エディターの Chrome の「要素の検査」で確認しました)。そのため、ソース コードや保存した HTML を見ると、1 行しかないため 2 行形式は保持されません。

私はグーグルでCKEditor HTMLライターまたはaddRulesを試して、開始/終了タグのインデント形式と改行を制限しましたが、ドキュメントテキストではなくHTMLタグで機能するようです。テキストの改行を保持する他の方法はありますか?

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

<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でした (つまり、インデントとインブレイクはそのままにしておきます)。

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

しかし、それはクラスに拡張できる場合とできない場合があるようです。

于 2014-11-03T07:02:01.120 に答える