3

編集不可能なプレースホルダーを挿入したい ckeditor を使用しています。ドキュメントによると、目的の要素に属性 ( contenteditable="false") を設定して、編集不可にすることができます。

Firefox ではこれは正常に機能しており、属性は にアタッチされてspanいますが、Chrome では属性がスキップされます。

次のコードを含むテストケースがあります。

HTML

<textarea id="testeditor"><p>testeditor content</p></textarea>
<button id="addPlaceholder">add placeholder</button>

Javascript

$(function() {
  $('#testeditor').ckeditor();
  $('#addPlaceholder').click(function() {
    var editor = $('#testeditor').ckeditorGet();
    editor.insertHtml('<span class="placeholder" contenteditable="false">placeholder</span>');
  });
});

編集

contenteditable要素を DOM に挿入するときに属性がアタッチされているかどうかを確認する別のテストを行いました。これは Chrome で問題なく動作します。

Javascript

$('body').append('<span contenteditable="false">placeholder</span>');
4

2 に答える 2

4

メソッドの代替をグーグルで検索したときに答えが見つかりましたinsertHtml。メソッドも使えるようですinsertElement。contenteditableだから私は試してみましたが、それは属性をスキップしません。

新しいコード:

$(function() {
  $('#testeditor').ckeditor();
  $('#addPlaceholder').click(function() {
    var editor = $('#testeditor').ckeditorGet();
    editor.insertElement( CKEDITOR.dom.element.createFromHtml( '<span class="placeholder" contenteditable="false">placeholder</span>' ));
  });
});
于 2012-11-08T10:55:51.647 に答える
1

もう 1 つのオプションは、オプションのモード パラメータを「unfiltered_html」に設定することです。

$(function() {
  $('#testeditor').ckeditor();
  $('#addPlaceholder').click(function() {
    var editor = $('#testeditor').ckeditorGet();
    editor.insertHtml('<span class="foo">placeholder</span>', "unfiltered_html");
  });
});

参照: http://docs.ckeditor.com/#!/api/CKEDITOR.editor-method-insertHtml

于 2014-04-25T20:30:12.203 に答える