Визуальный редактор из WordPress для OctoberCMS, с возможностью построения контента с помощью блоков. Используя Gutenberg, вы можете создавать действительно уникальный контент простыми кликами.
Ссылка на страницу плагина в маркетплейсе OctoberCMS:
https://octobercms.com/plugin/reazzon-gutenberg
RAINLAB.BLOG И LOVATA.GOODNEWS ИНТЕГРАЦИИ ГОТОВЫ
Протестировать данный визуальный редактор можно на тестовой площадке
Данный плагин позволяет внедрить визуальный редактор в Ваш плагин с помощью полиморфной связи.
ПЛАГИН НА ДАННЫЙ МОМЕНТ НАХОДИТСЯ В СТАДИИ БЕТА-ТЕСТИРОВАНИЯ
Описание
Интеграция Laraberg от VanOns\Laraberg для OctoberCMS. Авторство переноса Gutenberg.js в среду Laravel принадлежат VanOns.
Блоки доступные по-умолчанию:
- Все стандартные функции Gutenberg.js
- Стандартные Блоки
- Paragraph - (Так-же как и любое форматирование текст).
- Image
- Heading
- Audio
- Gallery
- Cover
- File
- List
- Quote
- Video
- Форматированное
- Code
- Preformatted
- Pull quote
- Classic
- Custom HTML
- Table
- Verse
- Элементы верстки
- Media & text
- Columns
- Button
- Separator
- Spacer
- Встраиваемое (YouTube, Vimeo, и т.д.)
В работе:
Внедрение стандартного медиаменеджера Готово в 1.0.7 обновленииReusable blocks не работают Готово в 1.0.8 обновленииУдаление стандартных блоков WP Готово в 1.0.9 обновленииRainLab.Blog интеграция Готово в 1.1.0 обновленииLovata.GoodNews интеграция Готово в 1.1.2 обновленииМиграция на релизную версию Laraberg Готово в 1.2.0 обновлении- RainLab.StaticPages интеграция
Я буду рад если вы поможете мне во внедрении нового функционала в плагин, создавая PR в репозитории данного плагина на Github.
Установка
Пользуйтесь стандартным средством установки плагинов OctoberCMS.
Перейдите в Настройки -> Обновление плагинов, введите в поиске Gutenberg и установите его нажав на иконку.
Использование
Данный плагин внедряется в плагин посредством добавления полиморфной связи morphOne вашей модели с моделью Gutenberg\Content.
Перейдите в файл вашей модели и добавьте $implement массив или добавьте в уже существующий поведение Gutenbergable.
public $implement = ['ReaZzon.Gutenberg.Behaviors.Gutenbergable'];
После перейдите в файл контроллера модели, и добавьте в $implement массив GutenbergController.
public $implement = ['ReaZzon.Gutenberg.Behaviors.GutenbergController'];
Все готово, теперь у вашей модели есть связь с Gutenberg через поле content которое выводится только если модель создана!
Отображение контента
Примеры рендера контента с помощью Twig или php.
Twig:
{{ post.content.render }}
PHP:
$post->content->render();
Для того чтобы контент правильно отображался на странице, вы должны добавить стили Gutenberg.
<link href="/plugins/reazzon/gutenberg/assets/laraberg.min.css" rel="stylesheet">
Работа с исходным кодом визуального редактора
Если вы хотите добавить кастомный функционал в визуальынй редактор, перейдите в папку /plugins/reazzon/gutenberg/formwidgets/gutenberg/assets/resources, и следуйте шагам ниже.
- Склонируйте репозиторий Gutenberg:
git clone https://github.com/WordPress/gutenberg.git gutenberg
- После клонирования выполните команды ниже по очереди:
cd gutenberg // go to Gutenberg folder
npm i // install all dependencies
npm run build // Build Gutenberg
sudo npm link // Link it to your global node_modules
cd .. // Go back to Laraberg root
npm i // install all dependencies
npm link gutenberg // Link Gutenberg package to Laraberg
- Все готово, можете работать.
