Problems with insertElement in IE7

[Wilfrid Li]

The following is my code snippet that works for every other browser (except IE7)

The IE7 I had issues with, was a genuine IE7 (from one of my testing rig), not IE8 emulating as IE7 under development mode.

The plugin I have written for CKEditor opens up a new window. After the user finished interacting with the plugin browser window and click submit, it'll automatically generate the required html and insert into the editor.

var FCK = window.opener.CKEDITOR;	        
  if (FCK != null)
  {
     var mySelection = FCK.instances.CKInstance.getSelection();
      if (FCK.env.ie) {
           mySelection.unlock(true);
           selected_html = mySelection.getNative().createRange().text;
       } else {
            selected_html = mySelection.getNative();
       }
  }

The problem is that, the above code works for IE8+ and FF, but when under IE7, 'mySelection.getNative().createRange().text' returns ""

The work around for this issue is:

The problem was that, under that specific setup, "mySelection.getNative().createRange().text" returns empty string.

I did an experiment, where I rewrote my plugin to insert the html content into an iframe within a CKEditor dialog. That particular problem went away after I changed the code to look for window.parent.CKEDITOR

However, under such setup, another problem was encountered under IE7, where it did not insert the element properly under such environment.

This is an example of the code I used to insert the html element:

   var element = FCK.dom.element.createFromHtml(html);
    FCK.instances.CKInstance.insertElement( element );		

However, under IE7, all that did was replaced the selected text with empty lines. I did further experimentation, I discovered the following method worked perfectly under IE7 and other browsers.

FCK.instances.CKInstance.insertHtml( html);	

[Jakub Ś]

I must say I'm a little confused here.

You say that you have had some problems when you were creating your plugin in your environment and you have managed to overcome them. This is all nice but what is the bug in CKEditor?

Could you describe exactly what do you think is wrong with CKEditor and provie a reproducible sample file showing those problems? When I say reproducible I mean reproducible in Plain CKEditor release not in CKEditor integrated with some Web application.

[Jakub Ś]

@wilfridli have you got any updates regarding this issue?

[Wilfrid Li]

I did not have the time to create a sample file as my job is very demanding. However, if you have a sample file you can pass my way, I can add my code to that and hopefully be able to reproduce it in IE7.

thanks

[Jakub Ś]

I'm not sure if this is what you meant but I'm attaching a sample template.

This files should be placed in sample folder of CKEditor release. Custom configurations can be added in script section.

Waiting for your comments.

[Wilfrid Li]

Hi,

I did what you said and have replicated the issue in a sample file showing the problems. I just modified ontop of a normal 3.6.1 ckeditor release.

The sample file can be found here: ​http://staging.clients.webling.com.au/Wilfrid/ckeditor_bug_8227.zip

You can run the files here: ​http://staging.clients.webling.com.au/Wilfrid/ckeditor/_samples/mytemplate.html

I have created two separate plugin, called 'testplugin' and 'testplugin_iframe' which are located in '_source/plugins/testplugin' and '_source/plugins/testplugin_iframe'

'testplugin' is the first method I tried where I have encountered the issue in IE7, where text selection cannot be obtained

'testplugin_iframe' is the second method I tried to bypass the issue with text selection in IE7

The plugin window contains a text box and a link button. Typing text into the textbox and clicking on the link button will insert the a link surrounding the text selected in ckeditor.

In the iframe version of the plugin window, I have also created a separate link, where it shows the IE7 have trouble using 'CK.dom.element.createFromHtml(link)'

Please keep in mind, the issues exist in both emulator version of IE7 and physical copy of IE7.

Any questions, please give me a yell.

[Jakub Ś]

About get selection:
Every browser has its own selection system and IE7's is not really stable in this area. When using call getNative() you refer to browser selection system. This is not CKEditor problem and we can't do any thing here.

About "createFromHtml/insertElement":
I have looked into this problem more carefully and it seems that the problem is with insertElement method not createFromHtml which returns valid element.

From what I have spoken with my colleague, he told me that "we have some problems with insertXX from times to times, and we are planning on introducing context-sensitive enhanced insertXX methods."
This issue will be used as a starting point so I will modify it a little bit.

---

A simplified test case showing the same problem in IE7:

1. Paste the below code into replacebycode sample

   setTimeout(
   function(){
   	var link = "<a href='" + link + "' target='_blank'>" + 'abc' + "</a>";
   	var element = CKEDITOR.dom.element.createFromHtml(link);				
   	CKEDITOR.instances.editor2.insertElement( element );
   }, 5000
   );
   

Result: In IE7 JS error pops out:
URI: /_source/core/dom/node.js
Line:174
Code: node.$.parentNode.insertBefore( this.$, node.$ );

Issue is reproducible form CKE 3.0

[Piotrek Koszuliński]

I can reproduce this in IE7, but I cannot in IE8. We do not support IE7 any more so I'm closing this issue.