Пропоную випробувати 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
- Виправлена \u200b\u200bсумісність з AjaxManager (був косяк з перетягуванням)
- Додані плагіни: youtube, wordcount, autocorrect
- Вилучено меню, що з'являється при перетягуванні з дерева. Тепер просто вставляється посилання. Якщо тягнути картинку - вставиться картинка.
- Підтримка IE8
CKEditor 1.1.0
====================================
- Інтеграція з браузером файлів MODx
- Підтримка richtext TV
- Підтримка кастомних класів ресурсів (Articles for ex.)
- Покращено drag "n" drop. Тепер можна просто кидати картинки з дерева Файли щоб вставити їх в контент.
- Полагодив Ctrl + S
- Опція extra_plugins (Додаткові плагіни)
- Опція skin (Зміна шкурки)
Одне з найпопулярніших додатків для 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 Evolution у Вас не працює текстовий редактор TinyMCE. Ось яка картина у мене на всіх обнеовленних сайтах:
1. Завантажуємо плагін від сюди.
2. Разархівіруем.
3. Заливаємо папку ckeditor в папку assets / plugins /
4. Створюємо плагін ckeditor
5. Копіюємо в нього вміст з ckeditor.tpl
Ставимо галочки в системні події «OnRichTextEditorInit», «OnRichTextEditorRegister» і «OnInterfaceSettingsRender»
6. Включаємо CKEditor
Включити CKEditor можна в Інструменти\u003e Конфігурація\u003e Інтерфейс і Подання, в графі " редактор: "Вибрати CKEditor
7. Заходимо в будь-який документ і бачимо таку картинку
8. Дружим CKEditor з з файловим менеджером KCFinder
Щоб редактор грамотно працював з файловим менеджером KCFinder замінюємо цей код у файлі /assets/plugins/ckeditor/functions.php:
$ Mcpuk_path [ "base"] \u003d MODX_BASE_URL. "Manager / media / browser / mcpuk / browser.php". $ Cke_query; $ Mcpuk_path [ "image"] \u003d $ mcpuk_path [ "base"]. "& Type \u003d images"; $ Mcpuk_path [ "flash"] \u003d $ mcpuk_path [ "base"]. "& Type \u003d flash"; $ Mcpuk_path [ "link"] \u003d $ mcpuk_path [ "base"]. "& Type \u003d files";$ Mcpuk_path [ "base"] \u003d MODX_BASE_URL. "Manager / media / browser / mcpuk / browse.php"; //. $ Cke_query; $ Mcpuk_path [ "image"] \u003d $ mcpuk_path [ "base"]. "? Type \u003d images"; $ Mcpuk_path [ "flash"] \u003d $ mcpuk_path [ "base"]. "? Type \u003d flash"; $ Mcpuk_path [ "link"] \u003d $ mcpuk_path [ "base"]. "? Type \u003d files";
9. Я зібрав свою збірку потрібних мені кнопок
У файлі /assets/plugins/ckeditor/modx_config.js ви можете змінювати месталі, видаляти або додавати кнопки. Для себе я зібрав ось таку комбінацію.
Кому цікаво, можете замінити рядок коду:
Config.toolbar_modx \u003d [[ "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 \u003d [[ "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 спочатку поставляється порожнім і для того щоб запрацював сайт, можу з 99% впевненістю сказати, що вам доведеться встановити хоча б одне доповнення - пакет. У зв'язку з цим я вирішив написати невеликий список пакетів які багатьом знадобляться при створенні сайтів на MODx Revolution.
(Стаття оновлена \u200b\u200b11.02.2018)
Додатки з основного сховища modx
Ace - підсвічування коду при редагуванні шаблонів, чанкі, сніпетів + \u200b\u200bвбудований 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Мб безкоштовно.