IE9 Highlighting Issues with iFrames – jHTMLarea

Programmers

IE9 Highlight in an IframeHaving issues with IE9’s iframes?

I recently installed a plugin called jHTMLarea (highly recommend, by the way), a light-weight WYSIWYG Editor using jQuery, and while I got all my modifications working in all the browsers, including IE8, I ended up with a really random issue:

ISSUE

When you open the page in IE9, and scroll down inside the WYSIWYG box (which is an iframe), IE9 won’t highlight anything after the initial lines that show upon loading.

Obviously, this is a major issue. If a user is trying to bold text later on in the Editor and it won’t highlight, what’s the point of having the editor?

So I started scouring the internet. At first I couldn’t find anything (mainly because I had no idea what the issue was). Finally I came across something that said maybe it was an iFrame Issue. Still, there wasn’t much information on how to fix it. Hence this blog post.

This StackOverflow, answer written by Warren Bullock gave the answer: http://stackoverflow.com/questions/9063475/unable-to-select-the-text-left-in-the-iframe-beyond-the-visible-area

SOLUTION

The jHTMLarea javascript file has the following line of code (line 308 in jHTMLarea-0.7.5.js):

edit.designMode = 'on';

If you comment out this line, and add the following lines to your jQuery, you’ll be able to edit/highlight again.

var editorBody = $.myControl.jhtmlarea.editor.body; //reference the body of the iframe
editorBody.contentEditable = true;

If you’re using jHTMLarea, add the two lines above to the full function that you use to start the plugin:

$(function() {
 $("#aboutTextEdit").htmlarea({
     toolbar: ["bold", "italic", "unorderedList", "|", "link", "unlink"], 
     loaded: function(event) { 
        $.myControl = { jhtmlarea: this };
        var editorBody = $.myControl.jhtmlarea.editor.body;
        editorBody.contentEditable = true;
    }
 });
});

EXPLANATION

Internet Explorer has this to say in their documents (note the second line of the explanation):

designMode property (Internet Explorer)
Sets or gets a value that indicates whether the document can be edited.

You cannot execute script when the value of the designMode property is set to On.

You can use the designMode property to put Windows Internet Explorer into a mode so that you can edit the current document.

While the browser is in design mode, objects enter a UI-activated state when the user presses ENTER, clicks an object that has focus, or double-clicks the object. Objects that are UI-activated have their own window in the document. You can modify the UI only when the object is in a UI-activated state.

 

Comments