Using the TinyMCE .zip package with the Laravel framework

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

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
```
Change into the root directory of the Laravel application, such as:
```
cd my-example-app
```
Install the required Node.js components, including Laravel Mix:
```
npm install
```
Download TinyMCE.
- For Self-hosted Enterprise customers, visit Tiny - Self-hosted releases
- For the self-hosted TinyMCE community edition, visit Tiny Account - Downloads
Extract (or unzip) the downloaded TinyMCE .zip file into the resources/js/ directory of the Laravel project, such as:
```
unzip ../tinymce_latest.zip -d resources/js
```
Add a Laravel Mix task to copy TinyMCE to the public files when Mix is run, such as:

File: webpack.mix.js
```
mix.copyDirectory('resources/js/tinymce/js/tinymce', 'public/js/tinymce');
```
Run Laravel Mix to copy TinyMCE to the public/js/ directory:
```
npx mix
```
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.

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="{{ 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 | blocks | bold italic | alignleft aligncenter alignright | indent outdent | bullist numlist | code | table'
  });
</script>

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

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>

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:

Customizing TinyMCE, see: Basic Setup.
The three editor modes, see:
Adding TinyMCE plugins, see: Work with plugins to extend TinyMCE.
Localizing the TinyMCE editor, see: Localize TinyMCE.
For information on the CSS required to render some TinyMCE elements outside of the editor, see: CSS for rendering TinyMCE content outside the editor.