How to create custom CRM rich text fields with TinyMCE: a tutorial

Part 1 Build

How to create basic CRM rich text fields with TinyMCE

In Part 1 you’ll find essential steps on how to set up TinyMCE. The primary goal of this section is to begin with an index.html file, and then create a working rich text editor – one that could form the basis for a basic CRM rich text field.

Step 1: Start with the default config

1. On your workstation, open an HTML file, and make use of the code from the TinyMCE quickstart guide

2. If you haven’t already, you can get a FREE TinyMCE API key – you can get your API key through the TinyMCE log in page now. The key grants you 14 days free access to all of TinyMCE’s premium features.

3. Replace the no-api-key segment with your own Tiny API key in your HTML. Here’s an example:

4. Open the HTML file in a browser.

TinyMCE initializes the textarea element using the “editor” id, similar to a CSS property styling an HTML tag.

If you have a website ready, take a minute to register your domain as an approved domain once you log into TinyMCE. The settings are available from the dashboard.

Step 2: Add the plugins for use within your CRM

Once the initial HTML and JavaScript are set, you can start configuring TinyMCE with plugins to form the basis of a basic CRM rich text entry field. The following steps change the plugins that support the TinyMCE functionality, therefore it’s important to know how to adjust TinyMCE plugins to customize the field for your CRM.

1. Include the “plugins” and “toolbar”options:

2. Add the CRM config plugins for a CRM text entry field:

3. Customize the toolbar position and icons with the following:

4. Save the changes, and reload the browser. The minimal rich text field is now ready to fit into your CRM system.

With this essential step complete, the next step explores the versatility of TinyMCE in a CRM, expanding into the customer communication capabilities TinyMCE provides.

Step 3: The final result – a basic rich text field

You’ve now set up a basic CRM rich text field using TinyMCE. Here’s the complete code:

And here’s the complete code example:

The following user interface options streamline TinyMCE, so it's less obtrusive in your CRM. They work to limit its visual footprint so it doesn’t overload the scarce real estate that rich text fields are given on busy CRM screens.

b. Menu and Status bar

What the Menu bar and Status bar do

TinyMCE comes with a Menu bar to help users find and explore all of the functions available, even if they aren’t exposed to them via the Toolbar. You can conceal the Menu bar, or enable it, using just one option in the TinyMCE configuration.

The Status bar contains an element path, which shows the selected element and the parent elements, and a word/character counter.

Why would you need to optimize it?

Disabling both the Menu and Status bars, further streamlines the interface. It’s one direct method you can use to reduce the space the rich text field occupies.

Optimizing them keeps the fields minimal and unobtrusive inside your CRM. Additionally, the need for a minimal UI FAR outweighs the extra functionality these options offer (which often doesn’t benefit most CRM uses).

How to set it up

1. Access the TinyMCE init script, and set menubar and statusbar to false:

…
tinymce.init({
  selector: '#editor',
  plugins: 'lists link emoticons image editimage advcode linkchecker template powerpaste tinymcespellchecker autoresize',
  toolbar: 'undo redo spellchecker | formatgroup | link emoticons image template tokens | code',
  menubar: false, //Set to false for menubar and statusbar
  statusbar: false,
…

2. Save the changes to the interface.

c. Autoresize

What Autoresize does

Autoresize is a plugin that automatically adjusts the field height to its contents. When the contents of the rich text field fills with text, the text area height expands to meet it. This feature is important when an interface is busy, because it only expands when more space is needed.

Why would you need to optimize it?

If you’ve initially set the CRM rich text field to a small height, it minimizes your screen clutter. Then Autoresize ensures writers can obtain (if needed) more space when entering content and can review it without needing to scroll excessively. By optimizing Autoresize, it gives you an initially small field, with the potential to expand.

Of course, if your intention is to limit the field to only one line of text, you would leave autoresize off, and specify the field height accordingly.

Tip: before enabling autoresize, be sure to check how the rest of your CRM’s UI reacts to the rich text field resizing dynamically. Depending on its behavior, you may want to either leave autoresize off, or may require additional front-end coding to make sure your UI behaves properly when the field is autoresized.

How to set it up

1. Access the TinyMCE init script, and include the autoresize plugin in the list of plugins: 'autoresize lists link emoticons image editimage advcode linkchecker template powerpaste

…
tinymcespellchecker autoresize',

2. Set min_height, max_height, and autoresize_bottom_margin options:

…
//Autoresize settings
        autoresize_overflow_padding: 20,
        max_height: 500,
        autoresize_bottom_margin: 50,

3. Save the changes and then reload the application to see the autoresize options working. The overflow padding and bottom margin keeps the text entry organized in the text area (useful for streamlined UI).

d. Content Style

What Content Style does

Content Style allows you to specify CSS styles to be applied to the contents (the rich text within your fields). It’s an effective way to style the fields' appearance to represent the end-product of how the content will be displayed in its final form (for example when an email is received), by writing CSS directly into the Content Style option as a string of text.

Why would you need to optimize it?

Content Style is useful for providing a true WYSIWYG experience to your users – quite literally showing them what they get when the content is rendered. In this example we’ve included some basic text styles to represent what their email message will look like, when it’s opened by the recipient.

How to set it up

1. Add the Content Style option to the field config by accessing the TinyMCE init script, and then adding the content_style option

2. Add two backticks (`)

3. Include the CSS to style the inside the backticks:

c. Text Formatting options

What Text Formatting does

TinyMCE comes with a number of text formatting options that help you control what types of formatting can be applied to rich text fields.

Why would you need to optimize the formatting?

Limiting formatting to a number of selective choices, rather than every available choice, helps with consistency. It’s easier to be consistent when writing and formatting text when there are less options (it helps stop accidentally clicking the wrong thing). Optimize the formatting options to make sure the content output represents exactly the format you choose when writing it (eg. emails or reports).

How to set it up

There are a few options to set up:

formats and block_formats options

These define which styles are available in the Styles dropdown if you’re using it on the menubar. It’s wise to keep this list simple, to ensure you keep the formatting at the basic end of the scale. Our example is a basic HTML email (as opposed to a templated marketing email), so that’s why ‘simple’ is suggested.

The same applies to other field types within your CRM. Offering less options has the added benefit of increasing data entry efficiency – by keeping formatting choices to a minimum for the user.

To set up the formats and block_formats options:

1. Add the following to the tinymce.init script:

block_formats: 'Normal=p; Heading=h1; Sub heading=h2;'

2. Save the changes

• font_size_formats

The default font size format in TinyMCE is points. However, since it's recommended best practice to specify pixel font sizes in email, change the default and instead specify the font size dropdown options in pixels.

To set up the font_size_formats option:

1. Add the following to the tinymce.init script:

font_size_formats: '8px 10px 12px 14px 16px 18px 24px 36px'

2. Save the changes

cforced_root_block and forced_root_block_attrs

As noted, the example is a basic HTML email, so it’s useful to use inline styles by default (something email clients require). To force TinyMCE to do this, apply the default styles to every new block of content. If the field you’re working on is not for an email, you can leave these two options out.

To set up the root block options

1. Access the TinyMCE init script, and include the following options:

forced_root_block: '',
forced_root_block_attrs: {''},

2. Set the forced_root_block and the attributes option to the following:

forced_root_block: 'p',
forced_root_block_attrs: {'style': 'font-size: 14px; font-family: helvetica, arial, sans-serif;'},

3. Save the changes

3. CRM rich text field essential: Personalize content

Personalization delivers a tailored experience to your customers. At its most effective, it engages them during designated ‘micro-moment’ touches during their customer journey, that are specially designed to lead them to the next step. Both B2C and B2B brands are increasingly using personalization to improve their customer experience, increase revenue, improve customer retention and build brand loyalty.

Personalization represents a major pathway to delivering value to customers.

Why do you need personalization?

According to a study by MarTech, personalized emails have 29% higher open rates and 41% higher click through rates. An even more interesting statistic from that same study, is that personalized emails can result in double the number of transactions, compared to non-personalized emails.

Ask any marketing or sales guru and they’ll tell you personalization is key, regardless of whether it comes to email, instant messages or tailored offers. Individuals expect it, and companies demand it

Using the above email example, let's now focus on how to personalize the emails your users create in your CRM to improve their open, click and transaction rates.

CRM Personalization plugins explored

a. Templates

What Templates does

The Template plugin allows users to enter content predefined (by you, the developer, or the CRM admin) into the rich text field.

Why would you need to set it up?

The primary benefit of using Templates in our full-featured CRM rich text field, is that it lets your users send standardized (boilerplate) email content to their prospects and customers. The second benefit is that it saves them time, which means they can potentially close more deals or cases, faster.

Say, for example your salespeople sell insurance to different industries – manufacturing, banking and small business. The messaging used for each of those prospects is going to vary, so you can equip your salespeople with pre-written ‘templated’ emails, for each industry to ensure that they’re personalized to each industry’s needs and use case specifications.

In other cases, you may have templated emails for different types of emails your users send. In the example below, we’ve provided our sales team with an Outbound and a Follow-up email to help with their outreach efforts.

How to set it up

1. Specify the templates option:

//CRM Templates
        templates: [
        {
          title: ' ',
          description: ' ',
          content: ' '
        }
      ],

2. Populate the template with the necessary content written by your sales, marketing or customer success teams. In this example we have an outbound sales email and a follow up email:

3. Save the changes

b. Merge Tags

What Merge Tags do

Merge tags, also known as Mail Merge, or personalization tokens adds a customer name, email, address, contact number or any other merge tag to the rich text field. Your app would then take the email content from the field and replace the merge tags with merged data when the email is sent out.

Merge tags provide another safety net and are very easy to use. With consistent, read-only tags, your users avoid the risk of accidentally mistyping or malforming a merge tag, an avoid embarrassing and costly render errors when content is sent out.

You can also configure your own merge tag pattern to automatically trigger the Merge tags autocompleter list while typing. Set up a specific character or characters with the Merge tags prefix and suffix options, and as soon as you enter them into the text field, the Merge Tag dialog menu lists all available options for you to select.

Merge tags are reverse-compatible, meaning that if your content already uses plain-text merge tags, all you have to do is specify your existing prefix and suffix, and the plugin will automatically make them read-only when existing content is loaded.

Why would you need to optimize it?

In a rich text field set up for emails, the CRM functionality that processes and sends the email can be configured to replace merge tags with personalized content from the CRM – like their name, company or job title.

Outside of email, you could apply merge tags to fields that are used to generate contracts, reports, quotes, or even knowledgebase articles.

This leads to greater personalization as well as the efficiency and accuracy gains that come with not having to copy and paste individual record attributes between fields.

How to set it up

Configuring this plugin requires setting up merge tag prefix and suffixes, and configuring a merge tag list. The list format is a JavaScript array containing the actual customer information.

1. Add the Merge Tags plugin to your list of plugins:

tinymce.init({
  selector: '#editor',
  plugins:
    'autoresize lists link emoticons image editimage advcode linkchecker powerpaste tinymcespellchecker autoresize template mergetags', //mergetags added 
  menubar: false,
  toolbar_location: 'bottom',
  toolbar:
    'mergetags | undo redo spellchecker | formatgroup | link emoticons image templatetem | code',

2. Include the mergetags_prefix and suffix options. At this stage, you can specify the exact command characters you need. This example uses “]]” to start the Merge Tag plugin, but you could select “((“, “${“, or keep the default “{{“:

mergetags_prefix: ']]',
mergetags_suffix: '[[',

3. Add the mergetags_list option, and set up an array of customer contact information (your app’s merge tags) and tags for your own organization:

Note: You can add more tags as needed, and they can be organized into categories for easier discovery:

4. Save the changes

4. CRM rich text field essentials: Maximize productivity

The key focuses of the full-featured CRM rich text field customizations so far, have been streamlining the UI, format control, and personalization. Naturally, the next step is to optimize how the CRM rich text field maximizes productivity.

Why do you need productivity plugins?

One of the major reasons people buy CRMs is because they can lead to massive productivity gains.

According to Salesforce, using a CRM can increase productivity by up to 34%, and sales by up to 29%. That’s a significant increase. And you can build on that productivity gain by further optimizing the rich text field component.

Use Templates, Merge Tags, and Mentions – plugins designed to add to productivity within a software project – and ensure your CRM has a powerful rich text field. With a CRM and a custom, rich text field combined it gives you everything you need to focus on communicating with your customers.

CRM Productivity plugins explored

a. Link

What the Link plugin does

The Link plugin lets your users embed links into the content within your CRM rich text fields. This may sound simple at first, but the beauty of the plugin is that it has a number of configuration options that define HOW your users add links.

Why would you need to optimize it?

There are some default options for adding links that aren’t needed in a CRM environment. Taking them away speeds up the linking process by reducing the number of choices, consequently lightening the mental load for your users.

Another option available that adds to productivity is that the plugin lets users select from a list of predefined links – for example case studies, sales collateral or a pricing page – that they’d want to share with a prospect via email.

Enabling both of these reduces the amount of link errors, as well as greatly reducing the amount of time taken to add links.

How to set it up

1. Inside the TinyMCE init script, set link_target_list to false:

//CRM Productivity
link_target_list: false,

this hides the “target” option for links - since our users are using this field to compose an email, no target is needed, as emails don’t use link targets

2. Set link_title: false, which is a more productive option for emails:

link_title: false,
link_target_list: false,

3. Create a link_list object, including a sub-menu of link lists. In our email example, we’ve pre-populated some sales material that our CRM users can easily include when sending emails to prospects:

4. Save the changes

b. Spell Checker Pro

What the Spell Checker Pro plugin does

Spell Checker Pro adds spell checking as-you-type capabilities to your CRM, similar to what your users would experience in other productivity tools. By default, Spell Checker Pro uses English US dictionaries, and automatically highlights spelling mistakes.

Why would you need to optimize it?

The key to making sure data is easily searchable within your CRM, is to maintain one dictionary.

So if your primary language is English, but have people around the world, make sure you land on one variation of English, whether it’s US or UK English. Once you’ve established that policy, make sure you set up spell checking in your CRM rich text fields to follow that same dictionary. This then avoids scenarios where a team member enters “theatre” and another is searching for a record using the word “theater” and they can’t find that record.

How to set it up

1. Access the TinyMCE init script, and configure the spell checker language:

//Spellchecker languages
        spellchecker_language: 'en_US',

2. Save the change

c. Autocorrect

What the Autocorrect plugin does

The Spelling Autocorrect plugin responds to minor typographical errors as you type. It covers two cases of typing errors: misspellings of small words such as “teh”, and capitalization of words at the beginning of sentences. Autocorrect is enabled by default, but you can disable it if needed.

Why would you need to optimize it?

Good to know: There are some limitations to what you can autocorrect when the Spelling Autocorrect and Spell Checker Pro plugins are combined. In a language other than English, Spelling Autocorrect becomes disabled once the language option is switched out.

Although available with Spelling Autocorrect, Auto-capitalize is not enabled by default. Follow the steps below to enable it.

How to set it up

1. Start by adding the plugin to your list of TinyMCE plugins:

tinymce.init({
  selector: '#editor',
  plugins:
    'autoresize lists link emoticons image editimage advcode linkchecker template mergetags powerpaste tinymcespellchecker autocorrect',

2. Enable Auto-captialize. Auto-capitalize will capitalize the first letter of a word at the beginning of any sentence as you type.

autocorrect_capitalize: true

3. Save the changes

5. The completed CRM: a full-featured rich text field powered by advanced TinyMCE plugins

Once you've installed and combined the Premium plugins provided in the preceding sections, the CRM field becomes a first class CRM rich text field.

Here’s how the completed TinyMCE init script appears in its final form: