Использование пакета TinyMCE из Composer в php-фреймворке Laravel

Информация о материале: Родительская категория: Текстовые редакторы; Категория: TinyMCE

Установка пакета TinyMCE с помощью Composer для работы в Laravel — Использование пакета TinyMCE composer с фреймворком Laravel

Для чего может понадобиться TinyMCE в Laravel

Laravel — это расширяемый php-фреймворк для веб-приложений, построенный на PHP. Это руководство поможет добавить TinyMCE из пакета TinyMCE Composer на страницы или представления в Laravel. Пример проекта Laravel, созданный в этой процедуре, основан на проекте Laravel, описанном в документации Laravel Docs, в разделе "Установка через Composer". В руководстве будет создано два шаблона blade: один для JavaScript, а другой - для редактора, чтобы показать, как TinyMCE должен использоваться в рабочих приложениях.

Требования для работы TinyMCE в Laravel

Эта инструкция предполагает, что выполнены следующие предварительные условия:

Процесс интеграции TinyMCE в Laravel

1. В командной строке создайте новый проект Laravel с именем my-example-app, выполнив следующую команду:

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

2. Перейдите в корневой каталог приложения Laravel, например такой:

cd my-example-app

3. Установите необходимые компоненты Node.js, включая Laravel Mix:

npm install

4. Установите TinyMCE в проект с помощью Composer:

composer require tinymce/tinymce

5. Добавьте задачу Laravel Mix для копирования TinyMCE в публичные файлы при запуске Mix, например:

Файл: webpack.mix.js

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

5.1. [Примечания переводчика]

Файл webpack.mix.js помещаем в корень проекта со следующим содержимым:

let mix = require('laravel-mix');
mix.copyDirectory('vendor/tinymce/tinymce', 'public/js/tinymce');

Иначе npx mix матерится. =)

6. Запустите Laravel Mix, чтобы скопировать TinyMCE в каталог public/js/:

npx mix

7. Создайте новый компонент (blade.php) для конфигурации TinyMCE, например так:

php artisan make:component Head/tinymceConfig

В результате будет создан файл конфигурации с шаблоном resources/views/components/head/tinymce-config.blade.php.

8. Откройте только что созданный файл tinymce-config.blade.php в текстовом редакторе и замените его содержимое на:

Исходный сценарий TinyMCE.
Конфигурация TinyMCE.

Например:
Файл: 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>

9. Создайте второй компонент blade, содержащий HTML-элемент формы для TinyMCE, например:

php artisan make:component Forms/tinymceEditor

В результате будет создан файл resources/views/components/forms/tinymce-editor.blade.php.

10. Откройте только что созданный файл tinymce-editor.blade.php в текстовом редакторе и замените его содержимое на объект, соответствующий CSS-селектору, указанному в параметре selector в конфигурации редактора.

Например:

Файл: resources/views/components/forms/tinymce-editor.blade.php

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

11. Добавьте компоненты blade на страницы или в представления, где требуется TinyMCE. Конфигурационный blade (Head/tinymceConfig в данном примере) может быть добавлен в <head> или в конец <body> на целевой странице или в представление. Место вставки (Forms/tinymceEditor) следует добавить там, где TinyMCE необходим на странице.

Например:

Файл: 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. Запустите сервер Laravel для проверки загрузки TinyMCE на странице или представлении, например, выполните следующую команду и откройте страницу http://localhost.

php artisan serve

Поcледующие шаги по работе с TinyMCE в Laravel

Для получения дополнительной информации:

Настройка TinyMCE, см: Базовая настройка.
Три режима редактора, см:
Добавление плагинов TinyMCE, см: Работа с плагинами для расширения TinyMCE.
Перевод редактора TinyMCE на локальный язык, см: Локализация TinyMCE.
Информацию о CSS, необходимом для вывода некоторых элементов TinyMCE за пределы редактора, см: CSS для отображения содержимого TinyMCE вне редактора.

Перевод с английского официальной документации TinyMCE:
https://www.tiny.cloud/docs/tinymce/latest/laravel-composer-install/

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)