YEEditor - оригинальный редактор для системы Joomla

YEEditor — это не очередной клон TinyMCE и не перекрашенный JCE Editor. Это принципиально иной подход к созданию контента в Joomla. Если вы привыкли верстать страницы через HTML-код и ненавидите момент, когда клиент звонит с вопросом «а как тут поменять картинку?» — у меня для вас хорошие новости. Обычно редактирование и вёрстка страницы в традиционном редакторе занимает от 30 до 120 минут. С YEEditor это занимает менее трёх минут. Серьёзно. Три минуты. И я сейчас не про создание страницы «Привет, мир» — я про полноценный лендинг с сеткой, колонками, кнопками и отзывами.

+

\u{201c}

Мы создали YEEditor потому, что устали объяснять клиентам разницу между тегом

и

. Теперь им не нужно знать код вообще.

Давайте сразу расставим точки над «i». YEEditor позиционируется как визуальный редактор с функцией drag-and-drop. Это не WYSIWYG в классическом понимании, где вы форматируете текст внутри серого окна с панелькой кнопок. Здесь вы перетаскиваете готовые блоки — виджеты, колонки, галереи — и собираете страницу как конструктор. Звучит как мечта любого верстальщика, уставшего от правок вёрстки? Именно.

Что такое YEEditor и почему он отличается от других редакторов Joomla

На рынке редакторов для Joomla засилье трёх игроков: JCE Editor, TinyMCE и ARK Editor. Каждый со своими плюсами и фанатами. Но у всех них одна общая черта: они работают с HTML-разметкой напрямую. Вы форматируете текст, вставляете изображения, возможно — пользуетесь готовыми сниппетами, но фундаментально вы редактируете HTML-код. YEEditor же работает на уровне блоков и виджетов. Это как сравнивать текстовый процессор с программой для вёрстки: Word и InDesign решают разные задачи, хотя оба создают документы.

Ключевое отличие YEEditor от JCE Editor и TinyMCE в том, что он основан на Bootstrap — фреймворке, который изначально проектировался для адаптивной вёрстки. Ваши страницы автоматически становятся responsive без единой строчки медиа-запросов. Не нужно писать CSS для мобильной версии — Bootstrap делает это за вас. И да, это тот самый Bootstrap, который разработали в Twitter.

Кому нужен YEEditor, а кому — точно нет

Давайте без розовых соплей. YEEditor — это инструмент для конкретных задач и конкретных людей. Вот расклад:

Кстати, если вы до сих пор думаете, что JCE Editor — верх эволюции, почитайте мой разбор JCE Editor vs TinyMCE vs ARK Editor чуть ниже. Спойлер: ни один из них не умеет того, что умеет YEEditor.

Сравнение YEEditor с JCE Editor, TinyMCE и ARK Editor

Когда я впервые показал YEEditor коллеге, который 8 лет сидит на JCE Editor и считает его эталоном, он сначала покрутил пальцем у виска, а через неделю перевёл два клиентских проекта на YEEditor. Почему? Потому что перестал получать звонки «у меня тут всё съехало» после того, как клиент пытался вставить картинку в колонку. Давайте сравним все четыре редактора в таблице — честно, без рекламных приукрашиваний.

Что мне реально понравилось в YEEditor, так это отсутствие необходимости объяснять клиенту, что такое колонка Bootstrap и почему div с сеткой Bootstrap нельзя просто удалить. В YEEditor клиент видит сетку визуально: хочет добавить колонку — перетаскивает блок, хочет поменять местами — перетаскивает в другое место. Всё.

ARK Editor, кстати, тоже пытается облегчить жизнь — подкупает своим inline-редактированием. Но у него другая беда: он сильно зависит от шаблона сайта. Если шаблон кривой или использует нестандартные стили, inline-редактирование превращается в лотерею: то кнопка не того цвета, то отступы плывут. YEEditor же использует Bootstrap, который живёт внутри самого редактора и не зависит от фронтенд-шаблона Joomla.

Система шаблонов: один раз настроил — пользуешься вечно

