TinyMCE

TinyMCE Editor

TinyMCE is a flexible and powerful WYSIWYG editor for your web forms, supporting rich text formatting, media embedding, tables, and more.

Step 1: Install TinyMCE

You can install TinyMCE via yarn.

yarn add tinymce

Step 2: Include TinyMCE Script

Include the TinyMCE JavaScript file from your local libs folder.

<!-- TinyMCE JS -->
<script src="../assets/libs/tinymce/tinymce.min.js"></script>

Step 3: Add Textarea HTML

Create a form with a <textarea> element that will be transformed into a TinyMCE editor.

<form method="post">
    <textarea id="elm1" name="area">
        <b>Basic Text Editor</b>
        <ul class="tinymce-body">
            <li>Cillum dolore eu fugiat nulla pariatur</li>
            <li>Duis aute irure dolor in</li>
            <li>Tempor incididunt ut labore</li>
            <li>
                <ol>
                    <li>Lorem ipsum dolor sit amet</li>
                    <li>Ommodo consequat</li>
                    <li>Duis aute irure dolor in</li>
                </ol>
            </li>
            <li>Laboris nisi ut aliquip ex ea</li>
            <li>Excepteur sint occaecat</li>
        </ul>
    </textarea>
</form>

Step 4: Initialize TinyMCE

Use the following JavaScript code to initialize the TinyMCE editor with plugins, toolbar options, and custom content styling.

"use strict";

if (document.getElementById("elm1")) {
    tinymce.init({
        selector: "textarea#elm1",
        height: 400,
        plugins: "advlist autolink link image lists charmap preview anchor " +
                 "searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media " +
                 "table emoticons template",
        toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | " +
                 "bullist numlist outdent indent | link image | preview media fullpage | forecolor backcolor emoticons",
        license_key: 'gpl',
        content_style: "body { font-size:14px; }"
    });
}

For more advanced configuration, plugins, and documentation, visit the TinyMCE documentation.