How to install
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 manual
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
:
1<textarea id="editor">
2 <h2>TinyMCE 5 editor</h2>
3 <p>Edit this content with TinyMCE 5 editor installed</p>
4</textarea>
Then your initialization code should be as follows:
1<script>
2 tinymce.init({
3 selector: "#editor",
4 });
5</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:
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:
01tinymce.init({
02 selector: "#editor",
03
04 plugins: "link lists searchreplace fullscreen hr print preview " +
05 "anchor code save emoticons directionality spellchecker",
06
07 toolbar: "cut copy | undo redo | styleselect searchplace formatselect " +
08 "link | fullscreen | bold italic underline strikethrough " +
09 "| forecolor backcolor | removeformat | alignleft aligncenter " +
10 "alignright alignjustify | bullist numlist outdent indent " +
11 "| removeformat | blockquote hr anchor print spellchecker " +
12 "| preview code save cancel | emoticons ltr rtl"
13
14});
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.