Using the OpenTiny composer package with the Laravel framework

Laravel is a scaleable web application framework built on PHP. This guide assists with adding OpenTiny from the OpenTiny 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 OpenTiny 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
```
Add OpenTiny to the project using Composer:
```
composer require tinymce/tinymce
```
Add a Laravel Mix task to copy OpenTiny to the public files when Mix is run, such as:

File: webpack.mix.js
```
mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');
```
Run Laravel Mix to copy OpenTiny to the public/js/ directory:
```
npx mix
```
Create a new reusable component (blade.php) for the OpenTiny 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 OpenTiny source script.

A OpenTiny 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 OpenTiny
    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 OpenTiny, 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 OpenTiny 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 OpenTiny 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>OpenTiny in Laravel</title>
    <!-- Insert the blade containing the OpenTiny configuration and source script -->
    <x-head.tinymce-config/>
  </head>
  <body>
    <h1>OpenTiny in Laravel</h1>
    <!-- Insert the blade containing the OpenTiny placeholder HTML element -->
    <x-forms.tinymce-editor/>
  </body>
</html>

Start the Laravel development server to verify that OpenTiny 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 OpenTiny, see: Basic Setup.
The three editor modes, see:
Adding OpenTiny plugins, see: Work with plugins to extend OpenTiny.
Localizing the OpenTiny editor, see: Localize OpenTiny.
For information on the CSS required to render some OpenTiny elements outside of the editor, see: CSS for rendering OpenTiny content outside the editor.