Using the TinyMCE composer package with the Laravel framework

This guide assists with adding TinyMCE from the TinyMCE Composer package to pages or views in Laravel. The example Laravel project created in this procedure is based on the Laravel project documented in the Laravel Docs, under Installation Via Composer. The guide will create two blades: one for the JavaScript and another for the editor placeholder, to reflect how TinyMCE should be used in production environments.

Requirements

This procedure assumes the following prerequisites have been installed:

Procedure

  1. On a command line (or command prompt), create a new Laravel project named my-example-app by running the following command:

    composer create-project laravel/laravel my-example-app

  2. Change into the root directory of the Laravel application, such as:

    cd my-example-app

  3. Install the required Node.js components, including Laravel Mix:

    npm install

  4. Add TinyMCE to the project using Composer:

    composer require tinymce/tinymce

  5. Add a Laravel Mix task to copy TinyMCE to the public files when Mix is run, such as:

    webpack.mix.js
    mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');

  6. Run Laravel Mix to copy TinyMCE to the public/js/ directory:

    npx mix

  7. Create a new reusable component (blade.php) for the TinyMCE configuration, such as:

    php artisan make:component Head/tinymceConfig

    This will create the blade resources/views/components/head/tinymce-config.blade.php.

  8. Open the newly created .blade.php file in a text editor and replace the contents with:

    • The TinyMCE source script.

    • A TinyMCE configuration.

      For example:

      resources/views/components/head/tinymce-config.blade.php
      <script src=""{ asset('js/tinymce/tinymce.min.js') }"" referrerpolicy="origin"></script>
<script>
  tinymce.init({
    selector: 'textarea#myeditorinstance', // Replace this CSS selector to match the placeholder element for TinyMCE
    plugins: 'code table lists',
    toolbar: 'undo redo | formatselect| bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
  });
</script>

  9. Create a second blade containing a placeholder HTML element for TinyMCE, such as:

    php artisan make:component Forms/tinymceEditor

    This will create the blade resources/views/components/forms/tinymce-editor.blade.php.

  10. Open the newly created .blade.php file in a text editor and replace the contents with a placeholder, matching the CSS selector provided to the selector option in the editor configuration.

    For example:

    resources/views/components/forms/tinymce-editor.blade.php
    <form method="post">
  <textarea id="myeditorinstance">Hello, World!</textarea>
</form>

  11. Add the blade components on the pages or views where TinyMCE is needed. The configuration blade (Head/tinymceConfig in this example) can be added to the <head> or at the end of the <body> on the target page or view. The placeholder blade (Forms/tinymceEditor) should be added where TinyMCE is required on the page.

    For example:

    resources/views/welcome.blade.php
    <!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>TinyMCE in Laravel</title>
    <!-- Insert the blade containing the TinyMCE configuration and source script -->
    <x-head.tinymce-config/>
  </head>
  <body>
    <h1>TinyMCE in Laravel</h1>
    <!-- Insert the blade containing the TinyMCE placeholder HTML element -->
    <x-forms.tinymce-editor/>
  </body>
</html>

  12. Start the Laravel development server to verify that TinyMCE loads on the page or view, such as running the following command and opening the page on the localhost.

    php artisan serve

Next Steps

For information on: