Opened 2 years ago

Last modified 2 years ago

#16780 pending Bug

selectElement and/or extractSelectedHtml work differently in Chrome and Safari

Reported by: azotova Owned by:
Priority: Normal Milestone:
Component: General Version:
Keywords: Cc:

Description

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.

  1. 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);
  1. 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?

Attachments (2)

example.html (1.2 KB) - added by azotova 2 years ago.
Html file to reproduce the issue
example2.html (1.2 KB) - added by azotova 2 years ago.
An example without custom tags

Download all attachments as: .zip

Change History (5)

comment:1 Changed 2 years ago by Jakub Ś

Status: newpending
Version: 4.6.0

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.

Changed 2 years ago by azotova

Attachment: example.html added

Html file to reproduce the issue

comment:2 in reply to:  1 Changed 2 years ago by 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.

Changed 2 years ago by azotova

Attachment: example2.html added

An example without custom tags

comment:3 in reply to:  1 Changed 2 years ago by 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.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy