fun with sfdc: Rich Text Editors

On a recent project, I was asked to implement a visualforce page with rich text editing capability. As I've come to learn, when you put an <apex:inputTextArea> tag inside a visualforce page, you don't get a rich text editor. You get a text area. No toolbars for formatting, unlike the standard layouts. The standard layout editor appears to be ckeditor but if you're using visualforce, you have to put in the rich text editor yourself. Fortunately, there are lots of editors out there. I had no idea.

Based on the project needs and features, I ended up implementing the following for user evaluation:

TinyMCE
CKEditor
NicEdit
Redactor

TinyMCE ended up being the selected editor, mostly because of the ICE plugin. I use strikingly to power my website and strikingly uses TinyMCE as it's editor. It's fairly straightforward to implement:

Download TinyMCE and upload the zip it as a static resource

If you're using ICE, you'll need to include it in your plugin directory, rezip, and upload

Update you visualforce page as follows

<apex:includeScript value="{!URLFOR($Resource.tinymce, 'tinymce/jscripts/tiny_mce/tiny_mce.js')}"/>

...

<apex:inputTextArea value="{!TEST__c.Some_Field__c}" id="somefield" style="width:100%;" styleclass="mceEditor"/>
<!--this is the initialization required for TINYMCE  -->
                <script type="text/javascript">
                   tinymce.init({
                            mode : "textareas",
                            editor_selector :"mceEditor",
                            theme : "advanced",
                            plugins : "ice,icesearchreplace,spellchecker,pagebreak,style,layer,table,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,visualchars,wordcount",
                            theme_advanced_buttons1: 'ice_togglechanges,ice_toggleshowchanges,iceacceptall,icerejectall,iceaccept,icereject,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect',
                            theme_advanced_buttons2: 'spellchecker,cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,forecolor,backcolor',
                            theme_advanced_buttons3: 'tablecontrols,wordcount',
                            theme_advanced_buttons4: "",
                            theme_advanced_toolbar_location: "top",
                            theme_advanced_toolbar_align: "left",
                            theme_advanced_toolbar_location : "top",
                            theme_advanced_statusbar_location : "bottom",
                            theme_advanced_resizing : true,
                            ice: {
                                          user: { name: '{!$User.Alias}', id: '{!$User.Alias}'},
                                          preserveOnPaste: 'p,a[href],i,em,strong'
                                },
                            width: "100%",
                            height: "200"      
                        });
                </script>

I highlighted a couple sections that are noteworthy:


You need to mention that you're using TinyMCE so you'll need the <apex: includeScript> tag
You can have multiple TextArea fields on your page and selectively enable TinyMCE using the editor_selector property when you initialize the editor.  Just set the styleClass property on your text area fields that you want to override with TinyMCE.
If you're using ICE, the modification here allows you to capture the user who edits the text.


And if all goes well, you should have something like this:

5 comments:

UnknownOctober 30, 2016 at 5:44 AM
Thanks a ton. It helped a lot.
byodbuzz04December 13, 2018 at 11:04 PM
A Plain Text Editor
Plain Text files
That's right, if you're writer on a budget, you don't need to spend any money buying expensive writing software or apps. Instead, you can use the text editor that comes free with your operating system.
Just open up Notepad on Windows or TextEdit on a Mac. I like plain text editors for writing something short quickly and easily, without thinking much about it. I wrote a blog post about the benefits of using plain text editors as writing software.
Use for: writing whatever, wherever
byodbuzz04December 17, 2018 at 8:59 PM
A Plain Text Editor
Plain Text files
That's right, if you're writer on a budget, you don't need to spend any money buying expensive writing software or apps. Instead, you can use the text editor that comes free with your operating system.
Just open up Notepad on Windows or TextEdit on a Mac. I like plain text editors for writing something short quickly and easily, without thinking much about it. I wrote a blog post about the benefits of using plain text editors as writing software.
Use for: writing whatever, wherever
byodbuzz04December 20, 2018 at 12:28 AM
A Plain Text Editor
Plain Text files
That's right, if you're writer on a budget, you don't need to spend any money buying expensive writing software or apps. Instead, you can use the text editor that comes free with your operating system.
Just open up Notepad on Windows or TextEdit on a Mac. I like plain text editors for writing something short quickly and easily, without thinking much about it. I wrote a blog post about the benefits of using plain text editors as writing software.
Use for: writing whatever, wherever
John smithJune 13, 2019 at 1:52 AM
A great information on Rich text editor JavaScript you have shared keep it up.

Friday, June 7, 2013

Rich Text Editors

5 comments: