How-to use tinymce
How to create a word processor to rival MSWord and Google Docs: a tutorial
Published July 13th, 2022
Traditionally, productivity was easy to measure when it created or delivered physical objects – cars, boxes, tools – and those objects carried the greatest value for a business. But the rise of knowledge workers has made information the most valuable asset of every business. That means document management software and systems are critical to successful organizations across the world. And the editor interface within that software needs to be state-of-the-art.
John Rau
Marketing Manager at Tiny
Joe Robinson
Dev Advocate | Tech Writer at Tiny
Di Mace
Communications Manager at Tiny
It may sound contrary, but knowledge workers aren’t valuable because of their knowledge. Their value lies in being able to easily share their skills and information with others, using knowledge sharing best practices and initiatives. Therefore, successful businesses are increasingly reliant on efficient document management systems (DMSs) that makes every job simpler and increases their productivity.
TABLE OF CONTENTS
6.
Why a great DMS editor matters
More and more knowledge workers expect familiar, advanced editing capabilities when they’re creating documents – whether it’s in a pure DMS or in apps that serve some other function. Offering a basic rich text editor within your app no longer aids your business growth – be it this year or beyond.
To stay competitive and keep your users happy, productive, and efficient you need an experience that rivals the top players in the document creation space. That means creating a DMS with editing capabilities that rivals Microsoft Word (MSWord) and Google Docs (GDocs).
Why bother building your own DMS editor?
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 state-of-the-art rich text editor within your document management system (DMS).
1. Why not build from scratch?
You can build your own DMS-specific rich text editor (RTE) from scratch and there are numerous resources available to aid that process. However, rich text editors are 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. And costs blow out.
Our latest calculations* estimate the cost of building just the basic open source components of three leading rich text editors (excluding advanced features and plugins) varies between US$15M and US$28M. While the time taken ranges from 115 to 220 person-years for a single developer. There must be a better way.
(*as at July 2022)
2. Why build at all? Can’t you buy what you need?
You can, which is why TinyMCE has been engineered so that it’s adaptable to you and your needs. Everything you need is provided 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, to make it easier for you to get started, along with detailed documentation and support.
Essentials to start building your DMS editor
This tutorial guides and provides the tools needed to construct a DMS editor that uses the core TinyMCE rich text editor, upgraded to include advanced features. The tutorial contains:
- Background explanations
- Step-by-step procedures
- Working code you can test.
The step-by-step explanations show you how to configure TinyMCE to create a base DMS editor, and the working code shows how the addition of plugins results in an editing experience that rivals MSWord and GDocs.
Before proceeding, we’ve assumed that you know:
- Basic word processing fundamentals, using any text editor
- How to create directories and files
- How to navigate through different directories
- Internet browsing using popular browsers like Chrome, Safari, or Firefox
- Running a local server with a command like python3 -m http.server 8000 for example
Build your own word processor by expanding on this starter config/demo
TinyMCE is a versatile component. It’s so versatile, that building these 9 products covers just a fraction of its possible uses. The outcome of this tutorial is to build a rich text editor that’s customized to the needs of a document management system (DMS) text editor.
Part one focuses on building an online word processor, using TinyMCE core editor as the base. Part two ramps up that base word processor’s capabilities with the addition of plugins, to engineer an editing experience that rivals MSWord or GDocs – one that can be integrated into either your new or existing DMS.
Ready? Let’s start…
Background/Part 1
Knowing the core features of a word processor
MSWord and GDocs are word processors, with WYSIWYG (‘What You See is What You Get’) capabilities.
A word processor user interface (UI) that has WYSIWYG capabilities, shows the end product that’s produced. This means when you’re entering or editing text and/or inserting images and seeing them in the UI, it exactly matches how the final product looks. There’s no need to consider 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. It translates your writing into HTML, CSS, and the other elements that a web browser uses and understands.
A DMS needs a solid word processor that provides a frictionless user experience. Therefore basic word processors should (at minimum) provide:
- Multiple fonts
- List formatting
- Text level formatting (bold, italics, headings)
While complete word processors must provide composition abilities, saving, editing, and printing as well as:
- Auto save
- Link checking
- Spell checking and grammar checking
- Exporting and printing
Beyond this, there are other advanced features also worth applying to your DMS.
Background/Part 2
Knowing the core features of a DMS-specific editor
Before you go down the rabbit-hole of trying to select use case-specific features to transform your DMS editor into one that rivals MSWord and GDocs, take a close look at the DMS starter configuration that appears below.
It’s been specifically built to make your setup easier, quicker and it includes all the must-have features of every great DMS setup. The list of TinyMCE plugins configured in the DMS starter, is extensive:
tinymce.init({
selector: "#editor",
plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link
media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist
wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap tinycomments linkchecker emoticons advtable
export print autosave",
Each TinyMCE plugin that’s included in the DMS starter config, contributes essential capabilities to your editor and takes it from a basic word processor, to a market rivaling DMS editor. For instance, there are productivity enhancements as well as layout, design and collaboration features (see Part 2 Build) available to expand your DMS editor.
The below demo draws content from the TinyMCE DMS starter config.
Part 1 Build
How to create a basic word processor with TinyMCE
TL;DR
Part 1 of this step-by-step tutorial makes changes to the primary TinyMCE configuration, as described in the previous paragraphs. To follow along with each change, simply review each of the codepens.
In Part 2, a more advanced DMS-specific demo highlights the flexibility of our core TinyMCE WYSIWYG editor, and how (using various plugins) it can be customized to suit your DMS word processing needs, tasks and use case specifics.
To get the most out of this tutorial, return to this section and try working on your own demo within your development environment.
The following steps in Part 1, explain how to set up TinyMCE in your development environment, with the primary aim of using it for basic word processing tasks. Here’s how to get started:
Step 1
Start with the default config
If you haven’t yet got an API key you can get a free API key now, and access all the premium features to make your WYSIWYG word processor
Replace the no-api-key segment in the TinyMCE started script with your own Tiny API key. Here’s an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: "#editor"
});
</script>
</head>
<body>
<h1>TinyMCE Example</h1>
<form method="post">
<textarea id="#editor"></textarea>
</form>
</body>
</html>
Open the HTML file in a browser.
The default TinyMCE editor appears. It’s initialized on the textarea element through the “editor” id.
NOTE: You’ll be presented with a warning notification – This domain is not registered with Tiny Cloud – if you’re running TinyMCE on your local machine outside of a web server, or if the domain on which you’re running TinyMCE is not registered against your account.
To remove the message This domain is not registered with Tiny Cloud, open your index.html file with TinyMCE on localhost using PHP or Python testing server on the command line.
If you already have a website that you’re aiming to run with TinyMCE, take a minute to register your domain as an approved domain in your account.
Step 2
Customize the default toolbar options for word processing
The following steps change the plugins and the TinyMCE toolbar several times. If you’re following along, it’s important to know how to make these configuration changes.
Add the “plugins” and “toolbar” options in your tinymce.init script:
Why adjust the default toolbar?
Adjusting the toolbar appearance is a skill that needs to be mastered, before you can create a word processing editing experience that rivals MSWord and GDocs
tinymce.init({
selector: "editor",
plugins: " ",
toolbar: " "
});
Add the following plugins from the DMS config:
plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export print autosave",
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
Save the changes, and reload your project in your browser.
NOTE: Some toolbar options depend on particular plugins, so you’ll need to load the corresponding plugins too. For example, in the code snippet at step 2, we need to load the print, link, image, lists, and advlist plugins.
Toolbar buttons cheatsheet
A complete table of toolbar buttons is available. ‘Core’ toolbar buttons are part of the core functionality, which means no additional plugin needs to be loaded for them to work.
Step 3
Add custom skins and icons to your TinyMCE-powered word processor
If you’d like your TinyMCE word processor to have a custom look (and/or you want to test our custom skins before ramping up to the DMS-style editor), the Premium Skins and Icon Packs are designed to give you loads of options when it comes to styling the editor, or matching your desired UI/UX. They’re included in Tiny’s Professional plan.
Here’s an example:
Add the “skin” and “icon” options to your tinymce.init script”:
tinymce.init({
/* ... */
skin: ,
icons:
Apply the material outline skin and corresponding icons (based on Material Design) with the skin and icons config options:
tinymce.init({
/* ... */
skin: 'material-outline',
icons: 'material',
});
Add some word processor style to the demo with the following CSS, using the content_css option. The CSS below displays the editor contents within a page outline at desktop resolutions, then degrades to a responsive view that adapts to the screen width at lower resolutions. Normally, editor CSS would be stored in an external file, but for the sake of this tutorial we’ve included the styles inline:
tinymce.init({
/* ... */
skin: 'material-outline',
icons: 'material',
content_style:`
body {
background: #fff;
}
@media (min-width: 840px) {
html {
background: #eceef4;
min-height: 100%;
padding: 0 .5rem
}
body {
background-color: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, .15);
box-sizing: border-box;
margin: 1rem auto 0;
max-width: 820px;
min-height: calc(100vh - 1rem);
padding:4rem 6rem 6rem 6rem
}
}
`
});
Save the changes.
Step 4
The final result – a basic word processor
You’ve now set up a basic word processor, using TinyMCE. Here’s the complete code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: "#editor",
plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export print autosave",
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat",
skin: 'material-outline',
icons: 'material',
content_style:`
body {
background: #fff;
}
@media (min-width: 840px) {
html {
background: #eceef4;
min-height: 100%;
padding: 0 .5rem
}
body {
background-color: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, .15);
box-sizing: border-box;
margin: 1rem auto 0;
max-width: 820px;
min-height: calc(100vh - 1rem);
padding:4rem 6rem 6rem 6rem
}
}
`
});
</script>
</head>
<body>
<h1>TinyMCE Example</h1>
<form method="post">
<textarea id="editor"></textarea>
</form>
</body>
</html>Part 2 Build
How to customize a word processor for a DMS (with MSWord and GDocs-like features)
TL;DR
In this second part of the step-by-step tutorial, the changes made transform the basic word processor (explained in Part 1) into a more advanced editor that’s been specifically designed for use in a DMS.
It highlights the flexibility of our core TinyMCE WYSIWYG editor, and how (using plugins) it can be customized to suit your DMS word processing needs, tasks and use case specifics.
To follow along with each change, simply review each of the codepens.
Each of the following DMS demos upgrade the basic word processor (explained in Part 1) into an advanced, document management editing experience. 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 the basic word processing editor, but when layered and combined, they create a DMS editor that positively transforms your workflows, eliminates inefficiencies and creates a MSWord and GDocs-like editing experience.
The suggested configuration changes are grouped into four areas – each is an important consideration within any efficient document management system:
- Productivity
- Layout
- Creativity
- Collaboration
1. DMS editor essential: Maximize productivity
Increase both your users and developers productivity by including features designed to help them easily track, retrieve, edit and access information.
Why do you need productivity plugins?
Since the 1950s, the productivity of knowledge workers has been under the microscope. More recently, numerous experiments aimed to identify the optimal workday and workweek length. A 2021 article in ‘WIRED’ touted a 5-hour workday, and noted that “Research indicates that five hours is about the maximum that most of us can concentrate hard on something.”
Whether it's a compressed 5-hour or the widely accepted 8-hour day, everyone’s productivity drops when the tools provided fail to build efficiencies or don’t maximize the available time. So it’s imperative to make sure your DMS users can get their work done in the most efficient, and effective way possible.
By providing a DMS editor that carries features aimed at sharpening their productivity, you're adding velocity to every workday. An advanced editor – with hundreds of customizations, allows you (with absolute granularity) to manage how each feature, function or control behaves. Ultimately, this leads to unmatched productivity gains for your users.
Want to improve your developers’ productivity? Read
How TalentMap saved hundreds of thousands of dollars with Tiny
How TinyMCE Helped HYPE Innovation Cut Support Tickets by 50%
How DST Systems Slashed Their Development Time in Half With Tiny
These plugins enhance your users productivity
The most popular ones are included in the toolbar of the DMS starter config, while others can be easily accessed using the menu.
PowerPaste
Spell Checker Pro
Linkchecker
Accessibility Checker
Autolink
Search and Replace
Wordcount
Case Change
Permanent Pen
Format Painter
Insert Date/Time
Export
AutoSave
Help
DMS Productivity plugins explored
a. PowerPaste defaults
What PowerPaste does
PowerPaste produces 99.9% accurate copy-and-paste results from MSWord, MSExcel, Google Docs, and HTML sources.
It automatically cleans the content so that all the meta-data and other hidden ‘behind the scenes’ content is removed. There’s also no bugs, breaks, mysterious white spaces or formatting that appears from nowhere – PowerPaste clears these nuisances away, which lowers the number of support tickets, thereby increasing both user/creator and dev productivity.
Why would you need to optimize it?
PowerPaste comes pre-configured, out-of-the-box with defaults that put the user in control of how they want to copy-paste content. The default behavior, when copying from MSWord, Google Docs or HTML sources, is to prompt the user whether they want to keep or remove the formatting in the pasted content.
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 DMS setting, the default isn’t optimized – because if your DMS users are performing hundreds of copy-pastes a day, it becomes annoying and slows them down.
Make your DMS users 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.
The options are:
And 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. This also has the added advantage of copying over content that fits better within your DMS’s look and feel.
How to set it up
Add the three PowerPaste import options to the tinymce.init script
Specify the string “clean” as the value for each of the three options
<script>
tinymce.init({
selector: "#editor",
…
//DMS Productivity
//PowerPaste
powerpaste_word_import: 'clean',
powerpaste_googledocs_import: 'clean',
powerpaste_html_import: 'clean',
…
Save the changes
b. Spell Checker Pro and languages
What Spell Checker Pro does
Spell Checker Pro adds spell checking as-you-type capabilities to your DMS, similar to what your users would experience in other word processor-like tools. By default, Spell Checker Pro uses English US dictionaries, and automatically highlights spelling mistakes. If that’s sufficient for your DMS use case, you can stop there, but there are other options if you require multi-language spell checking.
Why would you need to optimize it?
TinyMCE’s Spell Checker Pro can be configured to simultaneously spell check across (up to) 38 languages in the same document. User’s can choose which languages they need to check and, if you want more choice on how and when it activates, there are additional configurations you can make.
For example, if your DMS needs to support cross-team-cross-country collaboration, your users may need spell checking in European languages. And, with the addition of one toolbar button, you can switch automatic spell checking on and off as needed.
How to set it up
To set up spellchecker_language:
Make a list of required languages and the language codes needed – using the Supported Languages table in the TinyMCE docs.
Arrange the list with the following format: English (United Kingdom)=en_GB,Danish=da,French=fr,German=de,Italian=it,Polish=pl,Spanish=es,Swedish=sv
Add the spellchecker_active option, spellchecker_language option, and spellchecker_languages option to your config. Set the spellchecker_active option to true, and paste in your language list as a string in single quote marks:
<script>
tinymce.init({
selector: "#editor",
…
//DMS Productivity
//PowerPaste
powerpaste_word_import: 'clean',
powerpaste_googledocs_import: 'clean',
powerpaste_html_import: 'clean',
//Spellchecker Pro
spellchecker_active: true,
spellchecker_language: 'en_US',
spellchecker_languages: 'English (United Kingdom)=en_GB,Danish=da,French=fr,German=de,Italian=it,Polish=pl,Spanish=es,Swedish=sv',
…
Add the spell checker and language options to the toolbar:
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat | spellchecker language |",
Save the changes.
c. Autosave default behavior
What Autosave does
It happens all the time – you spend hours working on a project and accidentally close the tab. You’ve lost your work. Autosave plugin gives your users an in-editor warning if there’s unsaved changes, and stores a backup of the content to local browser storage.
Why would your DMS editor need it?
While your DMS likely has an autosave, or at the very least a manual save feature of its own, what happens if your user’s on a flight or their connection drops out? Autosave catches the content: that’s the magic of local browser backup.
Autosave has a setting called autosave_restore_when_empty that restores the content saved in local storage, when the editor’s empty on initialization. This is extremely useful when your connection drops out and you need to reload the page. No need to dig for a ‘Restore last draft’ button from the menu – they can simply refresh the page, the most recent backup appears, and they can continue where they left off.
How to set it up
Add the autosave restore when empty option to the tinymce.init options, and set it to ‘true’:
//PowerPaste
powerpaste_word_import: 'clean',
powerpaste_googledocs_import: 'clean',
powerpaste_html_import: 'clean',
//Spellchecker Pro
spellchecker_active: true,
spellchecker_language: 'en_US',
spellchecker_languages: 'English (United Kingdom)=en_GB,Danish=da,French=fr,German=de,Italian=it,Polish=pl,Spanish=es,Swedish=sv',
//Autosave
autosave_restore_when_empty: true,
Set the autosave_interval option to create a backup to local browser storage
The syntax for the interval option is a string in single quote marks, with the time units written as a letter, in this case ‘s’ for seconds. The default value is 30 seconds:
//Autosave
autosave_restore_when_empty: true,
autosave_interval: '30s',
Save the changes
d. Accessibility Checker
What does Accessibility Checker do?
Accessible content has become more than a nice-to-have. With the Accessibility Checker, your users can save time double and triple checking they’ve met the agreed accessibility requirements, and avoid unnecessary fines or legal action.
The plugin checks all content in the text editor content, and makes sure the content aligns with accessibility and regulatory standards. Checks are made using the requirements put forward by the Web Content Accessibility Guidelines (WCAG) as well as standards from Section 508 of the United States Environmental Protection Agency.
Accessibility Checker reports and flags any issues. The report walks the user through each issue to help clarify exactly what needs attention, to make sure your content can be accessed by anyone, and save time running through confirmation steps and reviews.
Why would you need to optimize it?
Because there are different degrees of accessibility compliance, and different content authors and audiences may likewise require different levels of compliance. Depending on the kind of content your customers create, you can control the level of accessibility needed, by configuring the accessibility plugin to only test for what’s required.
How to set it up
Are there different levels of accessibility?
Levels of accessibility are defined by WCAG as levels of conformance, and are sorted into three categories: a, aa, or aaa. WCAG offers more guidance on understanding the levels of conformance.
Check the list of Accessibility Rules, and select a level of accessibility compliance: either a, aa, or aaa are the accepted values for the Accessibility Checker plugin options.
Include the Accessibility Checker plugin in the list of configured plugins:
plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export print autosave a11ychecker"
Configure the Accessibility Checker html version, and the level of conformance selected in step 1:
...
//Autosave
autosave_restore_when_empty: true,
autosave_interval: '30s',
//Accessibility Checker
a11ychecker_html_version: 'html5',
a11ychecker_level: 'aaa',
...
Add the Accessibility Checker button to the Toolbar:
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight | checklist bullist numlist indent outdent | removeformat | spellchecker language | a11ycheck ",
Save the changes.
What does the big picture look like? The following codepen shows the productivity options configured and running:
See the Pen
DMS - Productivity by TinyMCE (@tinymce)
on CodePen.
2. DME Editor essential: Enhanced layout
Enable your users to create documents using features they know and love.
Why do you need layout plugins?
A Finances Online 2022 study noted that knowledge workers lost 50% of their time preparing documents. With so much time spent creating documents, you need to ensure users have familiar tools that increase their efficiency. This translates into DMS editor features that help them easily and quickly lay out their documents in logical ways, as efficiently as possible (and limiting the dev support needed).
On the flipside, you also want to ensure your users can’t create content that is not supported by your DMS. TinyMCE’s customizable toolbar, menu bar and hundreds of other options let you do this easily – making sure the content saves to your database without any loss of formatting.
These plugins give your users ultimate control over their document layout
The most popular ones are included in the toolbar of the DMS starter config, while others can be easily accessed using the menu.
Tables
Advanced Tables
Table of Contents
Lists
Advanced List
Checklists
Visual Blocks
Visual Characters
Page Break
Nonbreaking Space
Anchor
Advanced Code Editor
DMS Layout plugins explored
a. Page Break separator
What Page Break does
Your DMS needs to understand how your users work. That means it needs to be able to handle the long, multi-page documents that are required in legal and regulatory situations. Similar to MSWord or Google Docs, the Page Break plugin allows users to add page breaks within their documents..
Why would you need to optimize it?
Once the plugin is installed, by default, when users click the Page Break button, the following HTML comment is added: “<!-- pagebreak -->". To make it work with your DMS editor, you can take it one step further by configuring the plugin and setting the pagebreak_separator option to insert the HTML code your DMS recognizes as a page break.
How to set it up
Add the Page Break plugin to the toolbar. This configuration groups the plugin with the alignment and line height options:
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight pagebreak | checklist bullist numlist indent outdent | removeformat | spellchecker language | a11ycheck ",
Configure a custom page break HTML that your DMS will recognize when rendering documents. As an example: a <div> element with the class “break”:
//DMS - Layout
//Pagebreak
pagebreak_separator: '<div class="break"></div>',
Save the changes
b. Table of Contents
What Table of Contents does
The Table of Contents plugin generates a table of contents from the headers found within a document – faster and easier than copying headings and structuring your own Table of Contents (ToC). It’s a vital DMS feature that saves time, making navigation easier and documents more scannable.
Why would you need to optimize it?
To make it work with your DMS, you’ll want to change some of the default settings. By default, the ToC is three levels deep – in other words it will display items from headings H1, H2 and H3. Since DMS users generally create long, deep documents, you can customize the table of contents depth to be one step further – to four levels.
How to set it up
Add the table of contents button to the toolbar. This configuration places it next to the pagebreak button:
toolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify lineheight pagebreak tableofcontents | checklist bullist numlist indent outdent | removeformat | spellchecker language | a11ycheck ",
Add the table of contents depth configuration to setup four levels:
//DMS - Layout
//Pagebreak
pagebreak_separator: '<div class="Break0"></div>',
//Table of Contents
tableofcontents_depth: 4,
Save the changes
And here’s the editor in action, including all the layout plugins:
3. DMS Editor essential: Empower creativity
Give your users the tools they need to exercise their creative freedom while making the documents they need to complete their work.
Why do you need creativity plugins?
These features are all about empowering your users to express themselves. They let users convey thoughts and messages using different media formats, as well as other communication styles 😀 that go beyond text-based words.
Ultimately, the inclusion of these features makes your DMS editing experience more enjoyable, comfortable and as familiar as many of the other web apps or social networks your users are likely already using. This familiarity leads to greater engagement with the platform, increased usage and frequency of interaction with your DMS.
Get started with TinyMCE for DMS
Start building using our DMS editor starter config and a free 14-day trial. Or see a demo and talk to an expert
These plugins empower the creativity of your users
The most popular ones are included in the toolbar of the DMS starter config, while others can be easily accessed using the menu.
Image
Enhanced Image Editing
Media
Enhanced Media Embed
Emoticons
Page Embed
Code Sample
Character Map
DMS Creativity plugins explored
a. Image file types
What Image plugin does
The Image plugin enables the user to insert an image into TinyMCE’s editable area. The plugin also adds a toolbar button and an ‘Insert image’ or ‘Edit image’ menu item under the Insert menu.
By default, the Image plugin allows you to add images to the editor, but it still needs to be configured to handle uploads. While that’s outside the scope of this article, we recommend reading this article on how to set up file uploads using the cloud file management solution, Tiny Drive.
Why would you need to optimize it?
In addition to configuring your file upload provider (see above link), you’ll want to restrict the types of images your users can upload, using images_file_types.
By default, the allowed file types 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 DMS. 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.
How to set it up
Here’s how to banish bmp file types from your DMS:
Include the image file types option in the configuration:
//DMS - Creativity
//Image
images_file_types: 'jpeg jpg png gif',
Save the changes
Attempts to upload a bitmap format file are now blocked and only the specified files can be uploaded
b. Enhanced Media Embed & Page Embed
What Enhanced Media Embed and Page Embed does
The DMS starter config comes preloaded with Enhanced Media Embed and Page Embed, which lets users embed rich media like YouTube videos, social media posts, and other web pages into their content. Both plugins save the time that would otherwise be wasted on copy-pasting content.Why would you need to optimize it?
Enhanced Media and Page Embed makes sure third-party content is always up to date (ie. it’s dynamic content). And most importantly, the plugins create a more immersive document reading experience, which measurably improves the level of engagement with the document and/or content.
But to ensure the reading experience behaves as expected, some further embed configuration helps to sharpen the experience. On the screens of your DMS that actually render your final documents, you need to add CSS styles specific to both plugins, to ensure the content is rendered properly.
How to set it up
By adding the following code to the views in your DMS that render documents, your users’ embedded document content will render as it does in the editor.
NOTE: To be clear, we are not suggesting you add the below CSS to your DMS config, but rather to the views within your DMS that render documents.
i) CSS for rendering Enhanced Media Embed blocks (source):
.ephox-summary-card {
border: 1px solid #AAA;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
padding: 10px;
overflow: hidden;
margin-bottom: 1em;
}
.ephox-summary-card a {
text-decoration: none;
color: inherit;
}
.ephox-summary-card a:visited {
color: inherit;
}
.ephox-summary-card-title {
font-size: 1.2em;
display: block;
}
.ephox-summary-card-author {
color: #999;
display: block;
margin-top: 0.5em;
}
.ephox-summary-card-website {
color: #999;
display: block;
margin-top: 0.5em;
}
.ephox-summary-card-thumbnail {
max-width: 180px;
max-height: 180px;
margin-left: 2em;
float: right;
}
.ephox-summary-card-description {
margin-top: 0.5em;
display: block;
}ii) CSS for rendering Page Embed blocks (source):
.tiny-pageembed--21by9,
.tiny-pageembed--16by9,
.tiny-pageembed--4by3,
.tiny-pageembed--1by1 {
display: block;
overflow: hidden;
padding: 0;
position: relative;
width: 100%;
}
.tiny-pageembed--21by9 {
padding-top: 42.857143%;
}
.tiny-pageembed--16by9 {
padding-top: 56.25%;
}
.tiny-pageembed--4by3 {
padding-top: 75%;
}
.tiny-pageembed--1by1 {
padding-top: 100%;
}
.tiny-pageembed--21by9 iframe,
.tiny-pageembed--16by9 iframe,
.tiny-pageembed--4by3 iframe,
.tiny-pageembed--1by1 iframe {
border: 0;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}Here’s how the demo looks, with all the creativity plugins added:
4. DMS Editor essential: Encourage collaboration
Help your users be more productive and produce better outcomes with collaborative editing tools.
Why do you need collaboration plugins?
Tools that enable collaboration have been shown to drive 10% increases in productivity, while numerous other studies on collaboration have shown correlations between its usage and enhanced business processes as well as improved employee satisfaction. It’s no wonder Google Docs and MSWord have collaboration baked in. To maximize your productivity and team alignment, it’s important to include collaborative capabilities within your DMS editor.
These plugins encourage collaboration
and team alignment
Some are included in the toolbar of the DMS starter config, while others can be easily accessed using the menu.
Comments
Mentions
DMS Collaboration plugins explored
a. Comments
What Comments plugin does
The Comments plugin introduces threaded conversations directly in your app or product. It invites deeper discussion on different parts of a document – within the editor – and provides a more contextual and immersive collaboration experience.
Comments comes with an out-of-the-box client-side storage solution where the comments are stored in the content, or you can build your own storage solution tailor-made for your workflow.
Why would you need to optimize it?
You can configure comments in two ways:
- Callback Mode – This mode is used to store the comments outside the content on a server, such as a database. This mode requires a number of callback functions to handle comment data
- Embedded Mode – This mode stores the comments within the content. No callbacks need to be configured for this mode.
The DSM starter configuration explores Embedded mode, which stores the comment data within the DMS editor contents. Comments are saved to your DMS, along with the document in embed mode. Your DMS can then filter out the comments when rendering the document contents.
How to set it up
Step 1
Set the current author
In the Embedded mode config, you need to specify who the author is, using tinycomments_author:
- The author’s unique ID
- The author’s name (with tinycomments_author_name)
- Optional – the author’s display name
Add the tiny comments plugin to the list of plugins:
plugins: "powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export print autosave tinycomments",
Include the comments options in the toolbar:
vtoolbar: "undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | | alignleft aligncenter alignright alignjustify lineheight pagebreak tableofcontents | checklist bullist numlist indent outdent | removeformat | spellchecker language | addcomment showcomments |"
Set up your config to load the current user’s username and display name into the config, for example:
tinycomments_mode: 'embedded',
tinycomments_author: 'author',
Save the changes
Step 2
Set the current author’s permissions
Within MS Word and Google Docs when you’re writing and resolving comments, the author who wrote the comment can resolve the comment. No one else can (except maybe an admin). To allow authors similar control of their own comments, you need to adjust the permissions with TinyMCE.
TinyMCE has a function called tinycomments_can_resolve for comment resolution control.
Here’s how to set up the function so that the author in the example can resolve their comments:
Set up two constants above the tinymce.init script:
const activeDMSAuthor = ‘author’;
const activeDMSAdmin = ‘Admin0’;
Change the tinycomments author variable to reference the new constant, and add an author name for the demo:
//DMS - Collaboration
tinycomments_mode: 'embedded',
tinycomments_author: activeDMSAuthor,
tinycomments_author_name: 'DMS Person',
Include the tinycomments can resolve option, and set it’s value as a (req, done, fail) parameters:
//DMS - Collaboration
tinycomments_mode: 'embedded',
tinycomments_author: activeDMSAuthor,
tinycomments_author_name: 'DMS Person',
tinycomments_can_resolve: (req, done, fail) => {
done({
});
},
Set up a constant called ‘allowed’, and specific required conditions to form a callback. This sets the requirements that the tiny comments can result function needs to determine which user can resolve a comment:
tinycomments_can_resolve: (req, done, fail) => {
const allowed = req.comments.length > 0 &&
req.comments[0].author === activeDMSAuthor;
done({
});
},
Set the Done contents with the canResolve function, and the allowed const, to grant the current author the ability to resolve and edit comments, which are admin abilities granted to the current author:
const allowed = req.comments.length > 0 &&
req.comments[0].author === activeDMSAuthor;
done({
canResolve: allowed || activeDMSAuthor === activeDMSAdmin,
});
},
Save the changes. The current user now has the ability to resolve and edit comments they create in the DMS demo.
b. Mentions
What Mentions Plugin does
Your users communicate every day using an @mention on social networks, and they similarly expect to be able to use them when creating content in your DMS. With the Mentions plugin enabled, users can send notifications through an @mention in the editor content. Planning to share documents? The Mentions plugin can even help you cross-link documents by setting up your DMS to allow users to choose from a list of structured data to share.
With Mentions enabled within your DMS, you can bring collaborative functionality into your product, facilitate faster reviews and stimulate interactions between content creators.
How to set it up
Setting up mentions requires time – beyond what this article has available – which is why there is an article specific to setting up mentions. For a step-by-step guide, read How to get started with TinyMCE Mentions.
5. The final result: A DMS editor powered by TinyMCE and advanced plugins
All the above suggested components work together to build a market rivaling DMS editor. The editor provides your knowledge workers with the tools needed to be more efficient, have greater creative control, and to achieve collaborative alignment.
Here’s how the final tinymce.init script appears without comments:
const activeDMSAuthor = 'author';
const activeDMSAdmin = 'Admin0';
tinymce.init({
selector: '#editor',
plugins: 'powerpaste casechange searchreplace autolink directionality advcode visualblocks visualchars image link media mediaembed codesample table charmap pagebreak nonbreaking anchor tableofcontents insertdatetime advlist lists checklist wordcount tinymcespellchecker editimage help formatpainter permanentpen charmap linkchecker emoticons advtable export print autosave a11ychecker tinycomments',
toolbar: 'undo redo print spellcheckdialog formatpainter | blocks fontfamily fontsize | bold italic underline forecolor backcolor | link image | | alignleft aligncenter alignright alignjustify lineheight pagebreak tableofcontents | checklist bullist numlist indent outdent | removeformat | spellchecker language | a11ycheck | addcomment showcomments',
height: '700px',
toolbar_sticky: true,
icons: 'thin',
powerpaste_word_import: 'clean',
powerpaste_googledocs_import: 'clean',
powerpaste_html_import: 'clean',
spellchecker_active: true,
spellchecker_language: 'en_US',
spellchecker_languages: 'English(United Kingdom)=en_GB,Danish=da,French=fr,German=de,Italian=it,Polish=pl,Spanish=es,Swedish=sv', autosave_restore_when_empty: true,
autosave_interval: '30s',
a11ychecker_html_version: 'html5',
a11ychecker_level: 'aaa',
pagebreak_separator: '<div class="Break0"></div>',
tableofcontents_depth: 4,
images_file_types: 'jpeg jpg png gif',
tinycomments_mode: 'embedded',
tinycomments_author: activeDMSAuthor,
tinycomments_author_name: 'DMS Person',
tinycomments_can_resolve: (req, done, fail) => {
const allowed = req.comments.length > 0 &&
req.comments[0].author === activeDMSAuthor;
done({
canResolve: allowed || activeDMSAuthor === activeDMSAdmin,
});
},
});A great DMS editor adds velocity to your team’s productivity
Using TinyMCE to build a basic word processor that's powered up through the addition of advanced features, it adds velocity to your teams’ work day. They can achieve more, with less effort and dependency on your support team.
Try the completed demo to see the DMS features in action:
If you’re looking for more information on DMSs and TinyMCE, read more on the DMS solutions page. For a direct query, contact us to find the answer.
Related Articles
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.