- Для чего может понадобиться TinyMCE в Laravel
- Требования для работы TinyMCE в Laravel.
- Процесс интеграции TinyMCE в Laravel
- Последующие шаги по работе с TinyMCE в 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-app2. Перейдите в корневой каталог приложения Laravel, например такой:
cd my-example-app3. Установите необходимые компоненты Node.js, включая Laravel Mix:
npm install4. Установите TinyMCE в проект с помощью Composer:
composer require tinymce/tinymce5. Добавьте задачу 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 mix7. Создайте новый компонент (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/
