How to Set Up TinyMCE in a Laravel Project

TinyMCE is a powerful and flexible WYSIWYG editor that allows you to create rich text content in your Laravel applications. In this guide, we'll walk through the process of setting up TinyMCE in a Laravel project and integrating it into a Blade component for easy use.

 
Step 1: Install TinyMCE

To get started, install TinyMCE via Composer and NPM by running the following commands:

composer require tinymce/tinymce
npm install tinymce

Step 2: Create a TinyMCE Component

Next, create a new Blade component to encapsulate the TinyMCE editor. Within your Laravel project, create a new Blade component, such as AdminTinyMCE, and add the following script to initialize TinyMCE:

<script>
window.addEventListener('DOMContentLoaded', () => {
    tinymce.init({
        selector: 'textarea.tinyMCE',
        license_key: 'gpl',
        skin: false,
        branding: false,
        menubar: false,
        plugins: "link,code,lists,fullscreen,searchreplace",
        toolbar: 'undo | blocks | bold bullist numlist outdent indent | formatDropdown | link  | searchreplace code fullscreen ',
        paste_as_text: true,
        entity_encoding : "raw",
        relative_urls: false,
        toolbar_sticky: true,
        body_class: 'p-3',
        content_css: 'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css',
        content_style: 'body { font-size:1rem; } ' +
        'a { color: #6c757d; text-decoration: none; border-bottom: 2px solid #ba1820} ' +
        'a:hover { color: #ba1820; text-decoration: none; border-bottom: 2px solid #343a40} ',
        setup: function (editor) {
            editor.on('change', function () {
                editor.save();
            });
            editor.ui.registry.addMenuButton('formatDropdown', {
                text: 'Specials',
                fetch: function (callback) {
                    const items = [
                        {
                            type: 'menuitem',
                            text: 'Lead Text',
                            onAction: function () {
                                editor.formatter.register('lead', {block: 'p', classes: 'lead'});
                                editor.formatter.toggle('lead');
                            }
                        },
                        {
                            type: 'nestedmenuitem',
                            text: 'Font Sizes',
                            getSubmenuItems: function () {
                                return [
                                    {
                                        type: 'menuitem',
                                        text: 'Size 5',
                                        onAction: function () {
                                            editor.formatter.register('fs-5', {block: 'p', classes: 'fs-5'});
                                            editor.formatter.toggle('fs-5');
                                        }
                                    },
                                    {
                                        type: 'menuitem',
                                        text: 'Size 1',
                                        onAction: function () {
                                            editor.formatter.register('fs-1', {block: 'p', classes: 'fs-1'});
                                            editor.formatter.toggle('fs-1');
                                        }
                                    }
                                ];
                            }
                        }
                    ];
                    callback(items);
                }
            });
        }
    });
});
</script>

This code:

• Specifies that the free GPL version of TinyMCE is being used.
• Hides the default menu bar, enables various plugins and defines the toolbar buttons in a custom order.
• Makes sure that it pastes plain text instead of rich content.
• Keeps raw HTML without encoding special characters.
• Ensures absolute URLs are used in links.
• Keeps the toolbar fixed at the top.
• Loads Bootstrap 5 styles inside the TinyMCE editor.
• Customizes the default font size and link styles.
• Adds an event listener that triggers every time the editor content changes. Calls editor.save() to ensure the content is updated in the underlying <textarea>.
• Adds a custom dropdown menu called “Specials” in the toolbar and creates several submenus with different bootstrap styling classes.

 
Step 3: Import TinyMCE in app.js

To make TinyMCE available throughout your Laravel application, import it in your resources/js/app.js file:

import 'tinymce/tinymce';
import 'tinymce/skins/ui/oxide/skin.min.css';
import 'tinymce/icons/default/icons';
import 'tinymce/themes/silver/theme';
import 'tinymce/plugins/lists/plugin.js';
import 'tinymce/plugins/link/plugin.js';
import 'tinymce/plugins/code/plugin.js';
import 'tinymce/plugins/wordcount/plugin.js';
import 'tinymce/plugins/searchreplace/plugin.js';
import 'tinymce/plugins/fullscreen/plugin.js';
import 'tinymce/models/dom/model';

Run the following command to compile the assets:

npm run dev

 
Step 4: Use the TinyMCE Component in Blade

Now that TinyMCE is set up, use the newly created component in your Blade files:

<x-adminTinyMCE />

To enable TinyMCE on a specific textarea, add the tinyMCE class to it:

<textarea class="tinyMCE"></textarea>