HTML WYSIWYG editor for fields in Salesforce using Visualforce

This is something I wanted to play around with ever since I first saw something similar demoed back in Dreamforce '07. To the best of my knowledge, there still isn't a native VisualForce component for this. My earlier effort was an Scontrol, but I really wanted to take advantage of VF's speed. So, here's my stab at it.

<!--- Proof of concept WYSIWYG Editor


<apex:page StandardController="Account">
<script type="text/javascript"
djConfig="parseOnLoad: true"/>
<script type="text/javascript">
<apex:sectionHeader title="Sample WYSIWYG editor
using Visualforce and Dojo"></apex:sectionHeader>
<apex:form id="editorForm">
<apex:pageBlock ><apex:pageBlockButtons >
<apex:commandButton action="{!save}" value="Save"
<div class="tundra"
style="background-color: #f5f5f5;width:400px;">
<textarea id="editor1" name="editor1"
   dojoType="dijit.Editor" inheritWidth="false"
    .value = dijit.byId('editor1').getValue(false)">
<apex:inputHidden id="descript"



The above code provides a working example (Note:check for line breaks when you copy and paste) of a inline editor that provides rich text formatting for the Account description field. I used the Dojo Toolkit. You'll see that it references javascript files stored on Google's Ajax API site. I would suggest uploading the library as a static resource instead.

To eliminate the need for a custom controller, I used javascipt to write the text from the editor field to the Account.Description field once the editor looses focus (onBlur). That way the standard controller save function takes care of the rest.

4 thoughts on “HTML WYSIWYG editor for fields in Salesforce using Visualforce

Leave a Reply to Job Search Guy Cancel reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s