Як зробити modx візуальний редактор. Додатки (плагіни, пакети) для MODX Revolution. Дружимо CKEditor з файловим менеджером KCFinder

Сьогодні в телеграм каналі MODX написали про те, що редактор TinyMCE Rich Text Editor не вміє, не вміє цього. Хтось не зумів його настроїти, у когось він видавав помилки тощо. Питання вибору редактора для мене постало відразу як я перейшов на MODX (що нагадаю трапилося нещодавно, місяців 8 тому). Завдання стояло одне: зробити простий, зручний та багатофункціональний редактор контенту. Погрався зі звичайним TinyMCE, погрався з ckeditor, погрався з TinyMCE Rich Text Editor і вирішив колупати останній.

Я не хочу влаштовувати холівар, який, мовляв, редактор краще. Я ділюся готовим рішенням робочого та багатофункціонального редактора. А який вибирати – вирішувати звичайно вам.

Історія

Налаштування зайняло не так багато часу, куди більше часу зайняла кастомізація редактора та вбудовування потрібних функцій. Але благо я все-таки вмію трошки гуглити і знайшов серед англомовних ресурсів кілька корисних тем, за допомогою яких мені вдалося реалізувати редактор, який у результаті ми й отримаємо.

Складання пройшло без помилок.

Встановлення

1) Завантажити автоустановник ви можете з мого новоствореного Git-репозиторію.

2) Процес установки дуже простий - закидаємо файл tinymcerte-1.0.0-beta.transport.zip в../core/packages/ і через установник шукаємо пакет локально. Далі просто встановлюємо його. Налаштування автоустановщик встановить сам.

3) У папці /files/TinyMCERTE-settings/ ви можете знайти невеликий readme.txt і плагін typograf, який потрібно помістити в папку плагінів редактора (про це читайте в readme.txt). На цьому все – редактор готовий до використання.

Застереження та доопрацювання

1) Я тестував даний автоустановник на чистому сайті та на сайті без встановленого редактора. Як і що станеться, якщо встановити його на сайт, де вже є редактор (Ace не в рахунок), я не знаю.

2) Було б непогано автоматично поміщати папку typograf в потрібний розділале моїх знань не вистачає для реалізації цієї ідеї. Якщо хтось захоче допомогти – буде круто. Вихідники цього автоустановника я викладу в той же репозиторій сьогодні, але ближче до вечора.

4) Для перевірки орфографії редактор використовує сервіс yandex.speller. Налаштування сервісу можна знайти у файлі../assets/components/tinymcerte/tinymcerte/js/external-config.json. Spellchecker TinyMCE підтримує величезну кількість мов для перевірки . Тоді як yandex.speller лише 3 (російська, українська, англійська).

Одне з найпопулярніших доповнень для MODX Revolution - візуальний редактор TinyMCE.

Воно і зрозуміло, рідко який сайт може обійтися без хорошого richtext редактора для контенту.

У цій статті розглядається встановлення та налаштування редактора TinyMCE.

Встановлення

