Modx revo настройка tinymce – Как в MODX в дополнительных полях отключить визуальный редактор, чтобы была возможность писать чистый html?

Отображаем кнопки управления таблицами в визуальном редакторе «TinyMCE» в MODX Revo

По умолчанию (если у вас в качестве визуального редактора выступает плагин TinyMCE) в панели быстрого доступа будут отсутствовать кнопки, отвечающие за работу с таблицами. Очень странно, что создатели этого расширения не сделали акцент на таблицах – ведь они являются популярным средством для представления информации.

Конечно, вы можете воспользоваться исходным кодом, редактирование которого осуществляется посредством специальной кнопки:

Отображаем кнопки управления таблицами в визуальном редакторе «TinyMCE» в MODX Revo

Но раз вы используете визуальный редактор, значит, вы хотите свести взаимодействие с HTML-разметкой (-кодом) к минимуму.

Что ж, решение есть, и я покажу вам, как можно просто включить кнопки для работы с таблицами в MODX Revolution в этом плагине.

1. Для начала – авторизуйтесь в панели управления сайтом.

2. Далее перейдите в раздел системных настроек.

Отображаем кнопки управления таблицами в визуальном редакторе «TinyMCE» в MODX Revo

3. На открывшейся странице, в поле «Отбор по пространству имен...» вы вставляете:

tinymce

А в поле «Поиск по ключу...» вы вставляете:

custom_plugins

Пример на скриншоте:

Отображаем кнопки управления таблицами в визуальном редакторе «TinyMCE» в MODX Revo

И в найденном значении вы щелкаете два раза левой кнопкой мыши, чтобы у вас появилось окно редактирования:

Отображаем кнопки управления таблицами в визуальном редакторе «TinyMCE» в MODX Revo

В его конец вы пишете:

,table

И жмете клавишу «Enter» на клавиатуре.

4. Далее поле «Поиск по ключу...» заменяете на:

custom_buttons3

В итоге у вас должно получиться:

Отображаем кнопки управления таблицами в визуальном редакторе «TinyMCE» в MODX Revo

И в найденном значении пишете:

tablecontrols

И жмете клавишу «Enter».

Отображаем кнопки управления таблицами в визуальном редакторе «TinyMCE» в MODX Revo

После всех этих шагов при редактировании материала в визуальном редакторе появятся соответствующие кнопки для работы с таблицами:

Отображаем кнопки управления таблицами в визуальном редакторе «TinyMCE» в MODX Revo

На этом все. До новых встреч!

Настройки TinyMCE в MODx

Множество CMS имеют предустановленный редактор контента WYSIWYG TinyMCE . Он достаточно удобен и очень гибко настраивается.
Настройки визуального редактора в MODx разделены на 2 части: глобальные настойки редактора контента и настройки плагина TinyMCE.
Содержимое панели редактирования контента и порядок кнопок можно настроить в глобальных настройках редактора контента по пути инструменты - конфигурация - интерфейс и представление.

Внешний вид редактора после установки MODx

Внешний вид редактора после установки MODx

 
Однако это не полная версия редактора. Некоторые отсутствующие функции могут быть очень полезны при редактировании контента.

Полный вид редактора TinyMCE

Полный вид редактора TinyMCE

 

Особое внимание хотелось бы уделить настройкам "путь к CSS файлу" и "Селекторы CSS". В первой настройке надо указать путь относительно корня сайта к css файлу, содержащему описание стилей, которые хотелось бы использовать при редактировании контента. А в настройку "Селекторы CSS" надо прописать примерно следующий код:

Код=code;Красный цвет=red

После этого в плагине "стиль" можно будет выбрать нужное оформление. Выбор "Красный цвет" равносилен применению CSS класса red для конкретного элемента.

Помимо глобальных настроек WYSIWYG редактора есть настройки плагина. Они обычному пользователю вряд ли потребуются, однако я все же рекомендую их немного изменить. Дело в том, что в ходе работ по поисковому продвижению сайта требуется скрыть от поискового робота некоторое содержимое страницы. Это делается обычно с помощью тега noindex. Однако при сохранении документа редактор контента TinyMCE убирает тег noindex как невалидный. Чтобы этого не происходило, в поле Custom Parameters надо добавить:

extended_valid_elements : "noindex"

Если версия modx старая, нужно искать /assets/plugins/tinymce....../xconfig.js и в нем заменить строку

var tinymce_extended_valid_elements = "";

на

var tinymce_extended_valid_elements = "noindex";

Вставлять тег noindex можно, редактируя контент в режиме html.

Постовой: При переустановке операционной системы вам может потребоваться перенос данных Firefox для сохранения данных.

Первичная настройка MODx Revo. "Как в Cказке"

