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.
Take a closer look at apex:inputTextarea, specifically the “richtext” attribute 😉
LikeLike
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?
LikeLike
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
LikeLike
Still the native rich text editor doesn’t have key feature like tables and source view. Its a better option for simple formatting, though.
LikeLike