When editing Rich Text fields, Salesforce employs a library called CKEditor, a popular WYSIWYG text editor used in a variety of web applications. You can customize CKEditor to your liking when you embed it in a page, and Salesforce has really stripped down its functionality in many ways.
We can (mostly) fix that!
Lets compare the boring editor:
To the awesome editor:
I’ve added Font/Style/Size/Color/Text BG options, additional formatting (or strip formatting), blockquote, Source View for tweaking the post’s source, and a fullscreen editing mode for distraction-free writing.
When configuring the CKEditor used on Salesforce Rich Text fields, a little additional legwork is necessary, because Salesforce uses a couple of custom editor plugins to handle media uploads and such.
I just ripped this directly from the Salesforce page source, I honestly have no idea what most of these do.
When describing your new editor config in JS, you’ll need to include these plugins in your Toolbar definition:
And you also need to add the configuration option sfdcLabels:
This is also ripped from SF’s editor config, and sets some strings needed for the plugins to work correctly. Sadly, I couldn’t get the plugin sfdcMediaEmbed to work properly. It looks great in the editor, but when you save the text to the database it strips out any iframe tags. Looking at the source, it seems that this plugin is for use with knowledge articles. It took quite a bit of digging around through SF’s source to get the editor to this level, and while I’d like to be able to post youtube embeds, what I have right now is a certain improvement. We now have formatting and styling options, code formatting, tables, blockquotes, and the glorious Maximize button for fullscreen editing.
A big improvement.
I’ll conclude with a JS snippet that can be dropped into any Visualforce page that has a rich text input field. Just wrap it in <script> tags and paste it in. It isn’t super graceful, but to get the SF plugins to work correctly I needed to pull a few config variables out of the default configuration, i.e. the filebrowserImageUploadUrl value, since the image upload plugin needs a security token I couldn’t find access to anywhere else. This script checks every 50 milliseconds if the editor has been loaded, and when it has, steals the info it needs, kills the old one, and launches the shiny new one. its pretty seamless. So here’s the sauce: