Opened 7 years ago

Closed 5 years ago

#9409 closed Bug (fixed)

Create an editor on a detached element of the dom

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

Description

Hi, I want to create a ckeditor on an element currently detached from the DOM. The first created editor works fine, but subsequent creations fail with the error "p is null" in Firefox and "Cannot call method 'setHtml' of null" in Chrome.

I attached a test case that is a file from the samples that I've modified. There is 2 other test cases commented out.

Attachments (3)

ajax.html (3.6 KB) - added by Maxime 7 years ago.
3 tests cases in comments
ajax2.html (3.9 KB) - added by Jakub Ś 7 years ago.
ajax3.html (4.0 KB) - added by Maxime 7 years ago.
working example

Download all attachments as: .zip

Change History (7)

Changed 7 years ago by Maxime

Attachment: ajax.html added

3 tests cases in comments

Changed 7 years ago by Jakub Ś

Attachment: ajax2.html added

comment:1 Changed 7 years ago by Jakub Ś

Keywords: append dom removed
Status: newconfirmed
Version: 3.6.4

I don't think that editor was ever designed to attach itself to not existing DOM element.
I'm not sure why this is happening the first time. This is something we have never tried before and need to investigate thus I will confirm the ticket.

@vizath perhaps you could help us and tell why do you need to create CKEditor in detached DOM node while you can load editor in invisible div and show it once the loading has finished (Please see the attached showing how it can be done).
What is your use case? Is this just an experiment or you didn't know the disply:none method and come up with such solution or there is situation in which only such solution works?

comment:2 Changed 7 years ago by Maxime

I'm working on an ajax-driven web application. Each page is defined by widget definitions, then the widgets are created/rendered by javascript.
The current limitation is that the widget has a parent to be rendered in, which is not yet appended to the dom, mainly to prevent DOM reflows, as there can be a lot of widgets.
On page change (loaded by ajax), the widget can be destroyed and created again later on another page (remove the editor and recreate it, like in the test case).

Changed 7 years ago by Maxime

Attachment: ajax3.html added

working example

comment:3 Changed 7 years ago by Maxime

In ajax3.html, I've bypassed the limitation by appending the editor to the body in a hidden div, then append it to the element I needed. This is not perfect, but it will do the job.

    var container = $("<div></div>").hide().appendTo($("body"));
    editor = CKEDITOR.appendTo( container.get(0), {} );
    $("#editorContainer").append(container.show());

comment:4 Changed 5 years ago by Jakub Ś

Resolution: fixed
Status: confirmedclosed

I haven't been able to reproduce this issue anymore in CKEditor 4.3.1 and Firefox 28 or Chrome 32. I'm closing it as fixed because I think it has expired on master.

@vizath if you are still able to reproduce this problem please let me know.

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