Rich Text and HTML Editors

Owned by Jodie Miners
Last updated: Feb 12, 2017
7 min read

There have been some new releases in the Rich Text Editor over the years, (http://docs.releasenotes.salesforce.com/he-il/winter15/release-notes/rn_general_html_editor_updates.htm), but we still have the problem of having 4 different HTML (or Rich Text) Editors. And now MORE with Lightning and Quill! 

 

  • Standard HTML Editor for Rich Text Fields no text formatting functionality, No View Source. Completely useless. 


  • Case Feeds HTML Editor https://help.salesforce.com/HTViewHelpDoc?id=case_interaction_sending_email.htm&language=en_US - Font, Size, Format and colour, no View Source. (This is where you DON'T what users to be adding all sorts of colours and fonts - all formatting should be controlled through the HTML Email templates to maintain a corporate style). 
       

  • Knowledge Article Editor - good enough text formatting, and View Source. If this one were everywhere, I could just about cope with that. 


  • HTML Email Editor - old and ugly, but still has some basic formatting functions like Font and Size. 

  

  • New Lightning Email Editor - just to make things completely different again. Again, font and size should be a corporate style thing - AND THERE IS NO WAY TO INSERT AN IMAGE! 
  • New Quill JS Editor in Notes in Lightning Spring '17 - oh we have just gone so backwards. NO HTML LINKS! How is that even possible? But there are images!

 

There are probably more. It would be great if ONE of the product teams can put a comment on this idea https://success.salesforce.com/ideaView?id=08730000000BrkwAAC. (Well, it looks like they have commented - if you use Salesforce Classic - "No New Features For You!" (to paraphrase the Soup Nazi)) and then commented that it was partially released when it wasn't anything useful at all. At least with the Locker Service issues, they have to at least address ALL the different HTML editors. 
Basically, we need to do ANYTHING to stop users creating their content in Word, and pasting it in to ANY HTML Editor in Salesforce. AND We want ALL HTML Editors to be the same - and have View Source functionality. As I said, I could at least LIVE with the Knowledge HTML Editor, but I want it everywhere, consistently. 
Here's my business use case. To allow for users to have control over their email templates that are sent out to Campaign Members, I create a basic Visualforce email template, that references a custom Rich Text field on the Campaign, where they can add all the details of the Event on the Campaign. They want their emails to look nice, so the Rich Text field needs to have the EXACTLY formatted HTML that will display on the emails, and fit the Corporate Style Guide. But there is NO WAY for them to create this HTML in the Rich Text field. So have to ask them to create it in Knowledge, or an external editor, and then paste it into the HTML Editor for the custom field.

A Note about Quill

QuillJS is the new Rich Text Editor for Salsesforce. Basically, due to some security issues (part of Lightning Locker Service), all the Rich Text Editors need to be replaced. Quill is apparently built by ex Salesforce people, and is one of the only editors that works with the new security settings. You will see at the moment (Spring '17) that Rich Text Editors do not work in Sandbox because Locker Service is enabled by default. In Spring '17 they introduced Quill to one section of Lightning - Notes. 

Quill is Open Source - maybe I should contribute - but that doesn't mean it will get into Salesforce. 

Issues with Quill in Spring '17 in Notes

  • Don't need underline
  • Need Hyperlink
  • Need keyboard shortcuts at least for the same things as on the toolbars
  • Need headings 1, 2 and 3. With keyboard shortcuts. 
  • Would LOVE markdown. 
  • Where has the Task functionality gone???

Notes should be a place where you quickly jot down what you are thinking - it should work like SimpleNote or Confluence or even Word or Google Docs if you don't touch any of the styles. Just quickly jot things down, apply some headings, bullets, numbering and maybe turn those lists into tasks.  

It doesn't paste from Word adequately at all - well it strips out formatting nicely, but the rest is not good at all. 

  • Some lines of text get put over two lines
  • Numbers are separated from their paragraph and separated by two lines. 
  • Many line breaks

This is not good. Not good at all.

This is the HTML it saved

<div><p><br></p><p><br></p><p>A simple note document:</p><p><br></p><p><br></p><p>- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><p>Would have some bullets</p><p><br></p><p><br></p><p>- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><p>And another bullet</p><p><br></p><p><br></p><p>And maybe some <b>bold</b></p><p>and <i>italics</i> for emphasis:</p><p><br></p><p><br></p><p>1.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><p>And a numbered list</p><p><br></p><p><br></p><p>2.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><p>Continuing. </p><p><br></p><p><br></p><p>And a hyperlink to <a href="http://www.google.com/" target="_blank">google</a></p><p>for good measure. </p><p><br></p></div>

Well, look I can be thankfull it didn't save ALL the word style info, so that is good. Now if it could just fix up the extra spacing then it might be on the right track. 

Look, we ALL know that 90% of sales type people are going to write their notes in word and upload the word document, or paste it into notes. If you can't even get pasting from Word right, then we have a problem. How is this even going to work for Knowledge articles. 

Things I want in a Text Editor

See my blog post from years ago about formatting in text editing https://thedetaildept.com/2012/07/31/confluence-is-not-a-word-document/. This is the reason I use Confluence, and still love it. I would prefer full Markdown though. Keep your hands on the keys, let the words flow out. Do some simple formatting as your are typing. 

Minimum Requirements

  • Ability to turn off formatting options at a system-wide or permission based level. 
    • No, there is NO reason to have pink as a font colour, or 28pt font in corporate communications - unless of course that is part of your corporate style. 
    • No there is NO reason to have underlined text in the same document that you have hyperlinks. WHY OH WHY IS UNDERLINE STILL A THING IN QUILL? 
    • You get to rid your corporate communications of Comic Sans for ever! 
  • Keyboard shortcuts for headings eg ctrl+1, 2 etc - similar to Word or Google Docs (note they both have different key combinations. 
  • Keyboard shortcuts for bullets and numbering.
  • Keyboard shortcuts for standard things like insert hyperlink (ctrl+k)
  • Strips out all extra formatting when text is pasted from Word. 
  • Paste into word with appropriate formatting only (eg keep bullets and numbers). 

Great to have features

  • Markdown style editing as an option - eg even Word has put stars around a word to make it bold (yes you can turn it off). 
    • This allows you to keep your hands on the keyboard. 
  • A predefined set of styles that the user can choose from in the corporate style guidelines - eg Heading 2 is always 1.2em Arial Bold. 
    • But ensuring that only <h2> is saved in the raw HTML that is saved, and that the styles are only applied by CSS in the text editor. 
    • But this depends on where the text is displayed and that that applies the styles consistently. 
    • And if it is in an email that it knows that it has to save the styles as inline styles into the raw HTML. 
  •  The ability to paste images in or drag and drop them in, and if they come from a URL keep the URL (eg serving images up from an external CDN).

 

Using TinyMCE, I have been able to create a simple HTML Editor that does the following:
  • Allows for typing in markdown which formats the text into HTML
  • Allows for users to choose only a restricted set of styles' to maintain the corporate style guide. 
  • Sets the base style to match the corporate style guide
  • Limits the styles that can be used - eg, there is no place for underlined text in any online documents as it gets confused with a hyperlink - so underline is NOT an option. 
  • Allows for ctrl+1, 2 etc keyboard shortcuts for heading styles so it it's similar to Word for quick editing. 

If I ruled the world

Here's my spec for Rich Text editors if I ruled the world. 

Alternote is a fabulous editor. 

 

The number one feature I want is Markdown, or a simplified format of it. 
Tiny MCE has Textpatterns, which for end users are probably much better - it behaves more like word. http://www.tinymce.com/wiki.php/Plugin:textpattern. You type *bold* and you get bold text. You type 
* my bullet 1
* my bullet 2
and you get bullets. 
you type 
# heading
and you get heading 1
Tiny MCE has style_formats http://www.tinymce.com/wiki.php/Configuration:style_formats and again it's a pretty simple format so it could be set in a configuration. 
The second feature I want is standard styles so you can keep a corporate style guide. This is exceptionally important for Knowledge - you just have to have a look at the public knowledge articles for many sites to see how bad they look with inconsistent formatting across their knowledge articles (I'm sorry to say that even knowledge sites I've been a part of end up looking shit because people don't care enough about this stuff, so we have to make it easy for them). 

Tiny MCE has style_formats http://www.tinymce.com/wiki.php/Configuration:style_formats and again it's a pretty simple format so it could be set in a configuration. 

 
The next thing I want is that it is configurable as to what buttons are visible. Because in some corporate stylings you do not ever want the colour picker available, and you may decided that tables are not a feature that is allowed in your richtext boxes. 
 
Eg, I would remove the following buttons from the knowledge editor. 
  • Font Size
  • Font Style
  • Strikethrough
  • Font Colour
  • Background Colour
The next thing I want is clean paste in from Word. Tiny MCE has http://www.tinymce.com/wiki.php/Configuration:paste_word_valid_elements 

One thing I want, which is not so important but a nice to have is the ability to paste images in or drag and drop them in, and if they come from a URL keep the URL (eg serving images up from an external CDN). I have a client who has huge numbers of videos on Amazon that they need to embed within their RTE - they don't need to store them in Salesforce. 

With all of these configurations it would be OK for them to be site-wide, but object specific would be even better - eg in Opportunities you may have the ability to do more formats than in Campaigns for the text that is used in the emails. 

I know SKUID allows for a custom CKEditor, so I'm sure something would be possible with that.