Для встановлення необхідно завантажити пакет з репозиторію (http://modx.com/extras/package/TinyMCE) та встановити його через розділ "Керування пакетами" вашого сайту.

Після інсталяції пакета ви відразу можете відкрити будь-який ресурс для редагування і переконатися в тому, що редактор з'явився.

Ви можете відразу ж почати писати в ньому текст, проте для більш комфортного використання рекомендуємо налаштувати редактор.

Налаштування TinyMCE включатиме кілька етапів:

• Підключення файлу стилів
• Додавання кнопок для роботи з таблицями

Підключаємо файл зі стилями до TinyMCE

Це потрібно для того, щоб у візуальному редакторі текст виглядав один в один, як на сайті: шрифт, розмір і колір тексту, оформлення картинок і зовнішній виглядтаблиць.

Відкриваємо "Налаштування системи" і у фільтрі вибираємо "Візуальний редактор":

У цьому розділі всього 5 налаштувань:

• Шлях до CSS файлу (editor_css_path)- вказуєте шлях до файлу зі стилями тексту. Зверніть увагу, що використовувати не повний css файл вашого сайту, а окремий файл, в який винести лише стилі, що безпосередньо відносяться до оформлення тексту (заголовки h1-h6, параграфи p, посилання a таблиці tables та інші). Редактор працюватиме швидше та коректніше.
• Використовувати текстовий редактор (use_editor)- можна вимкнути редактор у разі потреби на час, не видаляючи при цьому TinyMCE.
• Редактор (which_editor)- MODX Revolution дозволяє встановити кілька різних редакторів на сайт, за потреби можна перемикатися між ними. До речі, можна перевизначити це налаштування для адміністраторів сайту, призначивши таким чином різним адміністраторам різний редактор.
• Редактор елементів (which_element_editor)- вкажіть редактор для сніпетів, плагінів, чанків. Наприклад, це може бути CodeMirror або Ace.

Додаємо до TinyMCE кнопки для роботи з таблицями

У TinyMCE, який встановлюється з репозиторію MODX Revolution, з якоїсь причини за замовчуванням відключено роботу з таблицями. Ні, ви, звичайно, можете переключитися в режим HTML і написати код вручну, але навіщо! Набагато простіше витратити 2 хвилини та включити підтримку таблиць.

Отже, відкриваємо налаштування системи, і в першому фільтрі вибираємо tinymce:

Відкриється список доступних параметрів. Нас цікавлять 2:

• tiny.custom_plugins- Список підключених плагінів до TinyMCS. В кінці списку необхідно додати " table", підключивши цим плагін до роботи з таблицями. Плагін йде разом із TinyMCE, і встановлювати його не треба, його треба просто увімкнути.
• tiny.custom_buttons3- Список кнопок, що відображаються на 3-му рядку. Вкажіть там " tablecontrols", додавши цим набір кнопок до роботи з таблицями. Зрозуміло, що ці кнопки можна розмістити на будь-якому іншому рядку. Якщо ви подивитеся на інші рядки, ви побачите список встановлених кнопок, таких як undo, redo, selectall та багато інших. Можна "грати" ними, розміщуючи кнопки в різному порядку.

Пропоную випробувати CKEditor як візуальний редактор коду. Версія 4.0 має нейтральну чорно-білу тему (дуже підходить для адмінки MODx) та деякі нові фічі (оцінив вставку абзаців у «важкодоступні» місця).

Не можна використовувати як фронтенд-редактор.
Працює Ctrl+S, а також вставка посилань або вбудовування Ресурсів (iframe) і файлів (img, audio, video). Потрібно просто виділити текст і кинути редактор потрібний Ресурс/Файл.

У налаштуваннях можна змінити колір ui, скін, додати свої плагіни та змінити порядок та набір кнопок панелі.

Вказуйте недостатні функції - я намагатимусь їх реалізувати.

Встановлення через менеджера пакетів.
На відміну від TinyMCE, повністю сумісний з

План дій:

Додати підтримку richtext TV параметрів
- Кнопочка Вибрати на сервері в діалогових вікнах(Інтеграція з браузером файлів MODX)
- Налаштування: extraPlugins, disableObjectResizing, керування форматом посилань, вибір скіна
- Меню під час перетягування файлів та ресурсів: Вбудувати об'єкт | Вставити посилання | Вставити ім'я об'єкта (було б круто якби працювало перетягування як через праву так і через ліву кнопкумиші (як у вінді))
- Захист modx-тегів
- Нові кнопки (вставка тегів, правка атрибутів тощо)
- Список класів із розпареної таблиці стилів.
- Підхоплення системних налаштуваньз контексту, що редагується (зараз проблеми з посиланнями)
- Настроювані клавіатурні поєднання.
- Плагін типографіки – автозаміна лапок, дефісів тощо на льоту.
- Прозоре завантаження картинок за допомогою copy/paste та drag"n"drop
- Автопідстановка (парсинг і виведення) тегів modx, якщо це взагалі можливо і наскільки це можливо (може бути корисною підтримка віджетів, що розробляється комадою CKSource)
- Inline-редагування з фронтенду.

Чет великий список вийшов. Треба б зменшити свої фантазії ...

Інструкція з встановлення додаткових плагінів:
Знаходимо потрібний плагін, наприклад, закидаємо в папку /manager/assets/components/ckeditor/ckeditor/plugins/, Йдемо в системні налаштування, простір імен вибираємо ckeditor, прописуємо наш плагін у extra_plugins(через кому, якщо кілька), далі правимо toolbar, вписуючи нову кнопку (якщо є). Оновлюємо форму правки ресурсу – перевіряємо результат. Пропоную ділитися цікавими плагінами.

Додаткові плагіни (не входять до пакету):
oEmbed - Дозволяє вставляти контент (відео, фото, аудіо, фрейми) з різних сервірів, маючи лише посилання. Список сервісів величезний, підтримується YouTube, Vimeo, Flickr, Instagram, GitHub, Twitter, JSFiddle і ще хрінова хмара різних сервісів.

Історія змін:

CKEditor 1.1.1

- Виправлено сумісність з AjaxManager (був косяк з перетягуванням)
- Додані плагіни: youtube, wordcount, autocorrect
- Видалено меню, яке з'являється під час перетягування з дерева. Тепер просто вставляється посилання. Якщо тягнути картинку – вставиться картинка.
- Підтримка IE8

CKEditor 1.1.0
====================================
- Інтеграція з браузером файлів MODx
- Підтримка richtext TV
- Підтримка кастомних класів ресурсів (Articles for ex.)
- Покращено drag"n"drop. Тепер можна просто кидати картинки з дерева Файли, щоб вставити їх у контент.
- Полагодив Ctrl+S
- Опція extra_plugins (Додаткові плагіни)
- Опція skin (Зміна шкіри)

Практично кожен веб-майстр використовує той чи інший візуальний редактор (WYSIWYG) для розміщення контенту на сайті. Візуальні редактори дозволяють не тільки працювати з HTML як зі звичайним текстом текстовому редакторі, Але й володіють функціоналом, що полегшує життя вебмайстру. Проте останнє може спростити життя, а й ускладнити.

У MODX Revolution в основному користуюся редактором TinyMCE, який встановлюється окремим пакетом. Говорити про його переваги і недоліки не буду, а торкнуся сьогодні лише тих моментів, які я використовую для полегшення роботи з ним.

Дефолтні налаштування

Відразу після встановлення пакету TinyMCE перевіряю у системних налаштуваннях блоці tinymce:

Tiny.forced_root_block роблю порожній tiny.path_options повинна бути порожня tiny.base_url повинна бути порожня

Також змінюю опцію convert_urls на No в налаштуваннях плагіна TinyMCE. Роблю це, щоб редактор ніяк не намагався змінювати посилання, які я задаю.

Підключення файлу стилів

Не завжди підключаю, але іноді це буває корисним та спрощує роботу з контентом. Робиться через вказівку системного налаштування editor_css_path у блоці системних налаштувань Rich-Text Editor налаштування Path to CSS file (Шлях до CSS файлу) або.

HTML5 теги

Чесно кажучи, включення HTML5 тегів та їх обробка з розуму у мене не вийшло. Тому я пішов шляхом дозволу будь-яких тегів шляхом додавання файлу core/components/tinymce/templates/script.tpl після рядка після рядка

Tiny.config =modx->toJSON($this->properties); ?>;

Tiny.config.valid_elements = "*[*]";

Яка дозволяє проходження будь-яких тегів. Для бажаючих заморочитися, цій змінній можна присвоїти перелік всіх можливих HTML тегів, включаючи HTML5 теги з файлу xconfig.js, що входить до пакету.

Так як MODX Revolution спочатку поставляється порожнім і для того, щоб запрацював сайт, можу з 99% впевненістю сказати, що вам доведеться встановити хоча б один додаток. пакет. У зв'язку з цим я вирішив написати невеликий список пакетів, які багатьом стануть у нагодіпри створенні сайтів на MODx Revo lution.

(статтю оновлено 11.02.2018)

Доповнення з основного репозиторію modx

Ace- підсвічування коду під час редагування шаблонів, чанків, сніпетів + ​​вбудований emmet.

TinyMCE Rich Text Editor- симпатичний візуальний редактор для контенту може бути розширений за рахунок додаткових функційдивіться сайт розробника.

filetranslit- перейменовує на латиницю при завантаженні файли з кирилиці (наприклад: завантажуєте картинку з ім'ям (назвою) модх-плагін.png(при перенесенні сайту, такі імена картинок перетворяться на козебряки і перестануть виводитися), в адмінку заллється файл з ім'ям modx-plagin.png.

translit– транслітерація псевдонімів для сторінок (url) – необхідна для .

FormIt- робота з формами (створення контактних форм будь-якої складності).

Collections- угруповання документів (ресурсів) – більше великих сайтів, де у категоріях багато документів – допомагає розвантажити (прискорити) адмінку, т.к. якщо у вас буде величезне дерево ресурсів, воно почне глючити.

simpleUpdater- Поновлення модексу в 1 клік.

SEO Pro- SEO помічник! Перевіряє довжину полів - title, description, додає фокусне ключове слово(keywords) і показує як сторінки будуть виглядати в пошуковій видачі.

Image SEO alt and title tags- автоматично підставляє alt і title для зображень, якщо не прописані. Обережно застосовувати на робочому сайті може поламати деякі висновки, які йдуть через CODE

Gallery– галереї зображень

migx- Дуже кльова річ! Виведення кількох телевізійних каналів у контенті, можна створити слайдер, галерею наприклад і т.п.

SimpleSearch- Організація пошуку по сайту.

Tagger- Теги для записів, хмара тегів.

ClientConfig- Створення клієнтських налаштувань, які надалі зможуть редагувати менеджери. Тобто. заносимо до нього все що часто змінюється, або просто то наприклад контакти, адреса, слоган і т.д. - Щоб замовник зміг все легко і швидко міняти.

Inherit Template- Встановлює шаблон для дочірніх елементів.

VersionX– компонент для тих хто віддає сайти на доопрацювання фрілансерам, можливо ще новачкам. Призначений для створення локальних бекапів всіх елементів – (чанки, сніпети, ресурси). Можна подивитися стару версіюі за необхідності відновити її. Також дозволяє дізнатися, хто вніс ті чи інші зміни.

Console– дозволяє з бекенда запускати PHP код.

AjaxManager- Прискорення роботи адмінки.

Captcha- Капча для входу в адмінку - додатковий захист.

backupMODX- Створення бекапів з працюючого сайту в 1 клік.

logPageNotFound-лог 404 помилок. Відмінно підходить для відстеження битих посилань.

cacheClear – дозволяє видалити всі папки /core/cache/ одним кліком.

Доповнення із репозиторію modstore.pro

Про те, як підключити додатковий репозиторій, читаємо .

AjaxForm- Надсилання контактних форм без перезавантаження сторінки, через Ajax . Використовує FormIt, але по суті можна вказати і свій сніпет.

DateAgo- Приємне форматування дат як у CMS LiveStreet.

autoRedirector- створює 301 редирект на автоматі, так само можна створити редирект в ручну.

Tickets- створення блогу, форми коментування, відгуків тощо.

Jevix- щось типу друкаря, що встановлюється на автоматі з Tickets

mixedImage- Змішане завантаження файлів (заміна додаткового поля (для картинок, вкладень та іншого)

pdoTools- цілий комбайн, до складу якого входять такі сніпети:
pdoRecources- призначений насамперед для виведення списку ресурсів, але насправді за допомогою нього можна зробити дуже багато цікавого: карту сайту (для людей), фотогалереї, портфоліо, кейси з ресурсів тощо.
pdoMenu- Створення меню.
pdoPage- як і pdoRecources виводить список ресурсів + створює посторінкову навігацію, у тому числі з вибоки інших сніпетів.
pdoCrumbs- для створення хлібних крихт (bread crumbs)
pdoUsers- Виведення користувачів
pdoSitemap- Створення авто генерованого sitemap.xml
pdoNeighbors— виводить попередні та наступні документи (корисно для блогів, статей тощо)
pdoField— виводить будь-яке поле зазначеного ресурсу або його батька, включаючи параметри TV.
pdoTitle— призначений для візуальної відмінності документів із посторінковою навігацією.
pdoArchive— виведення архіву документів сайту з розбивкою на дні, місяці та роки
Парсер- Перехоплює обробку тегів на сторінці.
Це, мабуть, найнеобхідніший пакет, без нього нормального сайту не зібрати. Та ще він додає підтримку Fenom шаблонизатора, який швидше вбудованого.

miniShop2- Створення інтернет магазину.

BannerY- Компонент для керування банерами (рекламою). На ньому насправді просто продати слайдер.

phpThumbOn- мініатюри для зображень (виведення зображень з потрібними розмірами).

MinifyX– мініфікація та склеювання скриптів та стилів у два файли (css та js) – дозволяє зменшити кількість запитів та збільшити швидкість завантаження сторінок.

xPoller2- Мультимовні опитування.

AdminTools- Зміна колірної схемиадмінки, обрані елементи, нотатки, авторизація в адмінці через email та інше.

frontendManager— Редагування сторінок із frontend'a.

dbAdmin – перегляд листингу таблиць БД з адмінки MODx Revo. Також дозволяє виробляти експорт як окремої таблиці, і всієї бази загалом. Ще вміє видаляти та очищати таблиці (будьте обережні при його використанні) і робити різноманітні SQL-запити.

modDevTools – швидкий пошук та заміна елементів у чанка, сніппетах.

debugParser – пошук вузьких місць на веб-сайті.

tagElementPlugin – дозволяє редагувати сніпети або чанки для виділення його тега та натискання клавіш ctrl+enter.

controlErrorLog – додає іконку на панелі верхнього меню, яка повідомляє про наявність записів у журналі помилок.

Універвальні плагіни

— автоматичне стискування картинок на будь-яких сайтах, сервіс платний, але її дорогий, зі старту дається 10мб - їх вистачає на стиск приблизно 500 картинок - що вистачить для будь-якої візитки, так само можна додатково отримати до 200мб безкоштовно.