Tobias
10-05-2006, 07:52 PM
Hello,
thanks go to 72dpi who posted links to solutions in a different thread and especially BIG thanks to donadoni and binhaus over in the Moxiecode forum (http://tinymce.moxiecode.com/punbb/viewtopic.php?id=436&p=1) for providing the actual code solutions.
This idea got me hooked and I wanted it to work inside SD, too, so here's my code hack to add a "Hide / Show Editor" toggle link in your Admin pages for "textareas" (which of course requires JavaScript to be allowed on your site).
This has been tested with SD 2.3.5, IE6 and FF 1.5.x.
1. Adding JS function to switch TinyMCE on/off
Open file /admin/adminfunctions.php and find below lines around line 84 or so:
});
</script>';
}
Just BEFORE the BOTTOM curly bracket INSERT the following lines:
echo '
<script language="javascript" type="text/javascript">
function toggleEditor(id, eleToggleLink) {
var elm = document.getElementById(id);
var elmlink = document.getElementById(eleToggleLink);
if (tinyMCE.getInstanceById(id) == null)
{
elmlink.innerHTML = \' [ Hide Editor ] \';
tinyMCE.execCommand(\'mceAddControl\', false, id);
}
else
{
elmlink.innerHTML = \' [ Show Editor ] \';
tinyMCE.execCommand(\'mceRemoveControl\', false, id);
}
}
</script>
';
2. Adding the toggle link in your Admin pages' code:
It is of utter importance to mark any WYSIWYG textarea with an unique ID within the page.
In below example the TEXTAREA has an "id" of "element1":
echo '
<textarea id="element1" name="mytext" wysiwyg="true" rows="4" cols="50" style="width:100%;" >
...
</textarea>';
The toggle link itself also requires an uniqe ID so that the link text is correctly switched from "Hide" to "Show" and vice versa. So depending where you want the toggle link to appear, paste below line either above or below your <textarea...> tags and edit the "element1" ID to match your TEXTAREA's ID:
echo '
<a id="tinytoggle1" href="java script:toggleEditor(\'element1\',\'tinytoggle1\');">[ Hide Editor ]</a><br />';
Both occurences of "tinytoggle1" have to be the same name for the JavaScript to work.
In case there are multiple Textareas on your page, just make sure, to keep the ID's in sync, that's it.
Mass Media Pro Plugin - Live Demo : Mass Media Pro (http://www.sddepot.com/mass_media/)
My SDDepot Blog (http://www.sddepot.com/community/blog/tobias/) - SDDepot - Skins and Plugins (http://www.sddepot.com/)
thanks go to 72dpi who posted links to solutions in a different thread and especially BIG thanks to donadoni and binhaus over in the Moxiecode forum (http://tinymce.moxiecode.com/punbb/viewtopic.php?id=436&p=1) for providing the actual code solutions.
This idea got me hooked and I wanted it to work inside SD, too, so here's my code hack to add a "Hide / Show Editor" toggle link in your Admin pages for "textareas" (which of course requires JavaScript to be allowed on your site).
This has been tested with SD 2.3.5, IE6 and FF 1.5.x.
1. Adding JS function to switch TinyMCE on/off
Open file /admin/adminfunctions.php and find below lines around line 84 or so:
});
</script>';
}
Just BEFORE the BOTTOM curly bracket INSERT the following lines:
echo '
<script language="javascript" type="text/javascript">
function toggleEditor(id, eleToggleLink) {
var elm = document.getElementById(id);
var elmlink = document.getElementById(eleToggleLink);
if (tinyMCE.getInstanceById(id) == null)
{
elmlink.innerHTML = \' [ Hide Editor ] \';
tinyMCE.execCommand(\'mceAddControl\', false, id);
}
else
{
elmlink.innerHTML = \' [ Show Editor ] \';
tinyMCE.execCommand(\'mceRemoveControl\', false, id);
}
}
</script>
';
2. Adding the toggle link in your Admin pages' code:
It is of utter importance to mark any WYSIWYG textarea with an unique ID within the page.
In below example the TEXTAREA has an "id" of "element1":
echo '
<textarea id="element1" name="mytext" wysiwyg="true" rows="4" cols="50" style="width:100%;" >
...
</textarea>';
The toggle link itself also requires an uniqe ID so that the link text is correctly switched from "Hide" to "Show" and vice versa. So depending where you want the toggle link to appear, paste below line either above or below your <textarea...> tags and edit the "element1" ID to match your TEXTAREA's ID:
echo '
<a id="tinytoggle1" href="java script:toggleEditor(\'element1\',\'tinytoggle1\');">[ Hide Editor ]</a><br />';
Both occurences of "tinytoggle1" have to be the same name for the JavaScript to work.
In case there are multiple Textareas on your page, just make sure, to keep the ID's in sync, that's it.
Mass Media Pro Plugin - Live Demo : Mass Media Pro (http://www.sddepot.com/mass_media/)
My SDDepot Blog (http://www.sddepot.com/community/blog/tobias/) - SDDepot - Skins and Plugins (http://www.sddepot.com/)