TinyMCE is used as the text entry component in over 100M+ products worldwide. It’s trusted by millions of developers who are creating the next generation of productivity and collaboration applications - check out examples of 9 products you can build with TinyMCE.
Among the many possibilities, TinyMCE can be used to build online word processors like Word or Google Docs.
In this article, we’re going to take a step by step look at how to configure TinyMCE for applications in which users can prepare documents online.
Start with the default config
If this is your first time using TinyMCE, let’s just take a moment to set up a simple project so you can follow along. If you’re already familiar with TinyMCE, you can jump ahead to the next section.
Create an HTML file using the following code from the TinyMCE quickstart guide, replacing no-api-key with your own Tiny API key. If you haven’t yet got an API key, you can get a free API key now.
<!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/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: "#mytextarea"
});
</script>
</head>
<body>
<h1>TinyMCE Example</h1>
<form method="post">
<textarea id="mytextarea"></textarea>
</form>
</body>
</html>Open the HTML file in a browser and the default TinyMCE editor will be displayed, initialized on the element with the same id as that specified by the selector option.
NOTE: You will be presented with a warning notification - This domain is not registered with Tiny Cloud - if you are 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 notification, open it on localhost (which is already an approved domain by default), or register your domain as an approved domain in your account.
Customize the toolbar options
TinyMCE is built to be flexible and to fit all kinds of use cases. We provide a default set of toolbar options to get you started, but you can configure it to suit just about any UX. For example, in your online word processor, you might want to provide options similar to those provided by Google Docs. The default toolbar options can be overridden using the toolbar option. Adjust the TinyMCE configuration as follows:
tinymce.init({
selector: "#mytextarea",
plugins: "print link image lists advlist",
toolbar:
"undo redo print | styleselect | fontselect fontsizeselect bold italics underline forecolor backcolor | link image | alignleft aligncenter alignright alignjustify |lineheight | numlist bullist indent outdent | removeformat",
});
Some toolbar options depend on particular plugins, in which case, you’ll need to load the corresponding plugins too. For example, here we need to load the print, link, image, lists, and advlist plugins. See the full table of toolbar buttons; “core” toolbar buttons are part of the core functionality, which means no additional plugin needs to be loaded for them to work.
Further reading:
- Read our article about customizing TinyMCE toolbar options.
- Also check out our blog post about how to emulate the Medium editor, taking advantage of additional UI features such as context toolbars and placeholder text.
- For more information and configuration options, check out the “toolbar” sections in our Tiny documentation under user interface options.
Add document margins
There are already two style sheets available out-of-the-box that provide larger margins for the TinyMCE text area - document and writer. writer provides wider margins on the left and right sides of the editable area, whereas document applies wider margins to the top and bottom as well and frames the page on a grey canvas providing an experience more like what we’re used to in applications like Word and Google Docs.
You can apply them to your editor instance using the content_css option; for example:
tinymce.init({
/* ... */ content_css: "document",
});
Alternatively, you could create your own margins. Read more in our related blog posts about margins and custom styles.
document margins.Add word count
If there’s one feature I expect as part of my word processing experience that differentiates it from other interfaces, it’s access to instant statistics about my word and character count.
This can be added to your TinyMCE configuration with the wordcount plugin:
tinymce.init({
/* ... */ plugins: "print link image lists advlist wordcount",
});
Once added, it can be accessed from the Tools menu. (You can also add a button to the toolbar.) Check out the docs for more information about configuring the Wordcount plugin.
Save and autosave
The save plugin adds a save button to the TinyMCE toolbar, which will submit the form that the editor is within. Read more about the Save plugin in our Tiny docs.
Another handy feature you can add to your online word processor is autosave. This will save the contents of TinyMCE locally for a period of time so that it can be recalled if necessary.
With the plugin come several options that determine:
- whether the editor should prompt the user to advise them that they have unsaved changes when attempting to close the current window
- the time the editor should wait between taking snapshots of the current content and saving them to local storage
- if TinyMCE should automatically restore the content stored in local storage when the editor is empty on initialization
- the duration editor content should remain in local storage
Find out more about configuring the Autosave plugin.
More plugins and features for your users
The TinyMCE core editor includes all your standard text formatting options plus 44 plugins that you can add or remove as needed to further enhance the editing experience.
These plugins include features like:
- Content options - anchors, videos, special characters, emojis, tables, tables of contents, current date/time, ...
- Document options - print, preview, save/autosave, page break, find and replace, ...
- Templates - so users can insert repeated content with the click of a button
- And lots more - scroll down to the Core Plugins on our Plugins Directory page to view the full list and read more about each one
Note that not all user options need to be displayed on the toolbar. When you add a plugin, it’s function is accessible by the menu only, unless you also add it to the toolbar explicitly. Incidentally, use of the TinyMCE menu was the topic of a recent guest post by Marty Friedel from Mity Digital.
Custom skins and icons
Tiny’s Premium Skins and Icon Packs have been designed to give you loads of options when it comes to styling the editor to match your desired UI/UX. These are included with Tiny’s new Cloud Essential plan.
For instance, we can apply the classic material skin and corresponding icons with the skin and icons config options:
tinymce.init({
/* ... */ skin: "material-classic",
icons: "material",
});
See the whole range of our premium skins and icon packs. Or create your own custom skins with our online skin tool.
Complete example
Check out the complete example on CodePen:
Other premium features
In addition to our core plugins, Tiny provides a set of premium plugins for increased productivity, compliance, and collaboration. These come with our cloud plans - start a free 14 day trial now.
Our premium plugins include features such as:
- PowerPaste - users can copy-paste content from Word, Excel, and other popular applications without bringing additional code and formatting across and breaking their content
- Format Painter - users can instantly apply content styles to other parts of their content without having to format them all over again
- Spell Checker Pro - users can easily see words that are misspelled (in up to 13 languages simultaneously) and can correct them at the click of a button via the context menu
- Comments and AtMention - users can create and reply to comments, and send notifications to other users through an @mention in the document
- Real-time collaboration - (coming soon) users will be able to collaborate on content at the same time
- And more - see all plugins
What next?
Now you know how to get started building your own online word processor; however, there really are so many possibilities to take it further from here. Why not tag us on Twitter @joinTiny with a screenshot of your TinyMCE configuration.
Contact us for more information about how to integrate and configure TinyMCE for your particular applications. We’re here to help 😎
