Редактор tinymce для modx вимкнення кнопок. Встановлює текстовий редактор CKEditor (альтернатива TinyMCE) на MODX Evolution. Я зібрав своє складання потрібних мені кнопок

Так як 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мб безкоштовно.

Швидше за все після оновлення системи MODX Evolutionу вас не працює текстовий редактор TinyMCE. Ось яка картина у мене на всіх оновлених сайтах:

1. Завантажуємо плагін від сюди.

2. Розархівуємо.

3. Заливаємо папку ckeditor у папку assets/plugins/

4. Створюємо плагін ckeditor

5. Копіюємо в нього вміст з ckeditor.tpl

Ставимо галочки в системних подіях OnRichTextEditorInit, OnRichTextEditorRegister і OnInterfaceSettingsRender

6. Включаємо CKEditor

Увімкнути CKEditor можна в Інструменти>Конфігурація>Інтерфейс та Подання, в графі " Редактор:" вибрати CKEditor

7. Заходимо в будь-який документ і бачимо таку картинку

8. Дружимо CKEditor з файловим менеджером KCFinder

Щоб редактор грамотно працював з файловим менеджером KCFinder замінюємо цей код у файлі /assets/plugins/ckeditor/functions.php:

$mcpuk_path["base"] = MODX_BASE_URL . "manager/media/browser/mcpuk/browse.php"; // . $cke_query; $mcpuk_path["image"] = $mcpuk_path["base"] . "?type=images"; $mcpuk_path["flash"] = $mcpuk_path["base"] . "? type = flash"; $mcpuk_path["link"] = $mcpuk_path["base"] . "?type=files";

9. Я зібрав своє складання потрібних мені кнопок

У файлі /assets/plugins/ckeditor/modx_config.js ви можете змінювати місця, видаляти або додавати кнопки. Для себе я зібрав таку комбінацію.

Кому цікаво, можете замінити рядок коду:

Config.toolbar_modx = [["Source"], ["Bold","Italic","Underline","Strike","-","Subscript","Superscript"], ["PasteText","PasteFromWord"] , ["Undo","Redo","-","Find","-","RemoveFormat"], "/", ["NumberedList","BulletedList","-","Outdent","Indent ","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight"], ["Link","Unlink","Anchor"], ["Image","Flash","Table","HorizontalRule ","Smiley","SpecialChar"], "/", ["Format","Font","FontSize"], ["TextColor","BGColor"], ["Maximize", "ShowBlocks","- ","About"] ];

Config.toolbar_simple = [["Source","-","Maximize","RemoveFormat"], ["PasteText","Find","Replace"], ["Link","Unlink"], ["Image ","SpecialChar"], ["Format"], "/", ["Bold","Italic","Underline","Strike","-","Subscript","Superscript"], ["TextColor ","BGColor"], ["NumberedList","BulletedList","-","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"]];

Тут я залишив тільки потрібне мені: Вихідний код, Збільшувач (щоб зручніше було писати), форматування тексту, Вставити тільки текст, Пошук та Заміна, Посилання, Вставка зображень, Символи, Заголовки, Текстові атрибути, колір тексту та фону, пункти, цитата та вимикання тексту.

Встановлення додаткових плагінів

У CKeditor купа всяких цікавих плагінів. Ви їх можете знайти в інтернеті та на офіційному сайті CKeditor. Усі плагіни встановлюються в папку /manager/assets/components/ckeditor/ckeditor/plugins/.

Далі в «Системних налаштуваннях» вибираємо «ckeditor» та в полі додаткові плагіни ( extra_plugins) вставляємо ім'я плагіна, що встановлюється. А в групи кнопок ( toolbar) вставляємо у потрібному місці "ім'я плагіна". Доповнення встановлено та готове до роботи.

Один з найпопулярніших доповнень для 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 та багато інших. Можна "грати" ними, розміщуючи кнопки в різному порядку.

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

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

Історія

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

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

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

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

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

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

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

Пропоную випробувати 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 (Зміна шкіри)