0

I've been trying to implement a richtext editor using an iframe.

I've got a little help from the following for the script that inserts html at the cursor/selection:

from Insert html at caret in a contenteditable div

All in fine on Chrome and FF, but IE (using IE10 at the mo - but same result in earlier verion modes) fails at:

range.insertNode(frag);

Giving the follwing error:

SCRIPT5022: WrongDocumentError

I found the following link detailing the error:

http://msdn.microsoft.com/en-us/library/windows/apps/hh453166.aspx

However I am at a loss to know how to work round the error.

Any help would but appriciated...

Community
  • 1
  • 1
Nick
  • 39
  • 6

2 Answers2

3

Your code is running in the context of the main window, but you are trying to reference window and document of the iframe. Replace any references to "document" with "element.ownerDocument" and "window" with "element.ownerDocument.parentWindow" (where "element" is the element that you have added contenteditable to).

Something like this:

var selection = window.getSelection(); // Wrong.
var selection = element.ownerDocument.parentWindow.getSelection();  // Correct.

var frag = document.createDocumentFragment() // Wrong.
var frag = element.ownerDocument.createDocumentFragment() // Correct.
donavon
  • 580
  • 7
  • 9
-1

I (kind of) solved it by adding <meta http-equiv="x-ua-compatible" content="IE=8">. This caused the script to follow the false branch of if(e.getSelection){...}, reverting to the older createRange() method.

alex
  • 479,566
  • 201
  • 878
  • 984
Nick
  • 39
  • 6