How-to use tinymce
How to create custom CRM rich text fields with TinyMCE: a tutorial
Published October 24th, 2022
![](\"CRM.png\")
Your Customer Relationship Management (CRM) software shouldn’t create a minefield of errors – its role is to build rapport, not erode it. But even the smallest of errors, like an email typo, can create an unwelcome reception in follow-up calls. These small missteps are easily avoidable. How? Custom CRM rich text fields can catch and and correct errors as they’re being written, instead of inadvertently creating customer relationship disasters.
AUTHORS:
John Rau
Marketing Manager at Tiny
Joe Robinson
Dev Advocate | Tech Writer at Tiny
Di Mace
Communications Manager at Tiny
A CRM isn’t simply a contact list. It should empower your team to build more effective relationships and provide an exceptional customer experience throughout the customer journey – from evaluation to purchase and beyond. Its implementation leads to greater organization and efficiency, better communication, more effective customer service and higher customer satisfaction.
The good news is there’s one CRM component that can assist in achieving your goal of optimal customer communications – your rich text editor. How? The editor interface within the CRM can be upgraded so that it steps in and provides an advanced, familiar and reliable writing experience that has built-in safeguards to avoid problems from happening.
This tutorial explains the steps needed to either upgrade and/or create custom rich text fields within your CRM, specifically tailored to the needs of today’s sales, marketing, and customer success teams.
The first part of the tutorial explains how to make a basic rich text field. This is a text entry field that you can include in your CRM. The second part expands on the basics, and shows you how to create a full featured rich text field for email communications in your CRM – it’s a rich text field optimized to catch any missteps, and keep your customer relationships positive.
TABLE OF CONTENTS
Why custom rich text fields matter in your CRM
Why not build a CRM editor of your own?
Essentials to start building your CRM rich text field
Build your CRM rich text field by expanding on this starter config/demo
Part 1 Build: How to create basic CRM rich text fields with TinyMCE
Part 2 Build: How to create custom rich text fields in your CRM
Why custom rich text fields matter in your CRM
Historically, CRM software has streamlined customer communications, aided the segmentation of customer files, and made use of personal attributes captured during product and sales discussions, order processing and billing. So the inherent power and data contained within a CRM is clear. But what else affects the successful implementation of a CRM system or upgrade within an organization? The rich text field that’s embedded in the CRM software.
Integrating the best CRM rich text field components in your tech stack (with a buy-and-assemble approach) can help you achieve your goal of customer centricity, increase your sales and in many cases increase both the engagement with and quality of the outputs from your CRM. It also minimizes custom build time, which means faster speed-to-market for your CRM.
At a high level, upgrading your CRM with a specialist rich text field component:
- Saves developer time: that’s hundreds of thousands of dollars in engineering costs in both initial development and ongoing maintenance.
- Minimizes ongoing costs (in dollars and human capital): that applies to both introducing and maintaining new features in your CRM.
- Commercial savings: ensures your app provides a streamlined experience for users, and is extensible to meet changing needs.
Whether you’re leading a SaaS CRM project, or managing the implementation of an off-the-shelf CRM, consider what CRM functionality helps your internal and/or external customers achieve their goals. Integrating the end result of this tutorial – a full featured rich text field – helps:
Overall application goal
CRM functionality
Tasks where custom rich text fields assist
Increase sales
Writing conversion-oriented emails to prospects (example used in this tutorial)
Quoting
Generating custom quotes and proposals
Call logging
Logging calls according to business rules
Improve retention
Knowledge base
Creating self-serve knowledge base content
Support ticket management
Enabling customers to create tickets and facilitating the back-and-forth communication
Accurate analytics and forecasting
Reporting
Designing and annotating reports
Boost productivity and efficiency
Records management
Entering data according to format and database requirements
Streamline communications
Social media monitoring and posting
Creating social media posts
Instant messaging (internally and externally)
Writing messages
Embeddable contact forms
Allowing prospects to enter free-form text in contact forms
Why not build a CRM editor of your own?
Let’s tackle the two questions most frequently asked by developers and product managers alike, in the context of building their own vs buying components and assembling a customizable rich text field within your customer relationship management (CRM) system.
1. Why not build from scratch?
You can build your own CRM-specific rich text field (RTE) from scratch with the resources available. But in looking more closely, two things become clear: building a rich text editor from scratch is costly, and takes time away from building an optimal experience for your customers. Rich text editors are also exceptionally complex. A development team that’s inexperienced in developing RTEs, generally underestimates the myriad of edge cases across both browsers and functionality. Even things that are perceived to be basic, are hard.
That brings us to the cost equation. The latest cost* estimates of building a basic, open source editor (ignoring advanced features) runs between USD $15M and USD $28M. And the time taken to build, ranges from 115 to 220 person-years for a single developer. That's assuredly not ideal, so there’s a better way to go.
(*as at July 2022)
2. Why build at all? Can’t you buy what you need?
One reliable option you can look into, is TinyMCE. The editor’s been specifically engineered so it’s adaptable to you and your app’s needs. CRM-specific features are available out-of-the-box: you pick the features you want from the plugin list, and add them to the core editor. All you do is assemble the components (either through APIs or coding), customize parts (if you desire) and draw on the decades-long experience of its builders in rich text editing.
There's even use case specific starter configs and demos, designed to make the experience faster and easier, as well as detailed documentation to support you.
Essentials to start building your CRM rich text field
This tutorial provides the tools needed to construct a CRM fully featured rich text field that uses the core TinyMCE rich text editor, upgraded to include advanced features. The tutorial contains:
- Clear explanations on why the features are useful for your CRM
- Step-by-step procedures explaining how to configure the features
- Working code demos you can explore.
Before proceeding, we’ve assumed that you know:
- Text entry and content writing
- Making directories and creating files
- How to navigate through different directories
- Using popular browsers like Chrome, Safari, or Firefox
- Using Python to run a local server with a command like:
python3 -m http.server 8000
Build your CRM rich text field by expanding on this starter config/demo
TinyMCE is flexible: it’s a component that you can adjust and reconfigure for different use cases. CRM applications need this kind of inbuilt flexibility, to manage the myriad of tasks it completes, and have a variety of different text entry fields.
The core use of a CRM app is to ensure there’s clear and accurate communication with customers. A reliable rich text editor keeps your content clear of mistakes, typos, or any number of small things that could diminish the customer relationship you’re trying to build.
Part 1 of this tutorial focuses on getting the TinyMCE core editor up and running with a basic rich text field.
Part 2 ramps up those minimal rich text entry field capabilities with the addition of plugins, to build a full featured rich text field you can integrate into either your new or existing CRM.
Ready? Let’s start…
Background Part 1
Understanding the basic rich text field features
High quality CRMs like Salesforce and Zendesk use WYSIWYG (‘What You See is What You Get’) capabilities. How does that help a customer success team?
A CRM User Interface with WYSIWYG capabilities shows the end product that’s produced. This means when you’re entering or editing text and/or inserting images, you can see it in the UI, and it exactly matches how the final product looks. There’s no need to consider (or know) markup or the background code that creates the content. Another way to put it, is that you control the look and the WYSIWYG editor handles the code underneath. Think of WYSIWYG as an intermediary between your words and the screen.This represents the essential reason why WYSIWYGs are so helpful.
A CRM needs solid rich text formatting even if the WYSIWYG supports only rich text fields. Therefore the rich text fields inside your CRM should (at minimum) provide:
- Text level formatting (bold, italics, headings)
- Accurate and clean copy-paste from other apps (like MS Word, Google Docs or Excel)
The main result from Part 1 of this tutorial, is a WYSIWYG working as a CRM rich text field that provides solid formatting. Beyond this, there are other advanced features also worth applying to your CRM. And that’s what Part 2 of this tutorial covers.
LEARN MORE
What's a WYSIWYG editor? Read
Guide to choosing WYSIWYG editors in 2022
Background Part 2
Understanding the full featured CRM rich text field
In more complex use cases, such as creating emails or composing a knowledge base article, a good WYSIWYG keeps up with the demands of the use case. More advanced functionality supports successful communication with customers. For instance, a full featured rich text field would provide:
- Link checking
- Spell checking and grammar checking
- Merge tags for dynamic content insertion
- Pre-defined templates
Before you go down the rabbit-hole, understand that while Part 1 of this article provides a solid rich text field, it’s the full featured rich text field that supports your communication efforts with customers. It supports your efforts with specific TinyMCE plugins that tailor the WYSIWYG experience for a CRM. For instance, there are productivity enhancements as well as layout, design and personalization features.
Each TinyMCE plugin that’s included contributes essential capabilities to your rich text field and takes it from a basic rich text field, to a market rivaling, full featured rich text field. Head directly to Part 2 of this tutorial to find out more.
The content for Part 2 derives from the TinyMCE CRM starter config, which is one way you could use a rich text field inside your CRM – for sending emails. There are also other rich text field usages (as mentioned in the table earlier), but for the purpose of this tutorial, we'll follow along the email use case within a CRM. Here's a demo:
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:
\n<html lang='en'>\n<head>\n <meta charset='utf-8'>\n <meta name='viewport' content='width=device-width, initial-scale=1'>\n <script src='https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js' referrerpolicy='origin'></script>\n \n <script>\n tinymce.init({\n selector: 'editor'\n });\n </script>\n</head>\n<body>\n<h1>TinyMCE CRM Example</h1>\n <form method='post'>\n <textarea id='#editor'></textarea>\n </form>\n</body>\n</html>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.
NOTE: If you encounter the warning notification – This domain is not registered with Tiny Cloud – it means that you’re running TinyMCE on your local machine and not hosted on a server. It also appears if the domain on which you’re running TinyMCE is not registered against your account. You can set this up in the TinyMCE dashboard.
You can remove the “This domain is not registered with Tiny Cloud” messages when you open your index.html file with TinyMCE on localhost using PHP or Python testing server on the command line.
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:
tinymce.init({\n selector: 'editor', \n plugins: ' ',\n toolbar: ' '\n});\n
2. Add the CRM config plugins for a CRM text entry field:
plugins: 'lists link emoticons image editimage advcode linkchecker template powerpaste tinymcespellchecker autoresize',
3. Customize the toolbar position and icons with the following:
menubar: true,\n toolbar: 'undo redo spellchecker | formatgroup | link emoticons image template tokens | code',\n toolbar_location: 'bottom',
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:
\n<html lang='en'>\n<head>\n <meta charset='utf-8'>\n <meta name='viewport' content='width=device-width, initial-scale=1'>\n<script src='https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js' referrerpolicy='origin'></script>\n <script>\n tinymce.init({\n selector: '#editor',\n plugins: 'lists link emoticons image editimage advcode linkchecker template powerpaste tinymcespellchecker autoresize',\n menubar: true,\n toolbar_location: 'bottom',\n toolbar: 'undo redo spellchecker | formatgroup | link emoticons image template tokens | code',\n });\n </script>\n</head>\n<body>\n<h1>TinyMCE Example</h1>\n <form method='post'>\n <textarea id='editor'></textarea>\n </form>\n</body>\n</html>\nPart 2 Build
How to create custom full-featured rich text fields in your CRM
TL;DR
With a basic rich text field created, and ready to add to your CRM, the second part of this tutorial covers the improvements and adaptations to make it best suited to your CRM app to protect your customer relationships.
This highlights the flexibility of our core TinyMCE WYSIWYG editor, and how (using plugins) it can be customized to suit your CRM needs, tasks and use case specifics. In this case, it protects customer relationships by catching errors in content going directly to customers – the example used is for emails.
The codepens in the following section demonstrate TinyMCE’s flexibility for CRM as a full featured rich text field.
Each of the following CRM enhancements upgrade the basic field (explained in Part 1) into a full-featured rich text field, tailored specifically for CRM users’ needs. There are multiple plugin and toolbar changes, so if you’re following along, it’s important to understand how (and why) to make each of these configuration changes.
Individually the alterations make small changes to TinyMCE, but when layered and combined, they create a CRM rich text field that positively transforms your overall customer experience, and nurtures relationships with your customers.
The following configuration changes are grouped into four areas – each one makes an important contribution to the smooth functionality of a CRM rich text field:
- Streamlined user interface
- Strict formatting for specific text entry
- Personalized CRM content (using templates and mail merge)
- Maximized productivity for content entry
These features are unlocked through specific combinations of TinyMCE core plugins, premium plugins, and other options. The following sections explain how to combine these options and plugins.
1. CRM rich text field essential: Streamline the user interface
Make sure your rich text field plays a supportive role, rather than trying to steal the show.
Why do you need to streamline the UI?
When you look closely at a CRM, they’re typically very busy software, with the information spread across 5-10 display panes. These panes describe various aspects of the customer, or enable you to take action on a single record. So it’s critical that your rich text fields maintain a minimal visual footprint, while still enabling users to perform advanced editing functions.
![](\"img-CRM-mega-email-0.png\")
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.
These configuration options and plugins help
TinyMCE blend into your CRM
They are a combination of core settings that define TinyMCE’s display and behavior
CRM rich text field user interface options explored
a. Toolbar
What the Toolbar does
The toolbar helps you apply formatting and perform other functions within your CRM.
![](\"01.png\")
Why would you need to optimize it?
Toolbar groups reduce screen clutter. They make sure there’s easy access to the most-used functions and the less-used functions are hidden away to avoid cluttering the screen.
However, rich text fields in CRMs are generally smaller than other situations. To optimize the editing experience, you can move the toolbar to the bottom of the field. This lets you jump right into the editing experience (and format only if you need to) and helps make the interface less busy.
You’ll also set up what’s called a “toolbar group”. This allows you to hide additional toolbar buttons inside a group that’s displayed when one of the main toolbar buttons is pressed. In this case, we’re hiding much of the text formatting buttons in a toolbar group we’ve defined as “formatgroup”. This helps keep the toolbar minimalistic and non-intrusive, while at the same time still providing more advanced formatting capabilities inside a second-level group of buttons.
How to set it up
1. Specify frequently used buttons in the main toolbar, and, the formatting options inside the toolbar group named “formatgroup”:
toolbar_groups: {\n formatgroup: {\n icon: 'format',\n tooltip: 'Formatting',\n items: 'blocks fontfamily fontsize | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'\n }\n }, \n
This configuration has a number of elements to know about for your toolbar groups:
- The toolbar_groups option
- The name of the group as an array
- The icon, tooltip, and items options that make up the group.
2. Move the toolbar to the bottom of the field by specifying the toolbar location:
toolbar_location: 'bottom',
3. Save the changes, and then reload the rich text field. You’ll see the optimized toolbar running in TinyMCE.
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:
…\ntinymce.init({\n selector: '#editor',\n plugins: 'lists link emoticons image editimage advcode linkchecker template powerpaste tinymcespellchecker autoresize',\n toolbar: 'undo redo spellchecker | formatgroup | link emoticons image template tokens | code',\n menubar: false, //Set to false for menubar and statusbar\n statusbar: false,\n…\n2. 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.
![](\"unnamed.gif\")
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
…\ntinymcespellchecker autoresize',\n
2. Set min_height, max_height, and autoresize_bottom_margin options:
…\n//Autoresize settings\n autoresize_overflow_padding: 20,\n max_height: 500,\n autoresize_bottom_margin: 50,\n
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:
…\n//Content Style\n content_style: `\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5rem;\n }\n\n h1 {\n font-size: 24px;\n }\n\n h2 {\n font-size: 18px;\n }\n font_size_formats: '8px 10px 12px 14px 18px',\n formats: {\n h1: {block: 'h1'},\n h2: {block: 'h2'},\n p: [\n {block: 'p'},\n {selector: 'p'}\n ],\n small: {block: 'small', styles: {fontSize: '12px', color: '#aaaaaa'}}\n },\n block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',\n `\n
4. Save the changes.
Note: In your real-world production CRM, instead of using the content_style option, use the content_css option and references a separate CSS file. This helps keep the TinyMCE configuration from becoming too crowded with lengthy strings of information.
And here’s the cumulative result – the rich text field in action, including all the UI plugins:
![](\"arrow.svg\")
Get started with TinyMCE for CRM
Start building using our CRM editor starter config and a free 14-day trial.
Or see a demo and talk to an expert
2. CRM rich text field essential: Enforce strict formatting
What is strict formatting? It means you’re controlling the data that enters your CRM and connected database. It’s a preventative measure that’s used to protect your application against costly database cleaning due to poor quality, decayed or defunct data, as well as unnecessary code. TinyMCE offers several methods to enforce strict formatting.
Why do you need to enforce strict formatting in your CRM rich text fields?
According to pre-pandemic research from Sirius Decisions (now Forrester Research), between 10% and 25% of B2B customer and prospect records include critical data errors, causing 40% of business objectives to fail. Furthermore, the cost of a bad CRM record has been estimated to be upwards of $100 per record.
Critical data errors or inaccurate data can result from a number of factors, including poor training and human error. Here, we’re going to focus on what you can control with your CRM rich text fields.
There are three main things to look for:
1. Database bloat
The more content your users create, the more code and images end up in your database. More code means larger database records, which can result in possible performance, indexing or search issues.
2. Inconsistent data capture
If people aren’t properly trained and safeguards aren’t in place, one person may enter information about a contact in a different way to another. This makes your CRM hard to search and more time spent by CRM users to figure out ‘what’s going on’ with a particular record.
3. Formatting that doesn’t render well
In the case of email and messaging, many CRMs don’t do a good job of showing the creator what their messages look like to the end recipient. This can lead to a mismatch between expectation and reality, and often leads to lower open and reply rates.
Now the issues are identified, let’s see what can be done about them with rich text fields.
These configuration options and plugins help enforce strict formatting
They are a combination of plugins that work behind-the-scenes as well as more active plugins that are accessed via the toolbar
LEARN MORE
Want to understand more about poor quality CRM data? Read:
CRM formatting plugins explored
a. Images
What the Image plugin does
Strict formatting can be a challenge to enforce for images – the Image plugin provides a solution. Along with allowing you to insert an image into the text area, the plugin also allows you to control exactly what kinds of images (by file format) can enter the rich text field.
By default, the Image plugin allows you to handle images, however, it still needs to be configured to handle uploads. While that upload process is outside the scope of this tutorial, read this article on how to set up file uploads using the cloud file management solution, Tiny Drive.
Why would you need to optimize it?
To restrict the types of images that can enter the CRM through file upload, use the images_file_types option. By default, the file types allowed are:
- jpeg
- jpg
- jpe
- jfi
- jif
- jfif
- png
- gif
- bmp
- webp
There’s one on the above list, that you definitely DO NOT want uploaded into your CRM. The bmp file type (AKA bitmaps) is known for being large, clunky and slow to load, so make sure you disallow them from being uploaded to your CRM.
How to set it up
To control the file formats entering your CRM:
1. Include the image_file_types option in the configuration:
//CRM - strict formatting\n\n//Image\nimage_file_types: '',\n
2. Include the files that you want accepted within your CRM rich text field:
//Image\nimage_file_types: 'jpeg jpg png gif',
3. Save the changes
4. Attempts to upload these file formats are now blocked
LEARN MORE
Want to inspire your users' creativity? Read
How Tiny Helped Sighten Increase Proposal Creation by 71%
How Tiny Helps Catapult's Clients Cut Down Proposal Creation Times by 90%
How Accelo Increased User Engagement to Over 85% With Tiny
b. Clean copy and paste (PowerPaste)
What PowerPaste does
Powerpaste produces 99.9% accurate copy-and-paste results from MSWord, MSExcel, Google Docs, and HTML sources.
You can confidently paste content from any of the above sources, without errors or formatting breakages that often occur with low quality copy-paste functionality. How? PowerPaste removes all the meta-data and other ‘behind the scenes’ content, and therefore also prevents bugs, mysterious white space, breaks, and formatting changes to mysteriously occur.
The result is lower support ticket numbers, thus increasing both user/creator and dev productivity.
Most importantly, it keeps the CRM database free from unnecessary HTML tags – there are no surprise formatting gremlins from other programs that can snowball and damage a database.
Why optimize PowerPaste?
Optimizing Powerpaste adds to the speed of the experience. The default behavior includes a dialog box that appears, following the paste action. The dialog asks writers to either remove formatting, or to keep it. This dialog question appears regardless of the source, whether it’s copying from MSWord, Google Docs or HTML sources.
This choice puts the power in the user’s hands, however it does add another click within the copy-paste process. In most use-cases, this is the best approach. However, in a CRM setting, the default isn’t optimized – because if your CRM users are performing hundreds of copy-pastes a day, it becomes annoying and slows them down.
Instead, make your CRM more efficient by adjusting the default PowerPaste behavior and configure it to remove or keep the formatting without requiring the user to make a choice.
To configure this option, set them to either “clean” or “merge”, but NOT “prompt”:
The supported values are:
- clean – Preserve the structure of the content such as headings, tables, and lists but remove inline styles and classes. This results in simple content that uses the site’s CSS stylesheet while retaining the semantic structure from the original document.
- merge – Preserve the inline formatting and structure of the original document. Invalid and proprietary styles, tags and attributes are still removed ensuring that the HTML is valid while more closely matching the original document formatting.
- prompt – Prompt the user to choose between the clean and merge options after attempting to paste HTML content (this is the default).
Choose the clean option, which copies over most of the structural content without messy CSS.
How to set it up
1. Add the three PowerPaste import options to the tinymce.init script
2. Specify the string “clean” as the value for each of the three options
<script>\n tinymce.init({\n selector: '#editor',\n…\n //CRM - strict formatting\n\n //Image\n image_file_types: 'jpeg jpg png gif',\n\n //Powerpaste setup\n powerpaste_word_import: 'clean', \n powerpaste_googledocs_import: 'clean',\n powerpaste_html_import: 'clean',\n…\n3. Save the changes
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: '',\nforced_root_block_attrs: {''},\n
2. Set the forced_root_block and the attributes option to the following:
forced_root_block: 'p',\nforced_root_block_attrs: {'style': 'font-size: 14px; font-family: helvetica, arial, sans-serif;'},
3. Save the changes
d. Bonus: Max length
Depending on what data is being entered in your field, you may want to enforce a character limit. For example, you may only want to allow your users to enter a contact description of maximum 2,000 characters. If this is the case, you can set the max length of any TinyMCE rich text field using this article.
In this email example, we are not setting max length as it’s not applicable to email.
Here’s how the demo looks, with all the strict formatting plugins added:
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.
These plugins enhance personalization
They are a combination of plugins that work behind-the-scenes as well as more active plugins that are accessed via the toolbar
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\n templates: [\n {\n title: ' ',\n description: ' ',\n content: ' '\n }\n ],\n
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:
templates: [\n {\n title: 'Outbound email',\n description: 'Outbound cold email for prospects',\n content: '<p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Hi [[Contact.FirstName]],</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">My name is [Sales.FirstName]] with [[Sales.Org]].</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">We help companies just like yours securely store data in the cloud. I wanted to learn how you handle data storage at [[Contact.Org]] and show you some of the exciting technology we\\'re working on.</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Are you available for a quick call tomorrow afternoon?</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">[[Sales.FirstName]]</p>'\n },\n {\n title: 'Follow-up email',\n description: 'Follow-up to be sent immediately after discovery meetings',\n content: '<p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Hi [[Contact.FirstName]],</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Thank you for taking the time to explore a potential partnership today! It felt like our product could help you solve some of the issues that you’re having within [[Contact.Org]], especially in these areas:</p><ul><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">The offsite data warehouse will allow you to guarantee business continuity</li><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Metered usage will ensure you only pay for what you consume</li><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Level III security protocols will mean you will meet security requirements for your jurisdiction</li></ul><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">I understand that now you will discuss and agree internally on the next step. Please let me know if you have any questions or if there is anything I can do to help. If not, I’ll talk to you next week.</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Best,<br>[[Sales.FirstName]]</p>'\n ],\n3. 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({\n selector: '#editor',\n plugins:\n 'autoresize lists link emoticons image editimage advcode linkchecker powerpaste tinymcespellchecker autoresize template mergetags', //mergetags added \n menubar: false,\n toolbar_location: 'bottom',\n toolbar:\n 'mergetags | undo redo spellchecker | formatgroup | link emoticons image templatetem | code',\n
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: ']]',\nmergetags_suffix: '[[',\n
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:
//MergeTags\n mergetags_prefix: '[[',\n mergetags_suffix: ']]',\n mergetags_list: [\n \n {\n title: 'Contact',\n menu: [{\n value: 'Contact.FirstName',\n \t title: 'Contact First Name'\n },\n tem {\n value: 'Contact.LastName',\n title: 'Contact Last Name'\n },\n {\n value: 'Contact.Email',\n title: 'Contact Email'\n },\n {\n value: 'Contact.Org',\n title: 'Contact Organization'\n },\n ]\n },\n {\n title: 'Business',\n menu: [{\n value: 'Sales.FirstName',\n title: 'Sales First Name'\n },\n {\n value: 'Sales.Org',\n title: 'Sales Organization'\n },\n ]\n }\n ],4. Save the changes
c. Bonus: Mentions
What the Mentions plugin does
CRMs help their users communicate quicker. They aren’t generally applicable to email within a CRM, but if we were using our rich text field to compose a message to post to a social media network or for posting internal messages, an @mention can be used to target a specific user. Using the Mentions plugin, your users can send similar notifications through an @mention and get a faster response.
How to set it up
The scope of setting up the Mentions plugin is beyond this tutorial. For a step-by-step guide, read How to get started with TinyMCE Mentions.
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.
These plugins encourage productivity
They are a combination of plugins that work behind-the-scenes as well as more active plugins that are accessed via the toolbar
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\nlink_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,\nlink_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:
link_list: [\n { title: 'Product demo', value: 'https://www.tiny.cloud/' },\n { title: 'Pricing', value: 'https://www.tiny.cloud/pricing/' },\n { title: 'Sign up', value: 'https://www.tiny.cloud/signup/' },\n {\n title: 'Case studies',\n value: 'https://www.tiny.cloud/customer-stories/',\n menu: [\n { title: 'Thomson Reuters', value: 'https://assets.ctfassets.net/sn6g75ou164i/529dmerPtej8eu8wxRFSIQ/9eeeacaf7c7f45b43db991a7064c354d/tiny-case-study-thomson-reuters.pdf' },\n { title: 'Morning Brew', value: 'https://assets.ctfassets.net/sn6g75ou164i/5Y5ETFsqsbxrn8KrfxxuSn/eba8bdd4be3b378b167bc9e9016f9206/tiny-case-study-morning-brew_1_.pdf' },\n { title: 'Accelo', value: 'https://assets.ctfassets.net/sn6g75ou164i/4Zg8kQr3vcRpwWCcjwuwTy/0363c30c76032d69d25b68a6a625126b/tiny-case-study-accelo.pdf' }\n\n ]\n }\n ],
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\n 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({\n selector: '#editor',\n plugins:\n '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
d. Emoticons and Link Checker
These two plugins don’t require any additional configuration. They give you a broader range of expression with access to an emoticon library. Link Checker saves you from sharing links that lead to non-existent websites. Load both of these plugins into the TinyMCE init script to maximize your productivity.
To add these features to your rich text field:
1. Place the Emoticons and Link Checker plugins within your init script:
plugins: 'autoresize lists link emoticons image editimage advcode linkchecker template mergetags powerpaste tinymcespellchecker',
2. Save the changes
The following shows the completed productivity settings running:
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:
<!DOCTYPE html>\n<html lang='en'>\n<head>\n <meta charset='utf-8'>\n <meta name='viewport' content='width=device-width, initial-scale=1'>\n <script src='https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js' referrerpolicy='origin'></script>\n <script>\n tinymce.init({\n selector: '#editor',\n plugins: 'autoresize lists link emoticons image editimage advcode linkchecker template mergetags powerpaste tinymcespellchecker',\n toolbar: 'undo redo spellchecker | formatgroup | link emoticons image mergetags template | code',\n menubar: false,\n statusbar: false,\n \n toolbar_location: 'bottom',\n toolbar_groups: {\n formatgroup: {\n icon: 'format',\n tooltip: 'Formatting',\n items: 'blocks fontfamily fontsize | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'\n }\n },\n \n autoresize_overflow_padding: 20,\n max_height: 500,\n \n autoresize_bottom_margin: 50,\n image_file_types: 'bmp gif',\n powerpaste_word_import: 'clean', \n powerpaste_googledocs_import: 'clean',\n powerpaste_html_import: 'clean',\n \n font_size_formats: '8px 10px 12px 14px 18px',\n formats: {\n h1: {block: 'h1'},\n h2: {block: 'h2'},\n p: [\n {block: 'p'},\n {selector: 'p'}\n ],\n small: {block: 'small', styles: {fontSize: '12px', color: '#aaaaaa'}}\n },\n\n block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',\n forced_root_block: 'p',\n forced_root_block_attrs: {'style': 'font-size: 14px; font-family: helvetica, arial, sans-serif;'},\n \n templates: [\n {\n title: 'Outbound email',\n description: 'Outbound cold email for prospects',\n content:\n '<p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Hi [[Contact.FirstName]],</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">My name is [[Contact.LastName]] with [[Contact.Org]].</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">We help companies just like yours securely store data in the cloud. I wanted to learn how you handle data storage at [[Contact.Org]] and show you some of the exciting technology we\\'re working on.</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Are you available for a quick call tomorrow afternoon?</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">[[Sales.FirstName]]</p>'\n },\n {\n title: 'Follow-up email',\n description: 'Follow-up to be sent immediately after discovery meetings',\n content:\n '<p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Hi [[Contact.FirstName]],</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Thank you for taking the time to explore a potential partnership today! It felt like our product could help you solve some of the issues that you’re having within [[Contact.Org]], especially in these areas:</p><ul><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">The offsite data warehouse will allow you to guarantee business continuity</li><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Metered usage will ensure you only pay for what you consume</li><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Level III security protocols will mean you will meet security requirements for your jurisdiction</li></ul><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">I understand that now you will discuss and agree internally on the next step. Please let me know if you have any questions or if there is anything I can do to help. If not, I’ll talk to you next week.</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Best,<br>[[Sales.FirstName]]</p>'\n }\n ],\n\n title: 'Outbound email',\n description: 'Outbound cold email for prospects',\n content:\n '<p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Hi [[Contact.FirstName]],</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">My name is [[Contact.LastName]] with [[Contact.Org]].</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">We help companies just like yours securely store data in the cloud. I wanted to learn how you handle data storage at [[Contact.Org]] and show you some of the exciting technology we\\'re working on.</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Are you available for a quick call tomorrow afternoon?</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">[[Sales.FirstName]]</p>'\n },\n {\n title: 'Follow-up email',\n description: 'Follow-up to be sent immediately after discovery meetings',\n content:\n '<p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Hi [[Contact.FirstName]],</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Thank you for taking the time to explore a potential partnership today! It felt like our product could help you solve some of the issues that you’re having within [[Contact.Org]], especially in these areas:</p><ul><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">The offsite data warehouse will allow you to guarantee business continuity</li><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Metered usage will ensure you only pay for what you consume</li><li style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Level III security protocols will mean you will meet security requirements for your jurisdiction</li></ul><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">I understand that now you will discuss and agree internally on the next step. Please let me know if you have any questions or if there is anything I can do to help. If not, I’ll talk to you next week.</p><p style=\"font-size: 14px; font-family: helvetica, arial, sans-serif;\">Best,<br>[[Sales.FirstName]]</p>'\n }\n ],\n\n mergetags_prefix: '[[',\n mergetags_suffix: ']]',\n mergetags_list: [\n {\n title: 'Contact',\n menu: [\n {\n value: 'Contact.FirstName',\n title: 'Contact First Name'\n },\n {\n value: 'Contact.LastName',\n title: 'Contact Last Name'\n },\n {\n value: 'Contact.Email',\n title: 'Contact Email'\n },\n {\n value: 'Contact.Org',\n title: 'Contact Organization'\n }\n ]\n },\n {\n title: 'Business',\n menu: [\n {\n value: 'Sales.FirstName',\n title: 'Sales First Name'\n },\n {\n value: 'Sales.Org',\n title: 'Sales Organization'\n }\n ]\n }\n ],\n link_title: false,\n link_target_list: false,\n link_list: [\n { title: 'Product demo', value: 'https://www.tiny.cloud/' },\n { title: 'Pricing', value: 'https://www.tiny.cloud/pricing/' },\n { title: 'Sign up', value: 'https://www.tiny.cloud/signup/' },\n { title: 'Case studies',\n value: 'https://www.tiny.cloud/customer-stories/',\n menu: [\n { title: 'Thomson Reuters', value: 'https://assets.ctfassets.net/sn6g75ou164i/529dmerPtej8eu8wxRFSIQ/9eeeacaf7c7f45b43db991a7064c354d/tiny-case-study-thomson-reuters.pdf' },\n { title: 'Morning Brew', value: 'https://assets.ctfassets.net/sn6g75ou164i/5Y5ETFsqsbxrn8KrfxxuSn/eba8bdd4be3b378b167bc9e9016f9206/tiny-case-study-morning-brew_1_.pdf' },\n { title: 'Accelo', value: 'https://assets.ctfassets.net/sn6g75ou164i/4Zg8kQr3vcRpwWCcjwuwTy/0363c30c76032d69d25b68a6a625126b/tiny-case-study-accelo.pdf' }\n ]\n }\n ],\n \n spellchecker_language: 'en_US',\n content_style: `\n body {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.5rem;\n }\n h1 {\n font-size: 24px;\n }\n h2 {\n font-size: 18px;\n }\n `\n });\n </script>\n <style>\n h1 {\n font-family: arial;\n }\n </style>\n </head>\n <body>\n <h1>TinyMCE CRM Rich Text Editor</h1>\n <form method='post'>\n <textarea id='editor'></textarea>\n </form>\n </body>\n </html>
A CRM rich text field for your application
A full-featured rich text field that supports your customer communication works best when it catches and corrects errors before they escalate. Don’t wait for the day when your current CRM let’s something slip past.
Make sure you set up a rich text field that has a streamlined user interface, strict formatting, personalized CRM content, and maximized productivity.
You don’t need to build the field yourself. Choose TinyMCE to get a powerful rich text field for your application so you can focus on those vital communications with your customers.
Explore the full-featured rich text field in action:
If you need more information on CRMs and TinyMCE, find out more on the CRM solutions page. And you can contact us if you have specific questions that need an answer.
Joe Robinson
Dev Advocate | Tech Writer at Tiny
Technical and creative writer, editor, and a TinyMCE advocate. An enthusiast for teamwork, open source software projects, and baking. Can often be found puzzling over obscure history, cryptic words, and lucid writing.
Di Mace
Marketing Communications Manager
Messaging strategist and copywriter whose passion lies in working with brands like Tiny, that have deep-seated values and embrace the power of their story. She gets a kick out of solving problems, loves learning new things and making stuff, every day. When she’s not thinking through clever copy lines or clarifying value propositions, she’s knitting amazing socks for everyone she knows.
John Rau
Marketing Manager at Tiny
A former developer, John works on the Marketing team at Tiny. When he's not spreading the word about TinyMCE, he enjoys taking things apart and *trying* to put them back together (including his house and anything else that looks interesting).