How to Install and Use The TinyMCE Editor

Hi! TinyMCE is an advanced text editor for web project. It looks like Microsoft Office Word tools. Additionally The TinyMCE is the most popular advanced text editor in the world. In this article, we are going to download this editor and do an example.

You can download it from the official web site. Recent version 4.0.21: TinyMCE. If you want to try online how to work on this, you can see this page: Try Online

After downloading, just create a form.html HTML file given below and work on any internet browser:

We try on it and:

We can set editor preferences up. What we need is tinymce.init. For example, let's set width and height of the textarea element:

tinymce.init({
    width: 800,
    height: 500,
    selector: "textarea"
 });

I advise you to use TinyMCE like this:

tinymce.init({
    width: 800,
    height: 500,
    selector: "textarea",
    theme: "modern",
    plugins: [
        "advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor moxiemanager"
    ],
    toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
    toolbar2: "print preview media | forecolor backcolor emoticons | sizeselect | bold italic | fontselect |  fontsizeselect",
    image_advtab: true,
});