Меню Рубрики

Установка tinymce на modx evo

Установка текстового редактора CKEditor (альтернатива TinyMCE) на MODX Evolution

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

Я Вам настоятельно рекомендую заменить редактор 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

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

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

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

Чтобы редактор грамотно работал с файловым менеджером KCFinder заменяем этот код в файле /assets/plugins/ckeditor/functions.php:

9. Я собрал свою сборку нужных мне кнопок

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

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

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

Установка дополнительных плагинов

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

Далее в «Системных настройках» выбираем «ckeditor» и в поле дополнительные плагины (extra_plugins) вставляем имя устанавливаемого плагина. А в группы кнопок (toolbar) вставляем в нужном месте «имя плагина». Дополнение установлено и готово к работе.

источник

Установка, настройка и кастомизация редактора TinyMCE Rich Text Editor

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

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

История

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

Описывать все функции я не буду, вы их видите на скриншоте выше и сами сможете пощупать. На основе компонента Ильи Уткина siteExtra, я сделал свою сборку для быстрого развертывания чистого MODX с уже установленными нужными мне настройками. В том же телеграм чате меня попросили поделиться конфигами моего редактора но я решил поступить проще. На основе того же компонента Ильи, я сварганил на скорую руку автоустановщик уже настроенного редактора TinyMCE Rich Text Editor, он включает в себя весь функционал который я сумел настроить. И ничего более. Только чистая установка редактора и его настройка. Никаких других компонентов / настроек / объектов он не устанавливает.

Читайте также:  Установка змз 406 на газ 2410 проводка

Установка

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 в нужный раздел, но моих знаний не хватает для реализации этой идеи. Если кто-то захочет помочь — будет круто. Исходники данного автоустановщика я выложу в тот же репозиторий сегодня, но ближе к вечеру.

источник

Настраиваем TinyMCE в MODX Revolution

Одно из самых популярных дополнений для MODX Revolution — визуальный редактор TinyMCE.

Оно и понятно, редко какой сайт может обойтись без хорошего richtext редактора для контента.

В этой статье рассматривается установка и настройка редактора TinyMCE.

Установка

Для установки необходимо скачать пакет из репозитория (http://modx.com/extras/package/TinyMCE) и установить его через раздел «Управление пакетами» вашего сайта.

После установки пакета вы сразу же можете открыть любой ресурс для редактирования и убедиться в том, что редактор появился.

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

Настройка 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:

источник

MODX TinyMCE Rich Text Editor

Сегодня урок по текстовому редактору — TinyMCE Rich Text Editor для MODX Revolution, разберемся с тем как его установить, настроить и кастомизировать.

Установка

Устанавливается пакет стандартно.

Настройка

Идем в системные настройки -> tinymcerte и вносим (меняем) следующее

  • tinymcerte.toolbar1 = undo redo | styleselect | backcolor forecolor bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image
  • tinymcerte.browser_spellcheck = да
  • tinymcerte.content_css = абсолютный путь до основного файла стилей темы (если он не особо огромный, а то будет глючить)
  • tinymcerte.plugins = advlist autolink lists modximage charmap print preview anchor visualblocks searchreplace code fullscreen insertdatetime media table contextmenu paste modxlink textcolor colorpicker
  • tinymcerte.relative_urls = Нет
  • tinymcerte.remove_script_host = Нет

Автоматическая настройка + дополнительный функционал и кастомизация

Скачиваем транспортный пакет с гитхаба или блога и устанавливаем его через Приложения — Установщик — Загрузить пакет.

После загрузки пакета устанавливаем его.

Внимание! Не известно как ведет себя транспортный пакет вместе с уже установленными редакторами (кроме ace), так что их лучше удалить.

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

Так же можете добавить Типограф, для этого скачате типограф, закиньте данный файл в assets/components/tinymcerte/js/vendor/tinymce/plugins и распакуйте его.

После этого у вас появится дополнительный пункт — типографика.

Спасибо за данный транспортный пакет iWatchYouFromAfar .

источник

Прямой эфир

Инфо о авторе топика

Дмитрий

Контакты

Топики пользователя

Документация и уроки

Категории

Подразделы блога

Блоги

  • Готовые дополнения для MODX148
  • Проект MODX.im50
  • Оформления для frontend’a и backend’a41
  • Для модераторов13
  • Интегрированные среды разработки (IDE)13
  • MODX custom by Dmi3yy51
  • bid-cart24
  • Социальная сеть12
  • MODX Cloud8
  • Юмор10
  • Краундфандинг2
  • Быстрые решения102
  • В разработке47
  • Вопросы767
  • Обьявления о работе282
  • Безопасность81
  • Новости70
  • Tips & tricks89
  • Сайты на MODX46
  • Форки MODX26
  • Документация и уроки63
  • Эксперименты и исследования58
  • evoShop3

Обновляем MODX Evo 1.0.8 до Evolution CMS 1.4.7


В предверии выхода версии 2.0 решил записать видео где показываю что EVO можно обновлять с любой версии начиная с 0.9.3 до 1.4.7.

Обновление на ветку 2.0 рекомендовано с 1.4.7.

Так же хочу напомнить что eForm, Ditto, Wayfinder, Breadcrumbs, Weblogin и другие старые сниппеты хоть и работают на 2.0 но есть вероятность словить ошибку поэтому настоятельно рекомендую обновлять на акутальные DocLister, FormLister и т д )

