setHTML doesn't set non-HTML tags in IE

[Reuben]

I am doing some work on a footnotes plugin for Drupal and the way it works is to add <fn> or [fn] tags, which are replaced with real markup at render time.

For the CKEditor plugin it uses <fn> tags, however I am running into an issue with IE.

What happens when it tries to add that tag is:

• Firefox: Adds the tag as expected.
• Chrome: Adds the tag as expected.
• IE9: Adds the tag, but at the start of the text area, not at the cursor.
• IE8: Gets a javascript error and does not add the tag. The error is:
  • Error: Unable to get value of the property 'remove': object is null or undefined (Line 73 of element.js)
• IE7: Doesn't even load the page for me to try. With the error:
  • Unable to get the value of the property 'onLoad': object is null or undefined (Line 59 of plugin.js).
  • I have not looked into this one yet and it is quite possibly unrelated.

Here is the onOk code for the plugin:

          onOk : function()
          {
            var editor = this.getParentEditor();
            var content = this.getValueOf( 'info', 'footnote' );
            var value = this.getValueOf( 'info', 'value' );
            if ( content.length > 0 || value.length > 0 ) {
              var realElement = CKEDITOR.dom.element.createFromHtml('<fn></fn>');
              if ( content.length > 0 )
                realElement.setText(content);
              if ( value.length > 0 )
                realElement.setAttribute('value',value);
              var fakeElement = editor.createFakeElement( realElement , 'cke_footnote', 'fn', false );
              editor.insertElement(fakeElement);
            }
          }

Now the problem line is:

var realElement = CKEDITOR.dom.element.createFromHtml('<fn></fn>');

When createFromHtml() calls setHtml(), the <fn> tag is not added, so when it tries to do temp.getFirst().remove(); temp.getFirst() is nothing and it throws the error.

That is with IE8 (IE9 in IE8 mode). With IE9, I haven't yet looked into why it is placing the markup at the start of the text area.

Is this a bug with setHTML(), or maybe an IE issue that has to be worked around, or something else?

Also, could anyone point me in the right direction of some way to add a tag like <fn>? Or is this it? Or am I wasting my time and is it not possible to do it and have it work nicely in all browsers?

This is my first issue on here so if I have missed useful information just let me know what you need.

Thanks.

[Jakub Ś]

IE7: issue is not related

IE8 - USe var realElement = CKEDITOR.document.createElement( 'fn' );
In Ie you have to create such element first.
Please see ​http://stackoverflow.com/questions/12967695/ie-browser-losing-ckeditor-element-sethtmluserdefinedtags-userdefinedtags/12969485#12969485
​http://stackoverflow.com/questions/13084429/ckeditor-losing-custom-nodes-while-getelementsbytag-on-ie/13095813#13095813
​http://stackoverflow.com/questions/13023608/dummyduplicate-node-in-ckeditor-ie/13029566#13029566

IE9 - try working on catching and restoring selection to paste at cursor.