Как подружить TinyMCE и атрибуты Uikit 📝

Как подружить TinyMCE и атрибуты Uikit 📝

Типичная ситуация: работаешь с контентом Joomla в редакторе и внезапно нужно вставить в код небольшой блок с версткой. Простая вёрстка: сетка в 3 колонки и кнопки во всю ширину. так кнопочки будут смотеться гармонично - с единой шириной и в одну строку.

⚠️Наши действия? Правильно. Переключаемся в TinyMCE в режим Выключить редактор и быстро верстаем grid. Но неприятный сюрприз в том, что нестандартные атрибуты редактор просто очищает, достаточно только выйти из режима кода и включиить WYSIWYG режим обратно. И брюки, то есть <div uk-grid> превращаются…. превращаются в элегантные шорты <div>…

И что же в такой ситуации делать?

⛔️ Создавать шорткод через Revars не всегда удобно, особенно если это разовая верстка. В условиях быстрой работы над контентом, переключаться туда-сюда очень неудобно.
⛔️ Ставить специальное расширение типа Sourcerer для вставки кода — это поставить большое расширение и следить за его обновлением, что избыточно. К тому же, это подвергнет сайт риску в плане безопасности из-за использования стороннего решения (меньше лишних расширений — спишь лучше). Расширения Regular Labs следует избегать.
⛔️ Сменить редактор на CodeMirror и поставить быструю переключалку редакторов, а в пометке к статье написать предупреждение, что внутри код? Рано или поздно, вы ошибетёсь, особенно при быстрой работе и вёрстка сломается.
⛔️ Вставлять модуль внутрь статьи с маленьким кусочком кода? Это настолько громоздкое решение, что даже говорить неудобно.

❇️ Но есть одно простое и эффективное решение.

Идём в Система > Плагины > Редактор - TinyMCE
Первая вкладка, ниже середины находим параметр Расширенные валидные элементы. Он пустой по-умолчанию. Дописываем div[*].

⚠️ Расширенные валидные элементы: div[*]

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

☑️ Если нужно для других тегов добавить такое — делаем аналогично (напишите в комментариях, какие еще теги нужны. Дополним статью)

#tinymce #uikit #yootheme