toggleFCKeditor A function that disables and re-enables the FCKeditor. When disbaled, the whole toolbar is grayed out and the editorArea will not receive any input. Optionally the toolbar can be hidden or collapsed. In this manner, when re-enabled, the toolbar will show again or be expanded. Note: When disabled, the editorArea is also grayed out in IE. This feature was built on a paid basis for Paul York of Oykr Limited and was allowed to be returned to the community. Thanks Paul! Test the feature below by clicking on the padlock icon: go there Download the script: http://saulmade.nl/FCKeditor/files/toggleFCKeditor.js (right click and save as) Download in depth information on the code: http://saulmade.nl/FCKeditor/files/toggleFCKeditorInfo.js (right click and save as) Download the script for FCKeditor 2.2 and lower: http://saulmade.nl/FCKeditor/files/toggleFCKeditor_2.2-.js (right click and save as) Download the description of the difference between the toggleFCKeditor function for FCKeditor 2.2 and lower and the one for FCKeditor 2.3 and higher: http://saulmade.nl/FCKeditor/files/toggleFCKeditorInfo_2.2-.js (right click and save as) Usage instructions : Copy or download the 'toggleFCKeditor' function. Include the script on the page where you use the FCKEditor. Trigger the function like: toggleFCKeditor(FCKeditorAPI.GetInstance('FCKeditor1')); (where FCKeditor1 is the instancename of your FCKeditor) When you want the FCKeditor to disable onload, use the FCKeditor_OnComplete API method: function FCKeditor_OnComplete(editorInstance){toggleFCKeditor(editorInstance);} Feature written By Paul Moers, Februari 2007 Special thanks to Paul York for supporting me! Licence : LGPL.

Below are two code boxes. One displaying the script and the other with the in depth information on the code. These two files are also available for download, see the link above.
Displayed with the great javascript editor for source code called 'EditArea' created by Christophe Dolivet

// config // what do we do with the toolbar when disabling the editor. Possibilities are 'disable', 'hide', 'collapse'. // When collapsed the toolbar can be expanded again by the user, but he'll find a disabled toolbar. var toolbarDisabledState = "disable"; function toggleFCKeditor(editorInstance) { if ((!document.all && editorInstance.EditorDocument.designMode.toLowerCase() != "off") || (document.all && editorInstance.EditorDocument.body.disabled == false)) { // disable the editArea if (document.all) { editorInstance.EditorDocument.body.disabled = true; } else { editorInstance.EditorDocument.designMode = "off"; } // disable the toolbar switch (toolbarDisabledState) { case "collapse" : editorInstance.EditorWindow.parent.FCK.ToolbarSet._ChangeVisibility(true); case "disable" : editorInstance.EditorWindow.parent.FCK.ToolbarSet.Disable(); buttonRefreshStateClone = editorInstance.EditorWindow.parent.FCKToolbarButton.prototype.RefreshState; specialComboRefreshStateClone = editorInstance.EditorWindow.parent.FCKToolbarSpecialCombo.prototype.RefreshState; editorInstance.EditorWindow.parent.FCKToolbarButton.prototype.RefreshState = function(){return false;}; editorInstance.EditorWindow.parent.FCKToolbarSpecialCombo.prototype.RefreshState = function(){return false;}; break; case "hide" : if (editorInstance.EditorWindow.parent.document.getElementById("xExpanded").style.display != "none") { editorInstance.EditorWindow.parent.document.getElementById("xExpanded").isHidden = true; editorInstance.EditorWindow.parent.document.getElementById("xExpanded").style.display = "none"; } else { editorInstance.EditorWindow.parent.document.getElementById("xCollapsed").style.display = "none"; } break; } } else { // enable the editArea if (document.all) { editorInstance.EditorDocument.body.disabled = false; } else { editorInstance.EditorDocument.designMode = "on"; } // enable the toolbar switch (toolbarDisabledState) { case "collapse" : editorInstance.EditorWindow.parent.FCK.ToolbarSet._ChangeVisibility(false); case "disable" : editorInstance.EditorWindow.parent.FCK.ToolbarSet.Enable(); editorInstance.EditorWindow.parent.FCKToolbarButton.prototype.RefreshState = buttonRefreshStateClone; editorInstance.EditorWindow.parent.FCKToolbarSpecialCombo.prototype.RefreshState = specialComboRefreshStateClone; break; case "hide" : if (editorInstance.EditorWindow.parent.document.getElementById("xExpanded").isHidden == true) { editorInstance.EditorWindow.parent.document.getElementById("xExpanded").isHidden = false; editorInstance.EditorWindow.parent.document.getElementById("xExpanded").style.display = ""; } else { editorInstance.EditorWindow.parent.document.getElementById("xCollapsed").style.display = ""; } break; } // set focus on editorArea editorInstance.EditorWindow.focus(); // and update toolbarset editorInstance.EditorWindow.parent.FCK.ToolbarSet.RefreshModeState(); } }

