You've developed a VF page, but the richtext edit, while cool, needs more... I wish that SFDC would've given us a way to "sneak" a look at the HTML contents that form the construct of the message/text that we're editing. So you look behind the scenes with firebug or chrome, then you'll see that SFDC's WYSIWYG editor is just their slightly customized instance of the FCK editor.
gets expanded behind the scenes into a few sections:
a div that contains a hidden config value
an iframe that contains the editor
...and javascript section that calls the necessary parameters when the page is loaded.
Hence, it is possible to embed a second call to the javascript that creates the FCK editor - merely doing this will result in two editors on the screen in Mozilla and IE (chrome won't display duplicate ID field objects...). That is a start, and with a little massaging, you can write a function to get rid of the existing iframe containing the old editor and replace it with the new editor that you're calling.
The steps to do this aren't too bad.
How to do it
Create your visual force page as you see fit. It goes without saying that you should have a rich text block linked to some textarea field in your object.
Once you've created your page, test it. Using Chrome or Firebug, find out the ids of the divs that get created when the page runs. From the above example, id="theTextarea", might get turned into:
The iFrame: "j_id0:j_id2:editBlock:j_id33:theTextarea___Frame"
The config block: "j_id0:j_id2:editBlock:j_id33:theTextarea___Config"
The textarea: "j_id0:j_id2:editBlock:j_id33:theTextarea"
(Honestly, you're just interested in the prefix, the "j_id0:j_id2:editBlock:j_id33:" section - You can append the divId and "__Frame", etc...)
Go back to your visualforce page and add this script block directly under the <apex:inputTextarea> code block.
<script type="text/javascript">
setTimeout("swap();",5000);
function swap() {
alert("Running function...");
var origFrame = document.getElementById('j_id0:j_id2:editBlock:j_id33:theTextarea___Frame');
alert("Removing iFrame");
origFrame.parentNode.removeChild(origFrame);
var configItem = document.getElementById('j_id0:j_id2:editBlock:j_id33:theTextarea___Config');
alert("Removing config...");
configItem.parentNode.removeChild(configItem);
alert("Creating new editor...");
var editor = new FCKeditor('j_id0:j_id2:editBlock:j_id33:theTextarea');
editor.BasePath = '/apexpages/fckeditor/';
editor.ReplaceTextarea();
alert("Done...");
}
</script>
Retest your page. The old editor should disappear and be replaced with the new one which includes all the fancy features of FCK.
How it works The swap() funtion gets called ~5 second after the page is loaded. While it isn't necessary to wait this long, it is necessary to wait until after the orgininal iFrame gets instantiated. (calling the function before it is there won't find anything...)
If you break it or mess it up bad, just remove the script block in your page - this isn't like Heretic's javascript injection which could really screw things up... Hopefully, they'll add the ability for folks to call custom parameters for FCK in the future, but this seems to work for now.
At dream force there was a demo for sites that included a wysiwyg editor for putting content onto a site. I'm trying to figure out how to create a custom object for a site that has this editor for creating new records, does anyone have any ideas on how to achieve this?