Вот это, пожалуй, главная фича, ради которой стоит смотреть в сторону YEEditor. Шаблоны страниц позволяют создать базовую структуру один раз, сохранить её и потом использовать десятки и сотни раз для однотипных страниц. Клиенту остаётся только заполнить контентом — как в конструкторе сайтов типа Tilda или Wix, только внутри Joomla.

+

Давайте разберём реальный кейс. У вас интернет-магазин на Joomla, и каждую неделю вы запускаете новую акцию. Без YEEditor процесс выглядит так:

1. Открываете JCE Editor — привычный интерфейс, все дела.
2. Создаёте HTML-таблицу для акционных товаров — 20 минут.
3. Добавляете картинки, цены, кнопки «Купить» — ещё 15 минут.
4. Проверяете, как выглядит на мобильном, правите — ещё 10 минут.
5. Итого: минимум 45 минут на одну акцию.

С YEEditor:

1. Выбираете сохранённый шаблон «Акция недели» — 30 секунд.
2. Меняете картинки и цены перетаскиванием — 2 минуты.
3. Всё адаптивно из коробки — 0 минут на проверку мобильной версии.
4. Итого: меньше трёх минут.

И это только акции. Умножьте на количество типовых страниц, которые вы создаёте — и экономия становится ощутимой не только во времени, но и в деньгах.

Шаблоны в YEEditor — это не просто заготовка HTML-кода, которую вы вставляете через буфер обмена. Это полноценная иерархическая структура из блоков Bootstrap: ряды, колонки, виджеты. Вы можете в любой момент изменить порядок блоков, добавить новый ряд, удалить ненужную колонку — и всё это визуально, без копания в HTML.

Виджеты: контент без боли

Отдельного разговора заслуживают виджеты YEEditor. Это готовые блоки контента, которые вы перетаскиваете на страницу и настраиваете через визуальный интерфейс. В стандартной поставке идут:

• Галерея изображений — карусель на Bootstrap, настраивается количество колонок и интервал смены слайдов.
• Кнопки — с иконками, размерами и цветами из палитры Bootstrap.
• Блоки с иконками — для списков преимуществ, услуг и прочего.
• Табы и аккордеоны — Bootstrap-компоненты, работающие без JavaScript-зависимостей.
• Блоки отзывов — с аватарками, звёздочками и цитатами.
• Google Maps — вставка карты через блок.
• Видео с YouTube и Vimeo — адаптивные вставки.

+

Важный нюанс: все виджеты используют родные стили Bootstrap. Это значит, что они выглядят консистентно друг с другом и не конфликтуют со стилями вашего шаблона. Никаких ситуаций «галерея съехала после обновления темы». Bootstrap изолирован внутри контента.

Для сравнения: в JCE Editor вы вставляете галерею через сторонний плагин, который тянет свои CSS и JS. В TinyMCE — аналогично. А потом гадаете, почему после обновления шаблона галерея отображается криво. YEEditor решает эту проблему архитектурно.

Как YEEditor работает с Bootstrap изнутри

Многие слышали, что YEEditor «построен на Bootstrap», но не все понимают, что это значит на практике. Объясняю на пальцах.

Bootstrap — это CSS-фреймворк, который делит страницу на 12 колонок. Вы говорите: «этот блок занимает 8 колонок, а этот — 4» — и получаете двухколоночный макет. На мобильном эти колонки автоматически складываются одна под другой. Магии нет, чистая математика.

YEEditor превращает эти 12 колонок в визуальный интерфейс. Вы перетаскиваете блоки, меняете их ширину ползунком, добавляете отступы — и за всем этим стоит генерация корректного Bootstrap-кода:

Вы этого кода не видите и не пишете. Но он генерируется. И генерируется правильно — с учётом сетки, контрольных точек и адаптивности. Это не та ситуация, когда визуальный редактор выдаёт <br><br><br> вместо отступов.

3 минуты vs 30-120 минут: откуда такая разница

Цифры «3 минуты против 30-120 минут» звучат как рекламный слоган, но давайте разложим их на составляющие. Вот хронометраж создания типовой целевой страницы (заголовок, преимущества в три колонки, галерея, форма обратной связи) в разных редакторах:

