Дополнения (плагины, пакеты) для MODX Revolution. Установка текстового редактора CKEditor (альтернатива TinyMCE) на MODX Evolution Tinymce modx revo не работает
Предлагаю опробовать 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 (Смена шкурки)
Сегодня в телеграм канале 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 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/browser.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";$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 ) вставляем в нужном месте "имя плагина". Дополнение установлено и готово к работе.
Практически каждый веб-мастер использует тот или иной визуальный редактор (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 входящего в пакет.
Статьи по теме
