Ticket #3368 (confirmed Bug)

Opened 5 years ago

Last modified 4 years ago

Strange behavior when placed inside dynamically-created elements

Reported by: pferreir Owned by:
Priority: Normal Milestone:
Component: General Version: SVN (CKEditor) - OLD
Keywords: Cc: jose.pedro.ferreira@…

Description

The following code:

     var div = document.createElement('div');
     var div2 = document.createElement('div');

     var editor = CKEDITOR.appendTo( div );
      document.getElementById('tests').appendChild(div);

      var button = document.createElement('button');
      button.innerHTML = 'click me';
      button.onclick = function(){
             editor.destroy();
             editor = CKEDITOR.appendTo( div2 );
             document.getElementById('tests').appendChild(div2);
      };

      document.getElementById('buttons').appendChild(button);

Fails with:

holderElement is null

as soon as one clicks the button. I noticed this since I'm using CKeditor to implement some kind of "click & edit" rich text field, and I'm creating the containing div dynamically, each time the user clicks the field.

I could solve this by re-using the same div each time the field switches to edit mode, but that would be hacky, and I don't think CKeditor should fail here (correct me if I'm wrong, please).

Regards,

Pedro

Attachments

3368.html (901 bytes) - added by arczi 5 years ago.

Change History

Changed 5 years ago by arczi

comment:1 Changed 5 years ago by arczi

  • Keywords Pending added

Could you try the "3368.html" example?

I have moved only one line:

document.getElementById('tests').appendChild(div2);

before:

editor = CKEDITOR.appendTo( div2 );

because DOM element must exist in DOM tree.

The following lines works because are called before "onload" event:

	var editor = CKEDITOR.appendTo( div );
	document.getElementById('tests').appendChild(div);

Anyway should be changed with

	document.getElementById('tests').appendChild(div);
	var editor = CKEDITOR.appendTo( div );

comment:2 Changed 5 years ago by pferreir

OK, "3368.html" works for me. The problem is that, in the way I'm currently doing things, I cannot switch the order of these statements. I really need to build the editor, and only then place it in the DOM tree. What didn't seem right to me was that I was able to do this at the first time, but not after the editor is loaded (seems to be the case, according to what you said). Why can't i "regenerate" the editor inside an isolated (not yet placed in the DOM tree) div, but I'm able to do so before onload is triggered? Is there any know workaround to make this work?

Thanks,

Pedro

comment:3 Changed 5 years ago by fredck

  • Keywords Confirmed added; Pending removed
  • Milestone changed from CKEditor 3.0 to CKEditor 3.x

For now, we'll make it a requirement to have to have the element in the document DOM before appendTo(). We may investigate if it's possible to workaround it.

comment:4 Changed 5 years ago by pferreir

Please :). That would be great.

comment:5 Changed 5 years ago by pferreir

Any news on this? I'll have to either find a workaround for this, or just use 2.xx :(.

comment:6 Changed 5 years ago by fredck

We're not supposed to have any change on this that soon. For now you must really append the editor into a DOM element that's already in the document.

comment:7 Changed 5 years ago by pferreir

Hello. Now that 3.0 is out, I wonder if there's any developments regarding this matter.

Thanks!

comment:8 Changed 4 years ago by fredck

  • Milestone CKEditor 3.x deleted

Milestone CKEditor 3.x deleted

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