How to install

Install TinyMCE 6 as self-hosted plugin: guide with code samples and screenshots

This quick start guide will walk you through the process of effortlessly adding a TinyMCE editor to your web page utilizing the convenience of a TinyMCE .zip package.

Step-by-step TinyMCE 6 installation

Step 1: Download TinyMCE

Download the latest official build of TinyMCE. You can select either the Community edition or the Professional edition, depending on the features you require.

Step 2: Connect TinyMCE to the page

After downloading the TinyMCE package, extract the files and place them in the desired directory within your website's file structure.

Open the HTML file where you want to use TinyMCE for content editing. Add the following script tag in the <head> section of your HTML file:

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

Replace path/to/ with the actual path to the location of the tinymce.min.js file on your server.

Step 3: Initialize TinyMCE

To enable TinyMCE on specific text areas or elements, you need to initialize it.

For instance, if you want to connect TinyMCE to textarea:

<textarea id="editor">
    <h2>TinyMCE 5 editor</h2>
    <p>Edit this content with TinyMCE 5 editor installed</p>
</textarea>

Then your initialization code should be as follows:

<script>
    tinymce.init({
        selector: "#editor",
    });        
</script>

Here, the value of the selector parameter is a CSS selector of the element you want to connect TinyMCE to. In this example, we locate it using the id attribute, so we start the value of the selector with #. If you want to locate a text box by its class, the value should be something like .classname.

After successful install, you should see the editor on your page: TinyMCE 6 installed screenshot

Step 4: Configure the TinyMCE toolbar

It's time to configure your TinyMCE. If you used TinyMCE Builder on the first step, your toolbar is already configured. Nevertheless, you still can make manual changes to it.

Toolbar buttons are selected using the toolbar parameter:

tinymce.init({
    selector: "#editor",
    
    plugins: "link lists searchreplace fullscreen hr print preview " + 
             "anchor code save emoticons directionality spellchecker",
    
    toolbar: "cut copy | undo redo | styleselect searchplace formatselect " + 
             "link | fullscreen | bold italic underline strikethrough " + 
             "| forecolor backcolor | removeformat | alignleft aligncenter " + 
             "alignright alignjustify | bullist numlist outdent indent " + 
             "| removeformat | blockquote hr anchor print spellchecker " + 
             "| preview code save cancel | emoticons ltr rtl"
             
});

Here, as an example we list most of existing buttons available in the standard TinyMCE 6 package.

Please note that some buttons are in the TinyMCE core, while others are provided by standard TinyMCE add-ons. Put these add-ons to the plugins section to make them appear on the toolbar.

Additional customization (optional)

If you want to customize TinyMCE's functionality, you can add additional configuration options within the tinymce.init() function. Refer to the TinyMCE documentation for a comprehensive list of configuration options.

Congratulations! You have successfully installed TinyMCE 6 on your website, allowing you and your users to enjoy a powerful and user-friendly content editing experience.