// When you call the function you need to pass the editorInstance as an attribute. // To get the editorInstance, see 'Retrieving an Editor Instance' in the wiki: http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API // Example (HTML code with inline javascript event) : <span onclick="toggleFCKeditor(FCKeditorAPI.GetInstance('FCKeditor1'))">toggle FCKeditor</span> // In the onload event of the FCKeditor, the editorInstance is passed as an attribute, see the 'Events' section of the wiki page mentioned above // Example : function FCKeditor_OnComplete(editorInstance) { toggleFCKeditor(editorInstance); } // In depth information on the code : // --- editorArea --- // disable the editArea. Doing this in IE will break the FCKeditor, a new extra toolbarset will be loaded in the editorArea!? editorInstance.EditorDocument.designMode = 'off'; // setting it back on editorInstance.EditorDocument.designMode = 'on'; // disabling the body. Greys out the editorArea. Only works in IE. editorInstance.EditorDocument.body.disabled = true; // enabling it again editorInstance.EditorDocument.body.disabled = false; // --- toolbar --- // disabling all buttons at once can be done by disabling the toolbarset // To disable specific button see my HOWTO https://sourceforge.net/forum/forum.php?thread_id=1598024&forum_id=257180 (Using the Disable function of a button is the proper way of disabling instead of overwriting the Execute command of a button which was described in the first post of the HOWTO thread) editorInstance.EditorWindow.parent.FCK.ToolbarSet.Disable(); // enabling it again editorInstance.EditorWindow.parent.FCK.ToolbarSet.Enable(); // now when you would click in the editorArea all buttons would be updated so we would have disabled the toolbar for nothing // For this we need to disable the refresh function of the buttons and specialCombos // You can clone them for restoration when you want the FCKeditor back enabled buttonRefreshStateClone = editorInstance.EditorWindow.parent.FCKToolbarButton.prototype.RefreshState; specialComboRefreshStateClone = editorInstance.EditorWindow.parent.FCKToolbarSpecialCombo.prototype.RefreshState; editorInstance.EditorWindow.parent.FCKToolbarButton.prototype.RefreshState = function(){return false;}; editorInstance.EditorWindow.parent.FCKToolbarSpecialCombo.prototype.RefreshState = function(){return false;}; // enabling them again would be editorInstance.EditorWindow.parent.FCKToolbarButton.prototype.RefreshState = buttonRefreshStateClone; editorInstance.EditorWindow.parent.FCKToolbarSpecialCombo.prototype.RefreshState = specialComboRefreshStateClone; // another thing you could do is to collapse the toolbars, like normally done with the small arrow editorInstance.EditorWindow.parent.FCK.ToolbarSet._ChangeVisibility(true); // expanding it again is editorInstance.EditorWindow.parent.FCK.ToolbarSet._ChangeVisibility(false); // Just hiding the toolbar can be done too editorInstance.EditorWindow.parent.document.getElementById("xExpanded").style.display = "none"; // And hiding the small bar showing when the toolbar is collapsed is this editorInstance.EditorWindow.parent.document.getElementById("xCollapsed").style.display = "none"; // when you want to hide the collapse handle do editorInstance.EditorWindow.parent.document.getElementById("xCollapseHandle").style.display = "none"; // or hiding the expand handle. This seems to be the same as hiding the object with id 'xCollapsed' mentioned above editorInstance.EditorWindow.parent.document.getElementById("xExpandHandle").style.display = "none";