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.

Advertisements
This entry was posted in Salesforce and tagged , , , , . Bookmark the permalink.

4 Responses to HTML WYSIWYG editor for fields in Salesforce using Visualforce

  1. Andrew Waite says:

    Take a closer look at apex:inputTextarea, specifically the “richtext” attribute 😉

    Like

  2. hey thanks for that, but I’m trying to remove html editing when people paste into the editor, does anyone know how i can achieve this?

    Like

  3. santier says:

    Check out the parameters for Dojo’s toolkit at http://dojotoolkit.org/book/dojo-book-0-9/part-2-dijit/
    advanced-editing-and-display/editor-rich-text

    Like

  4. Still the native rich text editor doesn’t have key feature like tables and source view. Its a better option for simple formatting, though.

    Like

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s