47 комментариев

Смотреть с 2:37 (до этого на видео установка старой версии!)
А я всегда качал архив и заливал на хостинг 🙂

Читайте также:  Установка gsm модуля в старлайн е90

Ссылка на чудо инсталер с видео: github.com/evolution-cms/installer
P.S. у меня после выбора Evo 1.4.7 — просто белая страница, может нужно дождаться закачки файлов или хостинг не поддерживает. (Сделать бы вывод ошибок и процесс загрузки в EVO Installer бы еще).

И в Package Management все модули которые нуждаться в обновлении было бы круто выводить сверху (экономило бы кучу времени каждый раз когда ищем обновление).

Обновил с 1.0.15 до 1.4.7. Перестало работать то ли TV-изображение, «прикрепляемое» к странице, то ли phpThumb. По крайней мере, такая конструкция
работала до, а теперь, сразу после обновления, перестала работать и показывает только noimage-***.png.

Тип ввода: Image
Визуальный компонент: [ничего].

Дитто работает как и работал
Но рекомендую на Доклистер переходить

Ибо рано или поздно дито не будет работать 😉

Нет, опять показывает только noimage-***.png

Имя TV: tv.image (и пробовал вариант с просто image).

Нашел. Надо принудительно указывать TV-шку в вызове: &tvList=`image`. (И «Имя параметра» — просто «image»). Тогда конструкция с phpthumb с DocLister’ом срабатывает.

Но с Ditto + пагинация никак не получается. Пробовал вплоть до вариант сменить версию PHP на новое, 7.1 в данном случае — и это не помогло.

А может, все-таки перейти на ДокЛистер? Там и пагинация есть.

Вы правильно сделали, в tvList нужно указывать все ТВ-параметры, используемые в выборке, причем указываются просто имена (image).

В шаблонах указывается как [+tv.image+].

Вот эта конструкция [+pub_date:date=`%d.%m.%Y`+] как-то подозрительна, похожа на PHx, черт её знает — всегда будет работать или нет. PHx (если есть) лучше убрать, и попытаться вместо него поставить галочку «Включить фильтры» в админке.

А ещё лучше и PHx убрать, и фильтрами не пользоваться, а просто в ДокЛистере сделать так:

А в шаблоне вывода, там где нужно вывести дату, вставляете плейсхолдер

И накаких PHx не надо. Сортировка будет по умолчанию.

Документация по ДокЛистер здесь

С системой и с ДокЛистером проблем нет, вот у меня пагинация на 1.4.7 с ДокЛистером
nmk54.ru/specialnye-stali/krugi/krug-kalibrovannyj

[ Обнаружение уровня ошибки РНР стоит «Обнаружить все» ]

Случай с Ditto + пагинация

1) Когда вызов вставляется в content / Содержимое ресурса страницы ( то есть, в редактор просто вставляется <> ), то в Протоколе событий:
[И так далее]

Ditto + пагинация не работает.

2) Когда вызов не вставляется в редактор, а находится в одном из чанков в шаблоне, то в Протоколе событий ошибка та же самая, но Ditto + пагинация работает.

Случай с DocLister + пагинация

1) Когда вызов вставляется в content / Содержимое ресурса страницы ( то есть, в редактор просто вставляется <> ), то в Протоколе событий:

Но DocLister + пагинация не работает.

2) Когда вызов не вставляется в редактор, а находится в одном из чанков в шаблоне, то в Протоколе событий ошибок нет и DocLister + пагинация работает.
Проще говоря, по сравнению с EVO 1.0.15, EVO 1.4.7 почему-то не принимает вставку вызова с пагинацией (и Ditto, и DocLister’а) прямо в редактор на странице.

Нет ли какой-то настройки, которая может это разрешить? Или это таки баг?

источник

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

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