Блочный редактор Editor JS

Плагин блочного редактора Editor JS для системы управления CMS Joomla.

Плагин полностью заменяет стандартные редакторы Joomla на блочный редактор Editor JS. Такой редактор очень удобен для контентных сайтов, где пользователи сами пишут статьи, или для контент менеджеров, которые плохо разбираются в стандартных редакторах для Joomla.

Подобные редакторы используют платформы vc.ru и habr.com

Что умеет редактор?

Редактор предлагает только самые необходимые элементы форматирования : параграфы, заголовки, списки, таблицы, цитаты, изображения, вложения, HTML фрагменты и примеры любого кода. Ни чего лишнего нет, только все самое необходимое.

Любой из типов форматирования Вы можете отключить, а потом включить, в настройках плагина.

Редактор Editor JS разбивает контент на блоки (поэтому называется блочным) и преобразует в строку JSON. Именно в таком виде Ваш контент будет храниться в базе данных.

{"time":1731503874060,"blocks":[{"id":"aJ78gC3j-5","type":"paragraph","data":{"text":"Редактор Editor JS разбивает контент на блоки"}}],"version":"2.30.4"}

Editor JS для Joomla

Параграфы

Параграф - это структурная единица текста, которая обычно состоит из нескольких предложений и содержит определённую мысль или идею. В таком тексте Вы можете вставить ссылку, сделать текст жирным или наклонным. Обычный функционал для любого редактора.

Заголовки

Заголовок - это краткое выражение, которое представляет основную идею текста и привлекает внимание читателя. В редакторе Вы можете использовать 3 вида заголовков: H2, H3, H4, они отличаются по размерам шрифта.

Списки

Нумерованный список — это перечень элементов, которые обозначены последовательными цифрами. Такой список используется, когда важно указать порядок следования элементов или когда нужно выделить каждый элемент списка.

Ненумерованный список (или маркированный) — это перечень элементов, которые обозначены символами (точками). Такой список применяется, когда не важен порядок следования элементов или когда нужно выделить визуальное отличие одного элемента от другого.

Таблицы

Таблица — это способ структурирования информации в виде сетки из ячеек, которые могут содержать текст, изображения или другие элементы. В редакторе представлена простая таблица, создать сложную таблицу не получится.

Цитаты

Цитата — это дословное воспроизведение части текста другого автора. Она заключается в кавычки и сопровождается указанием на источник, из которого она взята.

Изображения

Редактор загружает изображения на сервер в момент их добавления, что не требует от пользователя дополнительных действий. Редактор преобразует их, по указанным в настройках, параметрам и помещает в указанную директорию на сервере. Это очень удобно!

Так же все, добавленные, изображения сжимаются и преобразуются в современный формат webP.

Достаточно один раз настроить формирование изображений в настройках плагина и во всех материалах сайта изображения будут одинаковые.

Кроме всего этого, предусмотрено наложение водяных знаков.

Вложения

Помимо изображений, в материалы можно вставлять вложения (файлы). Замечательно то, что вложение (или вложения) Вы можете расположить в любом месте текста и оно будет оформлено, как вложенный файл.

Вложения, так же как и изображения, подгружаются в момент прикрепления, что не требует от пользователя дополнительных действий.

HTML фрагмент

Иногда в тексте нужно добавить особый блок или нестандартное форматирование элемента. Для этих задач можно использовать инструмент HTML фрагмент. Введенный в него HTML код не будет отформатирован в редакторе и выведет содержимое "как есть".

Пример кода

Для некоторых сайтов, например, на которых пишутся статьи для программистов или разработчиков, необходим инструмент вставки примера кода. Этот инструмент позволяет использование такого функционала. Вы вставляете кусок кода, а редактор не форматирует его и выводит его "как есть".

Настройки плагина Editor JS

Плагин редактора имеет гибкие настройки, как инструментов форматирования, так и изображений, вложений.

Элементы форматирования

Любые инструменты форматирования редактора Вы можете включить или отключить в любое время в настройках редактора.

Настройки Editor JS

Изображения

Так же в плагине доступны очень гибкие настройки для автоматизации добавления и хранения изображений.

Гибкие настройки для изображений

Гибкие настройки для изображений

Водяной знак

В настройка Вы можете включить или отключить наложения водяного знака на изображения. А так же добавить сами изображения водяного знака.

Водяные знаки

Плюсы и минусы Editor JS

Любые редакторы имею свои плюсы и свои минусы. Начну с минусов.

Минусы EditorJS

• Хранение данных в JSON. Это может стать проблемой, когда Вы захотите отказаться от этого типа редактора.
• Минимальный набор инструментов форматирования. Если в какой-то момент понадобятся какие-то нестандартные инструменты, с этим могут возникнуть проблемы.
  
• Нет доступа к медиа-менеджеру Joomla. Вы не сможете выбрать уже существующие на сервере изображения или файлы.

Плюсы Editor JS 

• Удобство написания контента. Редактор очень удобен для контент-менеджеров, которые плохо ориентируются в нюансах стандартных редакторов Joomla. 
• Систематизация контента. Все статьи будут отображаться на сайте в одном стиле.
  
• Обработка изображений "на лету". Плагин загружает изображения в момент их прикрепления, что делает все изображения одинаковыми по размеру, а так же есть возможность наложения водяного знака.

Состав расширения

Пакет редактора содержит несколько плагинов

Плагин plg_editors_editorjs

Это плагин самого редактора Editor JS. Он подменяет стандартные редакторы Joomla в панели управления.

Плагин plg_content_editorjs_article.zip

Плагин преобразует json данные, на фронте, сайта в привычный HTML. Плагин обрабатывает материалы, теги, контакты, контентные модули и поля.

Плагин plg_content_editorjs_category.zip

Плагин преобразует json данные на фронте сайта в привычный HTML. Плагин обрабатывает категории материалов, категории контактов.

Библиотека Intervention Image

Библиотека PHP Intervention Image подключается для обработки изображений и наложении водяных знаков.