Текстовый редактор modx revo

Текстовый редактор modx revo

Сегодня урок по текстовому редактору — 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 .

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

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

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

Установка

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

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

Читайте также:  Как пишется 1 миллиард цифрами

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

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

Комментарии (13)

Антон, еще такой вопрос, вот в визуальном редакторе выбираю я стиль «ЗАГОЛОВОК 1», по идеи это самый крупный заголовок, когда сохраняю и обновляю сайт, то текст какой был Arial 11, так и остался, это нормально?
Или здесь все по другому по отношению к EVO? Если в EVO я выбрал к тексту ЗАГОЛОВОК 1, то и на сайте текст будет как ЗАГОЛОВОК 1, а в REVO получается надо настраивать все через «редактор стилей», я правильно понимаю?

На этом скрине я изменил текст в визуальном редакторе, поставил так же ЗАГОЛОВОК 1 и ЖИРНОСТЬ

Но на сайте все без изменений

Это после редактирования текста в «редакторе стилей» в визуальном редакторе

Текст поменялся, можно ли сделать как нибудь так, чтобы стили прописывались не в html? В EVO я ставил тексту ЗАГОЛОВОК 1 в визуальном редакторе, сохранял и обновлял страницу и все норм, а в REVO придется каждый раз текст менять через «редактор стилей»?

Почистил я кэш, все равно без изменений. Сайт пока что лежит на OPEN SERVER, ниже фото как в редакторе выглядит заголовок и фото как на сайте отображается

Фото в редакторе

Отображение на сайте

А ниже тот же самый шаблон только сделанный в EVO
Фото редактора

Фото на сайте

CSS файл что на EVO, что на REVO одинаковый
Не может же это зависеть, что EVO на Denwet, а REVO на Open Server, хоть это даже глупо так думать…

Таки вы reset всем стилям сделали, присвоили им:

Читайте также:  Confessions on a dancefloor мадонна

Поэтому у вас весь текст(заголовки всех уровней, абзацы и тд) выглядят одинаково. Вы либо к заголовкам эти reset стили не применяйте, либо в text.css пропишите им размеры.
Например так:

Здравствуйте Вы можете мне помочь? Я плохо в этих стилях кодах разбираюсь Только редактирую свой сайт У меня вопрос Я прописала h2-стекольная мастерская а h1 было Мебель и Зеркала Так вот почему теперь при вводе домена в адресной строке высвечивается домен+стекольная м Было домен+мебель и зеркала Как я представляю h1 должно быть приоритетнее чем h2

И еще вопрос Помогите поменять размер h1 В коде элемента я вижу и могу поменять Но в чанке что то не вижу этого Нашла подходящие цифры но ничего не меняется Может какая блокировка есть

Для добавления комментариев вы должны авторизоваться или зарегистрироваться.

Ссылка на основную публикацию
Стоит ли учиться на нефтяника
Добыча газа и нефти — очень популярная сфера в России. Именно поэтому большое количество выпускников стремится поступать на специальность «Нефтегазовое...
Сони плейстейшен нетворк вход
Игры по сети, развлечения, друзья, покупки и многое другое – ваше сетевое приключение начинается в PSN. Подключитесь к нашему сетевому...
Сони f3112 xperia xa
Недорогой смартфон компании Sony (22 990 рублей за Dual версию) с интересным дизайном, LTE, двумя отдельными слотами для SIM-карт, слотом...
Стойка для аудио аппаратуры своими руками
Решил создать данную тему,т.к. думаю форумчанам будет интересно почитать, а кому то и поделиться личным опытом, по изготовлению своими руками...
Adblock detector