Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by Nick Armitage on Nov 04, 2008 01:48
open dhtmlx forum
dhtmlxEditor - Cannot edit in Firefox when setContent used to set initial text

I have initialised the editor correctly and everything works fine in both IE7 and FF3.
Until I use the setContent method to pre-populate my editor with some text.

In IE, this is fine but in FF, the text appears in my editor but it is not possible to edit this text until I start typing something.
The cursor keys work so I can navigate through the text but I cannot actually delete any characters - it's as if the text is read only.
Only when I start typing characters into the editor does it then start working as normal.
If the setContent line is commented out, it works but that's only because you have no text to actually delete.

Very simple setup is as follows:
        var editor = new dhtmlXEditor("editorObj");
        editor.setIconsPath("dhtmlxSuite/dhtmlxEditor/codebase/imgs/");
        editor.init();        
        editor.setContent('Some text');
Answer posted by Nick Armitage on Nov 06, 2008 01:49
Any comment or update on this?
Is it just my browser or can you reproduce it?
It's not a show stopper by any means but it's a bit weird how you have to type some characters in before you can delete any of the others already there.

I'm using openWYSIWYG editor at the moment and would like to ditch it in favour of dhtmlxEditor as I'm using other dhtmlx controls in my web app.
Answer posted by Support on Nov 06, 2008 01:56
The issue is confirmed. We will try to find a workaround to it.
We will necessary send you the fixed file when the solution is found.
Answer posted by Nick Armitage on Nov 12, 2008 05:00
I assume no solution has been found for this yet but is there any news on this?
Is it something that is inherent with the Firefox browser and the way they implement IE's contenteditable="true" (namely designMode="on")
Answer posted by Nick Armitage on Nov 12, 2008 05:20
I discovered this workaround for now which might be of interest:

In dhtmlxEditor.js:
    this.setContent = function(str){
        if(this.edDoc.body){
            this.edDoc.body.innerHTML = str;
            this.callEvent("onContentSet",[]);
            if(_isFF)
            {
                this.runCommand('InsertHTML',' ');
            }
        }
        else{
            var that = this;
            dhtmlxEvent(this.edWin, "load", function(e){
                that.setContent(str);
            })
        }
    }

IE works fine so the inserted code is only for Firefox.
All you need to do is insert a blank character into the <body> using the InsertHTML command and hey presto, the delete and backspace characters work on the newly set content.

Must be something to do with the contentReadOnly flag not being reset until you type in a character or something,
Using the insertHTML command must do something internally that you can't do manually via command code.
I tried using the contentReadOnly command but it didn't work.
Answer posted by Support on Nov 13, 2008 06:51
Thank you very much for the excellent solution !

It fixes the issue in FireFox and will be included into the official editor's version.

Answer posted by Nick Armitage on Nov 13, 2008 07:07
You're very welcome - glad to help out :-)

You might want to check other browsers to see what they do.
I only use IE (v7) and FF (v3.0.3) so can't vouch for other browsers.
You might need to extend the if (_isFF) to include other browsers that follow the Mozilla path???
Answer posted by Support on Nov 14, 2008 01:45
We have tested the editor in different browsers (IE, Opera, Safari, FF) - the issue doesn't appear.

The problem occured only in FF3. But it have been solved, thanks to your solution :-)

So, once again - thank you !