Hidden Input Elements in Firefox

Question

I'm having troubles with fckeditor in Firefox. When the user goes to a page, the html (encoded) is stored in a hidden input element. I call the predefined fckeditor javascript event to populate my editor with the html from the hidden ContentBody element.

        function FCKeditor_OnComplete( editorInstance )
        {
            editorInstance.InsertHtml("");
            var sample = document.getElementById("ContentBody").value;
            editorInstance.InsertHtml(sample);
        }

This automatically populates the editor with the desired text in IE, but in Firefox it doesn't. Firebug gives me the error :

A is null [Break on this error] var FCKW3CRange=function(A){this._Docume...eateFromRange(this._Document,this);}};\r\n

Using Firebug I can determine that the event method FCKeditor_OnComplete() just isn't fired when using Firefox. It is, however, in IE. Any ideas on how to get this to work in both browsers?

The HTML for ContentBody is: <input type="hidden" name="ContentBody" id="ContentBody" value="<%=Model.Article%>" />

Answer 1

Are you sure your tag has the attribute id="ContentBody"? It's possible to use the attribute name="ContentBody", and IE will (technically incorrectly) interpret that as the ID attribute for getElementById. Firefox will only find it if you use id correctly.

Answer 2

If you break on the error and walk up the stack, why is A not set? Or, break on

document.getElementById("ContentBody").value

and walk down the stack, looking for a more specific cause.

Answer 3

That is interesting. I never used FCKeditorOnComplete (I had to remove underscore to make WMD happy), but it looks like a good hook. Did you try to put a break point this the FCKEditor function below? Do you arrive there with Firefox? Maybe it is something to do with where your FCKeditorOnComplete is physically situated...

function WaitForActive( editorInstance, newStatus )
267...{
268    if ( newStatus == FCK_STATUS_ACTIVE )
269    ...{
270        if ( FCKBrowserInfo.IsGecko )
271            FCKTools.RunFunction( window.onresize ) ;
272
273        _AttachFormSubmitToAPI() ;
274
275        FCK.SetStatus( FCK_STATUS_COMPLETE ) ;
276
277        // Call the special "FCKeditor_OnComplete" function that should be present in
278        // the HTML page where the editor is located.
279        if ( typeof( window.parent.FCKeditor_OnComplete ) == 'function' )
280            window.parent.FCKeditor_OnComplete( FCK ) ;
281    }
282}

Answer 4

I came to a solution to this last month while working on a new project. First I store the encoded HTML string in a hidden input element:

<input type="hidden" name="ContentBody" id="ContentBody" value="<%=Model.Body%>" />

This function is the event that is called when the FCKeditor instance in finished loading.

function FCKeditor_OnComplete(editorInstance) 
{
    var oEditor = FCKeditorAPI.GetInstance(editorInstance.Name);
    var content = parent.document.getElementById("ContentBody").value;
    var EditedContent = content.replace(/\u201C/g, '"');
    oEditor.InsertHtml(EditedContent);
    content = null;
}

It seems Firefox requires the javascript to call parent.document.getElementById()