FCK Editor and Hidden Divs...

I am trying to use FCKeditor and Tabber (http://www.barelyfitz.com/projects/tabber/) together.. but there seems to be an issue wtih the hidden div and FCK edtior....

if the tab that has the FCK editor loads first.. no prob.. but if it loads in a hidden div (other than the selected tab) then FCK editor is NOT in design mode.. and therefor you can not edit or enter data.

Any idea around this?

I did read this...

http://wiki.fckeditor.net/Troubleshooti ... ab9d551417
(When putting the editor in a hidden DIV on Gecko, the editor stops working. How can I solve it?)

but this is not working...

Please help....

Terry

Tue, 01/09/2007 - 03:14

ukprototype

Joined: 09/01/2007

Posts: 1

RE: FCK Editor and Hidden Divs...

Hi Terry, just had the same issue however i'm using a different tabbing. It's probably the wrong way to approach it but I too found the example unusable.

Upon loading the tab content I call:
setTimeout(function(){FCKeditorAPI.GetInstance(objname).MakeEditable()},2000);
where objname is the id of the editor in the current tab.

I used the setTimeout to give the editor time to load. I know about the oncomplete function but it doesn't seem to do the job when using tabs. I belive calling any function accessible by the api will get a gecko browser to allow you edit it.

Hope this helps

Dave A.

Tue, 01/09/2007 - 03:42

stripe-man

Joined: 30/11/2006

Posts: 143

RE: FCK Editor and Hidden Divs...

Tks soo much for your reply...

Just befor you posted.. I got this answer from sample004 from the snapshot (latest version) of the FCK editor (for download)

<script language="javascript">

function Show(editor)
{
document.getElementById('eEditor').style.display = '' ;
document.getElementById('eNoEditor').style.display = 'none' ;

// This is a hack for Gecko... it stops editing when the editor is hidden.
if ( !document.all )
{
var oEditor = FCKeditorAPI.GetInstance( editor ) ;

if ( oEditor.EditMode == FCK_EDITMODE_WYSIWYG )
oEditor.MakeEditable() ;
}
}

function Hide()
{
document.getElementById('eEditor').style.display = 'none' ;
document.getElementById('eNoEditor').style.display = '' ;
}

</script>

Then you can use it like this...

<div id="eNoEditor">
<input type="button" value="Show Editor" onclick="Show('textarea_name');">
</div>
<div id="eEditor" style="DISPLAY: none">
<input type="button" value="Hide Editor" onclick="Hide();">

</div>

of course you can also do a mouseover on the form to do this same thing..

onmouseover="Show('textarea_name')" onclick didnt seem to work and doing it on the hidden div does not work either...
but the onmouseover on the form works fine.. should be able to do it on the table as well.

again..

thanks for the reply... and I hope this helps you!!!! that code BTW.. (script) is from FCK sample code (from Fred)