Using TinyMCE from the Tiny Cloud CDN with the Laravel framework

Laravel is a scaleable web application framework built on PHP. This guide assists with adding TinyMCE from the Tiny Cloud 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. 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.

  4. 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:

      File: resources/views/components/head/tinymce-config.blade.php

      <script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/7/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 | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
  });
</script>

  5. Replace no-api-key in the TinyMCE source script with your Tiny Cloud API Key.

    To register for a Tiny Cloud API key, visit the Tiny Account sign-up page. To retrieve the Tiny Cloud API key for an existing Tiny Account, login and visit the Tiny Account Dashboard.

  6. 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.

  7. 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:

    File: resources/views/components/forms/tinymce-editor.blade.php

    <form method="post">
  <textarea id="myeditorinstance">Hello, World!</textarea>
</form>

  8. 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:

    File: 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>

  9. 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: