How to Self-host TinyMCE 6

If you’ve already tried out TinyMCE, and are making use of the Premium plugins, you might be making plans to migrate to TinyMCE 6 as a Self-hosted installation. But are there any advantages to Self-hosting?

Self-hosting gives you complete control over your rich text editor and its associated plugins. For instance, a Self- hosted rich text editor with a spell checking dictionary, provides spell checking functionality – even without an internet connection. 

So let’s explore how to install and set up TinyMCE 6 as a Self-hosted configuration, and possible issues to look out for.

Why upgrade to TinyMCE 6 with Self-hosted?

TinyMCE 6 is a major release, and brings with it significant feature updates that change the way many plugins and TinyMCE API connections work. A significant improvement is represented by the number change from TinyMCE 5 to TinyMCE 6. If the change did not offer more than fixed bugs or minor patches, the version number would not have changed. This is because TinyMCE follows strict Semantic Versioning (Semver). The final result? A faster, lightweight rich text editor. 

How to Self-host TinyMCE 6

1. Navigate to the Self-host TinyMCE Docs page

2. Click on the Download button under the Selfhosted option for Download TinyMCE Community 6.0.1 heading.

Alternatively, you can use npm to download TinyMCE 6:

npm i tinymce

If using the npm method, reference TinyMCE in your project index file using the pathway to npm packages in your environment. See the Tiny documentation for more detailed instructions about using npm, Bower, Composer, or NuGet

3. Open the .zip file in your local environment

4. Move the tinymce file into your application directory

5. Reference the application directory address in your application index.html file

<script src="/path/to/tinymce/tinymce.min.js"></script>;

Before you start your project, check your list of configured plugins. If you have any of the following plugins or options configured:

<script type="text/javascript">
  tinymce.init({
    selector: "#mytextarea",
    plugins: 'link colorpicker contextmenu hr noneditable paste print textcolor textpattern',
    toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
    link_default_protocol: 'http',
    toolbar_mode: 'scrolling',
    setup: function(editor) {
      editor.on('skinLoaded', function(e) {
         editor.notificationManager.open({
           text: 'A test notification that will close automatically after 5 seconds and has the close button disabled.',
           timeout: 5000,
           closeButton: false
         });
       });
     },
  });
  </script>

Take out the plugins and adjust the options so it looks like this:

<script type="text/javascript">
  tinymce.init({
    selector: "#mytextarea",
    plugins: 'link',
    toolbar: 'undo redo styleselect bold italic alignleft aligncenter alignright alignjustify | bullist numlist outdent indent',
    link_default_protocol: 'https',
    toolbar_mode: 'wrap',
    setup: function(editor) {
      editor.on('skinLoaded', function(e) {
         editor.notificationManager.open({
           text: 'A test notification that will close automatically after 5 seconds and has the close button disabled.',
           closeButton: false
         });
       });
     },
  });
  </script>

This will prevent any errors when upgrading to TinyMCE 6.

TinyMCE 6 Self-hosted plugin changes

If you’re investigating your TinyMCE 6 directory, you’ll notice few things have changed:

• Certain plugins are no longer found within the tinymce/js/tinymce/plugins sub-directory (see above for details). 
• Several plugins that were scheduled for deprecation during the TinyMCE 5 series have been removed as of the TinyMCE 6 release. See the TinyMCE Migration guide for more information.

Final checks for Self-hosting

1. If you haven’t already, you can sign up for a FREE API key and try out some of TinyMCE’s Premium plugins with TinyMCE 6. 
2. If you run into any points of confusion during the Self-hosted migration or you find you need  assistance with changing to a Premium version of TinyMCE when self-hosting, you can contact our support team for more information, or consult our documentation.

Find out more on our pricing plan page for even more information on what’s available with TinyMCE 6.