MODx - это скорее CMF, чем CMS. Чем отличается Content Management Framework от Content Management System? Кардинальное отличие в том, что CMS может настроить любой человек без знания "программирования", а у Content Management Framework есть свой внутренний язык и возможность разрабатывать новые и видоизменять старые модули на одном из языков программирования, в случае MODx Revo таким языком является PHP для логики и библиотека Java ScriptExt Js - для визуального представления в админке (back-end). Следовательно, можно сделать вывод, что нам, как минимум, понадобится подсветка синтаксиса в Modx.

Подсветка синтаксиса в MODx Revo с Ace

Для подсветки синтаксиса мы выбираем пакет Ace. Почему именно его, а не CodeMirror? В отличие от CodeMirror Ace позволяет:

  • форматировать выделенный код при помощи комбинаций клавиш: Tab (сдвинуть вправо) и Shif+Tab (сдвинуть влево)
  • поддерживает перетаскивание ресурсов и элементов из дерева в код
  • дополняет открывающиеся скобки, кавычки и теги закрывающимися
  • подсвечивает строчку с ошибкой в php-коде
  • в файлах стилей (css) подсказывает синтаксис по комбинации клавиш CTRL+пробел

На заметку: полноэкранный режим редактирования кода в Ace включается комбинацией клавиш Ctrl+F11.

Почему Ace не подсвечивает код

Если Ace был поставлен после Codemirror и не подсвечивает код, то надо проверить настройки визуальных редакторов в MODx. Переходим в меню Система -> Настройка системы. Выбираем в фильтре "визуальный редактор":

Включить подсветку содержимого ресурса через Ace

Если надо подсветить HTML у полей ресурсов (документов) с типом ввода "текстовой редактор", то следует отключить WYSIWYG функцию. Отключается в том же меню: Система -> Настройка системы, визуальный редактор:

Подключение WYSIWYG редактора - TinyMCE

Для удобной работы с текстом страниц клиентам подключается WYSIWYG редактор - What You See Is What You Get. Который позволяет людям, не знакомым с HTML, форматировать текст и вставлять в него изображения и ссылки. Для этого надо установить пакет - TinyMCE.

Преднастройка для SEO - пакет translit

По умолчанию MODx генерирует адреса страниц вида

index.php?id=<уникальный номер страницы в дереве ресурсов>

не годятся для поисковой оптимизации сайта. Куда лучше для продвижения, если адрес у страницы Услуги будет человеку понятным урлом (ЧПУ): uslugi.html. Для достижения такого эффекта нам понадобится установить пакет translit. Этот пакет обеспечит транслитерирование русских слов латиницей. Включить транслитерацию и настроить автоматическую генерацию псевдонимов (в MODx поле адреса страницы называется 

псевдонимом) следует сделать, прописав следующие настройки:

Пакеты, которые наверняка понадобятся для настройки любого сайта

  • BreadCrumb - пакет для генерации хлебных крошек
  • FormIt - пакет для отправки писем
  • getResources - вывод дочерних страниц по шаблону
  • getPage - подключение пагинации к getResources
  • Inherit Template - позволяет указать у родительского ресурса с каким шаблоном по умолчанию создавать дочерние
  • SimpleSearch - поиск по сайту
  • Wayfinder - генерация меню
Поделиться в соцсетях:

Установка CKEditor на MODX Evolution

Установка CKEditor на MODX Evolution

Скорее всего после обновления системы MODX Evolution у Вас не работает текстовый редактор TinyMCE. Вот какая картина у меня на всех обнеовленных сайтах:

Установка CKEditor на MODX Evolution

Я Вам настоятельно рекомендую заменить редактор TinyMCE на CKEditor. Вот инструкция по его установки на MODX Evolution 1.0.14 (ну и на предыдущие и будущие версии)

1. Скачиваем плагин от сюда.

2. Разархивируем.

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

4. Создаем плагин ckeditor

5. Копируем в него содержимое из ckeditor.tpl

Ставим галочки в системных событиях «OnRichTextEditorInit», «OnRichTextEditorRegister» и «OnInterfaceSettingsRender»

6. Включаем CKEditor

Включить CKEditor можно в Инструменты>Конфигурация>Интерфейс и Представление, в графе "Редактор:" выбрать CKEditor

Установка CKEditor на MODX Evolution

Жмем "Сохранить"

7. Заходим в любой документ и видим такую картинку

Установка CKEditor на MODX Evolution

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 вы можете менять местали, удалять или добавлять кнопки. Для себя я собрал вот такую комбинацию.

Установка CKEditor на MODX Evolution

Кому интересно, можете заменить строчку кода:



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) вставляем в нужном месте "имя плагина". Дополнение установлено и готово к работе.

На этом все! До новых уроков.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *