jHTMLarea - Selecting text doesn't work in IE9

Question

jHTMLarea works in all the browsers, but in IE9, if the textbox requires a scrollbar, anything below the initial window won't highlight when the user goes to highlight it.

The code below is what I use to call the plugin.

       $(function() {
            $("#aboutTextEdit").htmlarea({
            toolbar: ["bold", "italic", "unorderedList", "|", "link", "unlink" ], 
                loaded: function(event) {               
                }
            });
        });

Answer 1

Figured it out!! Thanks to Warren Bullock

And using this stackOverflow question (once I figured out it was an iframe issue): Unable to select the text left in the Iframe beyond the visible area

the kicker is going into the jHTMLArea file and commenting out this line: edit.designMode = 'on';

which is on line 308. Works great in all browsers now!

Answer 2

I had the same Problem with jHTMLarea 0.7.5. This Problem exists in other WYSIWYG-Editors too.

For fixing this you must edit your jhtmlarea.js File. Search for:

designMode=on

Then delete this term and insert

edit.body.contentEditable = true;

..at the end of the function. Make sure, that you setting contentEditable AFTER the inital-document is written like this:

[..]

initEditor:function(options)
{
    var edit=this.editor=this.iframe[0].contentWindow.document;
    edit.open();
    edit.write(this.textarea.val());
    edit.close();
    if(options.css)
    {
        var e=edit.createElement('link');
        e.rel='stylesheet';
        e.type='text/css';
        e.href=options.css;
        edit.getElementsByTagName('head')[0].appendChild(e);

    [..] 
    edit.body.contentEditable = true;

[..]

It seems to be a solution that runs on Firefox too, so you not need to make a Browser-switch. Take a look that you setting "contentEditable" to an HTML-Element like "body" or "div" and not directly to the "document"-Object.