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
references
http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/
advanced-editing-and-display/editor-rich-text

-->

<apex:page StandardController="Account">
<apex:stylesheet
value="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/
dijit/themes/tundra/tundra.css
"/>
<apex:stylesheet
value="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/
dojo/resources/dojo.css
"/>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.0/
dojo/dojo.xd.js
"
djConfig="parseOnLoad: true"/>
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.Editor");
</script>
<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"
id="theButton"/>
</apex:pageBlockButtons>
<div class="tundra"
style="background-color: #f5f5f5;width:400px;">
<textarea id="editor1" name="editor1"
   dojoType="dijit.Editor" inheritWidth="false"
    name="tmpTextString"
   onBlur="document.getElementById('{!$Component.descript}')
    .value = dijit.byId('editor1').getValue(false)">
{!Account.description}
</textarea>
<apex:inputHidden id="descript"
value="{!Account.description}"></apex:inputHidden>

</div>
</apex:pageBlock></apex:form>
</apex:page>

 

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 comment