function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
LessLess 

Hijacking the WYSIWYG editor on VF pages

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.
 
 
 
The code block:
<apex:inputTextarea value="{!inputValue}" id="theTextarea" richText="true" />
  gets expanded behind the scenes into a few sections:
  1. a div that contains a hidden config value
  2. an iframe that contains the editor
  3. ...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
  1. 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.
  2. 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...)
  3. 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>
  4. 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.
 
jwetzlerjwetzler
Please keep in mind that we have already switched out the implementation of the rich text editor more than once, and may do so in the future at any time.  If we decide not to use FCK anymore your code is going to break.

If there are specific customizations you'd like to see added to the rich text editor please create an idea on the IdeaExchange.
LessLess

Hi Jill,

II understand that and did bury a warning in there:
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.
Again, this is just a way, not the way to get around a small limitation... 
mtbclimbermtbclimber
Better yet, load the FCK editor or any editor of your choosing into a static resource and control your own destiny rather than play chicken with our decision to change the implementation :)

That being said, please do log an idea for the configurable parameters you'd like to see in a standard richtext editor component.
LessLess

Embedding your own editor in resources is another way to do it, but when I tried to upload my own instance of FCK, the Static Resources weren't able to resolve most of the paths properly. Looks like there is an issue with Static Resource paths in archived files: http://community.salesforce.com/sforce/board/message?board.id=Visualforce&message.id=3469

I gave up and decided to use yours since you provided FCK (for now...). Why do more work than necessary?

BTW - If you do embed an editor, you still have to figure out what the calculated ID will be for the textarea that you're binding to...

I did start an Idea for this too.



Message Edited by Less on 11-16-2008 09:55 PM
mtbclimbermtbclimber
Not sure what the issue was in the other thread. I've got the extJs library in a static resource and it works perfectly.  I've also used YUI as a static resource for their richtext editor (though at the time its performance was not exactly good)

Yes you need to know the Id of the of the textarea and this is why we provide the $Component global variable.

Less wrote:

I gave up and decided to use yours since you provided FCK (for now...). Why do more work than necessary?


So your solution doesn't have to be tested with every release we deploy (every week). That sounds like more work to me :smileyhappy:


Message Edited by mtbclimber on 11-17-2008 12:59 AM
LessLess

Yeah, I was stumped pretty good with the static resource issue. I ended up deleting the static resource and installing it again, but no dice - it always died on the FCK initialization section.

I then took the fckeditor.js and uploaded it by itself and called the base from the archive - I got the iFrames to init, but no FCK text box, toolbars, etc.

I was convinced that i was doing something stupid, but then took a look on the boards when I found the other issue...

I've got my code in a .zip, but an wondering if something is improper with the windows zip format. Will try a JAR tomorrow...

Cheers and goodnight.
rawiswarrawiswar
was it resolved?
OPROENOPROEN

OPROARTS Designer for Force.com is released.

 

A long waited WYSIWYG Visualforce template designer forForce.com.

You can easily design any document visually by placing components on the designer’s document layout area and visually map your SFDC fields and then convert it to a Visualforce page with a single mouse click and save the Visualforce template in your SFDC account. You can then use these templates whenever you want to generate documents.

You can use this handy application to design any document you want, Sales docs, product promotion flyers, Greetings & invitations to name a few.

Further more you can deliver generated document via email or fax in addition to attaching them to your Salesforce objects.

 

The OPROARTS Designer will provide support for Sites page designing in the next release soon.

 

Visit http://www.opro.net/oproarts/en/designer_for_force_com.html or www.youtube.com/user/opro to learn more about it.
SoozeeSoozee

Can you give some pointers on implementing a WYSIWYG editor using static resources?  I am trying to use NicEdit to no avail.

I can't get nicEdit to replace the text areas.

 

Any help would be much appreciated!