selectElement and/or extractSelectedHtml work differently in Chrome and Safari

[azotova]

Steps to reproduce

1. I have the following html:

    <p>Some text...</p>
    <question>
      <answer>
         More text ...
      </answer>
    </question>
   

I am trying to replace the <question> element with another html string.

2. My code:

editor.getSelection().selectElement(element);
// here element is an instance of CKEDITOR.dom.element.
// Its nodeName property is 'QUESTION' in all browsers

editor.extractSelectedHtml();
editor.insertHtml(myString);

3. This works fine in Chrome and Firefox but doesn't work in Safari.

In Safari I get the following error when running extractSelectedHtml: TypeError: undefined is not an object (evaluating 'a.startContainer.getDtd()'). The inner html of the <question> element gets deleted, but the <question> tag itself stays.

I tried to check what editor.getSelectedHtml method returns in Chrome and Safari. In Chrome it returns CKEditor.dom.documentFragment with question as firstChild, and in Safari it returns CKEditor.dom.documentFragment with answer (inner node) as firstChild.

Expected result

I would expect my code snippet to produce the same result in all browsers.

Is this working as intended? Is there any workaround for this issue in Safari?

[Jakub Ś]

CKEditor doesn't support custom tags by default.

To support inline custom tags - you should modify DTD and ACF (​here is the example).

As for block-level tags, they are not supported and we have this issue reported here #10340. Could you please provide ready to use reduced html file which shows the problem? I'm sure CKEditor not supporting block-level custom tags is one problem but I would like to see if there is any extra to it.

NOTE: I would recommend using standard HTML tags with data-* attributes. This IMO is much nicer solution and will definitely work without problems.

[azotova]

Html file to reproduce the issue

[azotova]

Replying to j.swiderski:

Thanks a lot for looking into this! I've added the example.html file as the attachment.

Steps to reproduce: 1) Open the file with Chrome and click 'Replace question' button. The 'question' element gets replaced with another element. 2) Open the file with Safari and click the same button. The question tag stays and there is an error in browser console.

The error happens in fixUneditableRangePosition method: fixUneditableRangePosition:function(a){a.startContainer.getDtd()["#"] || ... . In Chrome and in Safari a.startContainer evaluates to different objects. In Chrome it's the div#editor1, and in Safari it's the question. This is why .getDtd() produces different results in the two browsers.

CKEditor doesn't support custom tags by default.

To support inline custom tags - you should modify DTD and ACF (​here is the example).

As for block-level tags, they are not supported and we have this issue reported here #10340. Could you please provide ready to use reduced html file which shows the problem? I'm sure CKEditor not supporting block-level custom tags is one problem but I would like to see if there is any extra to it.

NOTE: I would recommend using standard HTML tags with data-* attributes. This IMO is much nicer solution and will definitely work without problems.

[azotova]

An example without custom tags

[azotova]

Replying to j.swiderski:

In addition to the first example, I've attached another file 'example2.html'. In this file, I replaced all custom tags with <div> and <p>.

Now I don't get the error in Safari - it looks like it was indeed caused by the custom tag (as far as I understand, .getDtd() returns undefined for custom elements, and this doesn't depend on the browser).

However, the behavior in Chrome and Safari is still different. In Chrome, the <div class="question"> gets fully replaced (this is what I wanted to achieve with this code snippet). In Safari, only the inner html of <div class="question"> gets replaced.

CKEditor doesn't support custom tags by default.

To support inline custom tags - you should modify DTD and ACF (​here is the example).

As for block-level tags, they are not supported and we have this issue reported here #10340. Could you please provide ready to use reduced html file which shows the problem? I'm sure CKEditor not supporting block-level custom tags is one problem but I would like to see if there is any extra to it.

NOTE: I would recommend using standard HTML tags with data-* attributes. This IMO is much nicer solution and will definitely work without problems.