Using OpenTiny from the Tiny Cloud CDN with the Laravel framework

Laravel is a scaleable web application framework built on PHP. This guide assists with adding OpenTiny 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 OpenTiny should be used in production environments.

Requirements

This procedure assumes the following prerequisites have been installed:

PHP
Composer

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
```
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="https://cdn.tiny.cloud/1/no-api-key/tinymce/6/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>

Replace no-api-key in the OpenTiny 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.
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.