Replace Salesforce Rich Text Editor with Visualforce

How To Replace the Salesforce Rich Text Editor

By On December 24, 2011 · 16 Comments

The Salesforce.com default rich text editor is missing some key functions that users are used to having when working with a WYSIWYG editor. Adding and editing tables, adjusting font colors, setting background colors, and editing source code are a few examples of the limitations of the default editor. When working on implementations of Salesforce.com it is not an uncommon requirement to swap out the default editor with one that offers more functionality.

Their are a number of very good open source editors available to download. CkEditor (replaced FckEditor) is my personal favorite. The editor is fast, reliable, customizable, and feature rich. In the code example below I will demonstrate on how you can replace the default editor on a visualforce page with just three lines of code.

Prerequesites

  • Download CkEditor from CkEditor.com
  • Upload the downloaded .zip file as a Static Resource named "CkEditor" in your SFDC org.

Source Code

Apex
1
2
3
4
5
6
7
8
9
10
11
<apex:page>
<!-- Add the javascript file to intialize the CkEditor -->
<apex:includescript value="{!URLFOR($Resource.CkEditor, 'ckeditor/ckeditor.js')}" />
<!-- Add a style class of "ckeditor" to all text area inputs -->
<apex:inputtextarea value="{!YourVariable}" styleClass="ckeditor" richtext="false"/>
<apex:inputtextarea value="{!YourVariable2}" styleClass="ckeditor" richtext="false"/>
</apex:page>

Live Demo

Check out the improved rich text editor in action on my Force.com Developer Site.
Go to Example Site
 
If you enjoyed this article, please consider sharing it!
Reddit Facebook Twitter Delicious StumbleUpon Digg
  • SFDC Dev

    Hi, thanks for this code! This is by far the easiest way I have seen on how to replace the (awful) default rich text editor.

  • Aharon Feinstein

    Hey, is there any way to replace the default editor that pops up when using inline editing?  I couldnt figure out how to apply this fix to that situation.

    • http://macscloud.com/ Mac Anderson

      Unfortunately this is not a solution that is currently supported by the Visualforce sorry!  However you could create a custom VF page that has a custom popup for the CkEditor in a modal window to give a similar effect.

      • num5labonte

        I have the image upload working with fckeditor thanks to some code by Appiphony. Going to try and port it over to CK. Thanks for the blog.
        Sorry. should have replied to the next one down

    • http://www.macscloud.com Mac Anderson

      I also added a link to view a working demo of the WYSIWYG editor in action just go back to this post and click the link at the end of the article. Good Luck!

  • Venkatyeruva

    but we can’t enable fileupload option right/…………is there any otherway to add browae file option

    • http://macscloud.com/ Mac Anderson

      Actually, you can with a custom visualforce page and some modifications of the javascript source code of ckeditor.  I think you have given me a great idea for a nice update to this blog post.  Thanks! Look for it soon.

      • Kaveh

        When shall we expect it?

  • http://free-12415f14c3a-124e539428a-12e57456865.sachin.cs5.force.com/temp_user?id=UsN-0022-A Sachin Agarwal

    Thanks Anderson for the post !

    I was looking for it from a long time & thinking to use yahoo rich text editor. But now it’s will solve my problem

    • http://macscloud.com/ Mac Anderson

      no problem, glad you found it useful.

  • Damian

    Can this replace the WYSIWYG on the Communication Templates > HTML Email page setup? 

    • http://macscloud.com/ Mac Anderson

      Unfortunately not, this solution only works for visualforce pages. The email template WYSIWYG is lacking a lot of functionality and it would be a nice enhancement if Salesforce.com would consider it. I suggest you search the Salesforce.com ideas board for an existing idea an promote it or create a new idea and maybe they will take it up in a future release.

  • Anonymous

    very nice! thankyou.
    can you drag drop the image into this Rich Text Editor.
    each time I do that on sf online community (ideas exchange) it bloats out the image
    so too big too save.
    –
    and in the discussion boards – you cannot drag drop image
    –
    I wondered if this has either of same issues or has it sorted.

  • swimmingly

    Is it possible to use this editor with a Web-to-Lead or Web-to-Case form?  The Salesforce generated code does not work for me, it looks like this (I’ve used question marks to replace site specific info below):

    CaseRTfield:var editor = new FCKeditor(’00N3000000??????’, null, 425);editor.BasePath = ‘/apexpages/fckeditor/’;editor.Config['CustomConfigurationsPath'] = ‘/apexpages/richtext.config.js’;editor.ToolbarSet = ‘SalesforceBasic’;editor.Config['SkinPath'] = editor.BasePath + ‘editor/skins/sfdc/’;editor.Config['DefaultLanguage'] = ‘en-us’;editor.Config['EditorAreaStyles'] = ['/sCSS/25.0/sprites/1340133642000/Theme3/default/HtmlDetailElem.css'];editor.Config['ImageUpload'] = true;editor.Config['SitesPath'] =  ”;editor.ReplaceTextarea();

    Any suggestions for making this work with CKeditor instead?

  • Svg 4141

    Thanks..
    really helpful

    Regards,
    santosh

  • http://twitter.com/imPhaniraj phaniraj nadiger

    Hi Mac,

    Is it possible to reRender the visalforce page with this CKEditor. I checked display the field on the same page after I update the field, using reRender it doesnot update bt without that it updates. So how this is possible to do it?