TinyMCE / JCE Editor:

• Создание HTML-структуры вручную — 10-15 минут.
• Добавление и позиционирование изображений — 5-10 минут.
• Написание CSS для адаптивности — 10-20 минут (если умеете, если нет — страница неадаптивна).
• Проверка на мобильном, правки — 5-10 минут.
• Итого: 30-55 минут при наличии навыков вёрстки, до 120 минут при их отсутствии.

YEEditor:

• Выбор шаблона — 10 секунд.
• Перетаскивание блоков «преимущества» в 3 колонки — 30 секунд.
• Замена изображений и текста — 1 минута.
• Добавление галереи и формы — 30 секунд.
• Публикация (адаптивность уже работает) — 10 секунд.
• Итого: около 2.5 минут.

\u{201c}

Раньше мы выставляли клиентам счёт за создание целевой страницы в 3-5 часов работы верстальщика. Теперь это 15 минут работы контент-менеджера. Разницу в прибыли можете посчитать сами.

Ключевое слово здесь — «контент-менеджер». Не верстальщик, не фронтенд-разработчик, не фрилансер с hourly rate $30. Обычный сотрудник, который умеет пользоваться мышью и понимает, какой текст должен быть на странице. Вот где настоящая экономия.

Установка YEEditor на Joomla

Установка стандартна для любого расширения Joomla, но есть пара моментов, о которых стоит знать заранее.

Заходите в админ-панель Joomla: Расширения → Менеджер расширений → Установить. Загружаете ZIP-архив YEEditor. После установки редактор появляется в списке доступных редакторов в настройках Joomla.

Теперь важный шаг: Система → Общие настройки → вкладка Сайт → поле «Редактор по умолчанию». Выбираете YEEditor. Всё — теперь при создании любого материала Joomla будет открываться YEEditor.

Плюсы и минусы YEEditor: честный разбор

Ни один инструмент не идеален. YEEditor — не исключение. Вот что мне нравится и что бесит после года использования:

Плюсы

• Скорость создания страниц. Это не преувеличение — страницы действительно собираются за минуты.
• Нулевой порог входа для клиентов. Если клиент умеет пользоваться PowerPoint, он справится с YEEditor.
• Адаптивный дизайн из коробки. Bootstrap делает своё дело — мобильная версия работает без дополнительных действий.
• Шаблоны. Один раз настроить и забыть про рутину — это реально работает.
• Консистентность. Все страницы выглядят в едином стиле, что критично для корпоративных сайтов.

Минусы

• Стоимость. Это не бесплатный редактор. Но цена оправдана, если вы создаёте больше 5 страниц в месяц.
• Привязка к Bootstrap. Если ваш дизайн далёк от Bootstrap-эстетики, придётся либо мириться, либо кастомизировать.
• Не для текстовых статей. Для блога избыточен и даже мешает — проще писать в JCE Editor.
• Зависимость от разработчика. Если расширение перестанет обновляться, ваши страницы будут завязаны на его архитектуру.
• Ограниченная кастомизация виджетов. Поменять цвет кнопки — легко, создать свой виджет с уникальной логикой — уже сложнее.

Архитектурные ограничения и как с ними жить

YEEditor генерирует HTML с классами Bootstrap. Если вы решите отказаться от редактора, весь контент, созданный через него, останется с этими классами. Это не критично — Bootstrap можно подключить отдельно, даже если редактор удалён. Но важно понимать: вы принимаете архитектурное решение. Не на месяц, не на проект — на весь жизненный цикл контента.

В JCE Editor и TinyMCE такой зависимости нет: контент — это просто HTML с базовыми тегами, стилизация целиком зависит от шаблона сайта. Это более гибкий подход в долгосрочной перспективе. YEEditor выбирает другой путь: «лучше работать хорошо сейчас, чем абстрактно — когда-нибудь потом». И для большинства коммерческих проектов этот подход оправдан.

Часто задаваемые вопросы о YEEditor