CODEWITHSUNDEEP
javascripthtmlgoogle-chromedomckeditor
Willem de Wit
Willem de Wit

Reputation: 8732

Chrome skips contenteditable attribute with insertHtml in ckeditor

I use a ckeditor in which I want to insert a non-editable placeholder. According to the docs you can set an attribute (contenteditable="false") to the desired element to make it non-editable.

In Firefox this is working fine, the attribute is attached on the span but in Chrome the attribute is skipped.

I have a testcase with the following code:

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

EDIT

I made another test to check if the contenteditable attributes is attached when inserting an element to the DOM. This works fine in Chrome.

Javascript

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

Upvotes: 3

Views: 2274

Answers (2)

Travis Miller
Travis Miller

Reputation: 23

Another option would be to set the optional mode parameter to "unfiltered_html":

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

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

Upvotes: 1

Willem de Wit
Willem de Wit

Reputation: 8732

I found the answer when I googled for an alternative for the insertHtml method. It seems that you can use the method insertElement also. So I tried and that doesn't skip the contenteditable attribute.

New code:

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

Upvotes: 4

Related Questions