Tinymce rich text editor modx yfchjqrf — Рейтинг сайтов по тематике. Modx tinymce rich text editor
Добавление кнопок в визуальный редактор TinyMCE, для MODX revolution. | Инструкции
Нарисовалась такая проблема, делал сайт заказчику на MODX revo 2.2.4, его не устроило что мало кнопок в редакторе TinyMCE. При детальном рассмотрении редактора, еще выяснилось, что ссылку на соседнюю страницу сделать невозможно, невозможно использовать таблицу, цвет шрифта, фона и т.д.. Пришлось покавыряться у разработчика в поисках дополнительных кнопок и расширений. В MODx evo, в настройках интерфейса была чудесная возможность включить "full" и все вопросы отпадали. В MODX revo все по другому, все настройки делать нужно ручками. Не хочет наш Российский средний заказчик содержать админа, что делать? Будем подстраиваться за его деньги. Редактор TinyMCE предустановлен с минимальным набором кнопок. Все дополнения приходится прописывать самому, хотя они все есть и установлены вместе с редактором. Вот картинка полнофункционального примера, его и буду придерживаться. Снято у разработчика. Информацию черпал здесь.
Поехали!
Каждая кнопка в визуальном редакторе принадлежит определенному плагину, кнопок может быть несколько. Плагин и кнопка могут иметь одинаковое название, если в плагине одна кнопка.
Панель редактора разделена на четыре части, в MODX revolution- Система/Настройка системы/tinemce/ имеет для настроек пять строчек. Здесь мы будем прописывать (регистрировать) каждую подключенную кнопку.
- Custom Buttons Row 1 - это верхняя строчка в редакторе TinyMCE,
- Custom Buttons Row 2 - это вторая строчка в визуальном редакторе TinyMCE и т.д.
Вытягивать не будем, делаем по образцу разработчика, то есть в четыре ряда. Плагины прописываются чуть ниже в разделе: Custom Plugins. Рекомендую, уже существующие кнопки не удалять, потому-что есть такие, которые написаны для MODX. Например modximage. Выбираем тему: General/Editor Theme/, вернее меняем с "advanced" на "custom". Далее я буду приводить плагины и кнопки по порядку слева на право и сверху вниз. Название плагина прописываем в графе "Сustom Plugins", название кнопки в соответствующей строке "Custom Buttons". Некоторые кнопки имеют уже предустановленные плагины, которые прописывать не нужно.
Я буду писать, как на картинке, а куда нужную кнопочки разместите вы, решайте сами.
Custom Buttons Row 1.
Плагин: save - имеет две кнопки.
- save ("сохранить"),
- cancel (отменить все изменения).
Предустановленный плагин:
- newdocument (новый документ)
- bold (полужирный)
- italic (курсив)
- underline (подчеркнутый)
- strikethrough (зачеркнутый)
- justifyleft (по левому краю)
- justifycenter (по центру)
- justifyright (по правому краю)
- justifyfull (по ширине)
- formatselect
- fontselect
- fontsizeselect
- styleselect.
Custom Buttons Row 2.
Предустановленный плагин:
- cut (вырезать)
- copy (копировать)
- paste (вставить)
Плагин paste.
- pastetext (вставить как текст)
- pasteword (вставить из word)
- selectall (выделить все)
Плагин searchreplace:
- search (найти)
Предустановленный плагин:
- bullist (маркированный список)
- numlist (нумерованный список)
- outdent (уменьшить отступ)
- indent (увеличить отступ)
- blockquote (цитата)
- undo (отменить)
- redo (вернуть)
- link (добавить/изменить ссылку)
- anchor (добавить/изменить якорь)
- image (добавить/изменить изображение)
- cleanup (очистить лишний код)
- help (помощь)
- code (редактировать html-код)
Плагин insertdatetime:
- insertdate (добавить дату)
- inserttime (добавить время)
Плагин preview:
- preview (предварительный просмотр)
Плагин fullpage:
- fullpage (полная страница)
Предустановленный плагин:
- forecolor (цвет текста)
- backcolor (цвет выделения текста)
- forecolorpicker (цвет текста)
- backcolorpicker (цвет выделения текста)
Custom Buttons Row 3.
Плагин table:
- tablecontrols (добавление/изменение таблицы)
Следующие атрибуты кнопку не добавляют, но расширят возможности существующим кнопкам плагина table:
row_props (изменить свойства строки)cell_props (изменить свойства ячейки)delete_col (удалить столбец)delete_row (удалить строку)col_after (добавить колонку справа)col_before (добавить колонку слева)row_after (добавить строку снизу)row_before (добавить строку сверху)split_cells (разбить ячейку)merge_cells (объядинить ячейки)
Предустановленный плагин:
- hr (добавить черту)
- removeformat (очистьть формат)
- visualaid (все знаки)
- sub (подстрочный)
- sup (надстрочный)
- charmap (добавить символ)
Плагин emotions:
- emotions (добавить смайл)
Плагин media:
- media (добавить/изменить клип)
Плагин advhr:
- advhr (добавить разделитель)
Плагин print:
- print (печать)
Плагин directionality:
- ltr (направление слева на право)
- rtl (направление справа налево)
Плагин fullscreen:
- fullscreen (полноэкранный режим)
Предустановленный плагин:
- separator (разделитель группы кнопок) (в качестве разделителя, можно использовать прямой слэш ",|,").
Custom Buttons Row 4.
Плагин layer:
- insertlayer (добавить слой)
- moveforward (на передний план)
- movebackward (на задний план)
- absolute (абсолютное позиционирование)
Плагин style:
- styleprops (редактировать CSS стиль)
Плагин xhtmlxtras:
- cite (цитирование)
- acronym (сокращение)
- abbr (аббревиатура)
- del (удаление)
- ins (замена)
- attribs (добавить/изменить элемент)
Плагин visualchars:
- visualchars (все знаки)
Плагин nonbreaking:
- nonbreaking (добавить неразрывный пробел)
Плагин template:
- template (использовать шаблон)
Плагин pagebreak:
- pagebreak (добавить разрыв страницы)
Плагин spellchecker:
- spellchecker (правописание)
Ну вот, собственно и все. Теперь вы знаете как добавить кнопки к редактору TinyMCE.
marabar.ru
Проверка орфографии TinyMCE 4 для Modx revo
Визуальный редактор Modx Revo всегда был головной болью для всех пользователей данного фреймворка. С выходом TinyMCE Rich text editor стало легче, так как он использует последнюю версию TinyMCE. Но несмотря на то, что приложение адаптировано к Modx в нем до сих пор не завезли поддержку проверки орфографии на русском языке.
В стандартный набор Tiny MCE Rich text editor встроен плагин правописания поддерживающий более 6 языков, кроме русского. Однажды сидя за чашечкой кофе около компьютера я решил исправить эту проблему. Недолго погуглив я нашел элегантное решение проблемы.
Проверка орфографии на Modx средствами браузера
В приложении для modx TinyMCE Rich text editor есть возможность отключить плагин проверки правописания, идущий в комплекте. После его отключения текст будет проверяться средствами браузера.
Идем в системные настройки выбираем в выпадающем списке tinymcerte и находим параметр Spellcheck. В описании дословно написано — «Включить или выключить проверку орфографии браузером».
- Да — правописание проверяется браузером.
- Нет — включает проверку орфографии встроенным плагином;
Проверка орфографии на Modx средствами Яндекс Спеллер
Я же решил пойти дальше и попробовать очередной сервис представленный компанией Яндекс. Следуя официальной инструкции я внес необходимые правки в код приложения TinyMCE Rich text editor. Скажу сразу, что можно интегрировать Яндекс Спеллер и в другое приложение для Modx, так как инициализация сервиса происходит в функции init() TinyMCE.
Следуя моей инструкции вы сможете добавить проверку правописания Яндекс Спеллер в плагин TinyMCE Rich text editor для Modx. Я уже подключил его на сайт клиента и описываю последовательность действий.
Первым делом добавим вывод инструмента проверки правописания на тулбар. Это лучше задать в настройках приложения(смотри скриншот). Внимание параметр Spellcheck должен быть установлен на Нет.
Далее необходимо в функции init дополнить json объект параметрами Яндекс Спеллер. В настройках приложения TinyMCE Rich text editor для Modx есть параметр External config, который как я понял, мог бы помочь, но мне не удалось понять, как он работает, поэтому лезем в код.
Находим файл tinymcerte.js и открываем его любым текстовым редактором. Параметры будем писать не напрямую в функцию init, а в json объект cfg метода .extend(), так как автор приложения TinyMCE Rich text editor использует его для инициализации TinyMCE.
Параметры, которые нужны для активации сервиса проверки правописания Яндекс Спеллер:
- plugins: [«spellchecker»] — настройка TinyMCE активирует плагин Яндекс Спеллер;
- spellchecker_languages: «Russian=ru, English=en» — настройка указывает список языков доступных для проверки орфографии;
- spellchecker_language: «ru» — язык установленный по дефолту;
- spellchecker_rpc_url: «//speller.yandex.net/services/tinyspell» — url сервиса.
Код ниже это конечный результат. То есть мы дополнили метод .extent() своими настройками. Json объект cfg это и есть параметры инициализации TinyMCE
Ext.extend(TinyMCERTE.Tiny,Ext.Component,{ cfg: { selector: '#ta', document_base_url: MODx.config.base_url, file_browser_callback_types: 'file image media', plugins: ["spellchecker"], spellchecker_languages: "Russian=ru,English=en", spellchecker_language: "ru", // default language spellchecker_rpc_url: "//speller.yandex.net/services/tinyspell" }
Как видим, проверка орфографии работает, вкладка в тулбаре есть. Помимо тулбара появился новый пункт винструментах.
Что я думаю про Яндекс Спеллер
На самом деле отличный сервис, который работает. Разницы с проверкой орфографии браузером я пока не нашел. Думаю профит можно почувствовать со временем, пока я не часто пишу статьи. Я ставил данный сервис в надежде получить проверку пунктуации, я особо не изучал функции Спеллера, просто надеялся и верил. К сожалению пока Яндекс Спеллер не умеет проверять пунктуацию.
Надеюсь вам помогла моя статья. Пишите свои вопросы в комментариях постараюсь помочь. Ну и жмите лайки)
cat-design.ru
TinyMCE 4.0 для MODX Revo + RTE для introtext — Денис Дыранов
Меня всегда бесило, что в MODX нельзя поставить визиуальный редактор на поле introtext. В качестве решения этой проблемы, обычно рекомендуется вместо introtext использовать TV. Но это создает некоторые проблемы. Получается, что в настройках форм, мы вырубаем introtext и прочие лишние поля. Вводная часть текста у нас теперь в TV, который при создании нового документа скрыт в отдельной вкадке. Если же мы включаем в настройках отображение TV под контентом, то получается, что у нас вводная часть следует за основным содержанием, что как-то нелогично. Чтобы сделать логично для пользователя (контент-менеджера), можно пойти дальше и хранить вводную часть в content, а основную в TV, но с точки зрения системы это будет ещё более бредово. Кроме того мы создаем лишние запросы к БД, чтоб получить значение из TV.
В итоге у нас получается что-то типа того (Rich Text Editor на скриншоте — TinyMCE 3-ей версии со скином ribbon)
Почему разработчики MODX упорно не хотят прицеплять RTE к introtext мне не ясно. Но, не хотят они, сделаем сами.
Я ни разу не программист и довольно плохо разбираюсь во внутренностях MODX. EXT.js для меня — тёмный лес, но я знаю, что RTE в большинстве случаев цепляется к textarea простым JavaScript'ом. В MODX для RTE есть целая система: редактор прописывается где-то в системе, обрабатываются какие-то события OnRichTextEditorInit, OnRichTextEditorRegister. Какие-то настройки редактора прописываются в настройках плагина, какие-то в настройках системы. Нафига всё это нужно — я не знаю. Поэтому я решил пойти самым тупым путём: я просто добавлю скрипты вызова редактора в админке и зацеплюсь к нужным текстовым областям по их id.
Лирическое: Меня несколько напрягает излишняя навороченность MODX в некоторых моментах. Сделали такую систему подключения для рекдактора, куча стандартных полей, типа description и longtitle с сомнительной пользой. Думаю штуке, которая называется фреймворком, хорошо бы быть попроще. Точнее сказать, чуть более низкоуровневой что ли. А пока мы грузим лишние поля и тут же скрываем их яваскриптом...
Для своих извращений я выбрал TinyMCE4. Он симпатичный, легко настраиваемый и популярный, а значит для него написано и пишется множество плагинов. Кроме того, мне более-менее удалось адаптировать для него типограф Typofilter, и к нему лекго прикручивается Яндекс.Спеллер.
Итак, я написал небольшой плагинчик. Плагинчик совершенно по-тупому подключает TinyMCE 4.0 к выбранным текстовым областям в админке, в обход всех систем работы с RTE MODX'а (то есть по сути, это такой хак, который вы можете использовать на свой страх и риск). Редактор по-умолчанию подключается к introtext и content, в настройках плагина можно прописать и другие области, например, TV. Диалог вставки изображений, открывает стандартный файловый менеджер MODX. Вот результаты его работы:
Плагин создаёт две версии редактора TinyMCE. Простую для introtext и более навороченную для content. Повесить редактор на TV можно в настройках плагина (вкладка «Параметры»). Для этого в поле light_rte_fields (для простой версии) или full_rte_fields (для навороченной) нужно через запятую указать css-id нужного поля. Например, #tv1 для TV c ID=1, #tv2 и т. д. Тип ввода у TV при этом должен быть «Текстовая область», а не «Текстовый редактор».
Все плагины и настройки для TinyMCE прописаны в коде плагина. Там простой JavaScript как в документации к TinyMCE, так что добавление плагина или кнопки не должно вызвать проблем. Папка, с TinyMCE: /manager/assets/components/tinymce/.
Из коробки установлены стандартные плагины, спеллер Яндекса и типограф Typofilter. Последний довольно глючный, не обрабатывает тексты внутри таблиц, но лучше пока ничего не нашёл. Монструозные типографы с кучей движков из 3-й версии TinyMCE адаптировать под 4-ю совсем не хочется, тем более, что они скорее не работают.
Каким-то магическим образом, при вставке изображений вызывается браузер MODX. Я сам не знаю как я это сделал :-) и не уверен, что сделал правильно, но оно работает. Тут отдельно хочется отметить «чудесную» документацию по MODX.js. Параметры вызова браузера подбиралиь наугад. Я добился того, чтоб в браузере открывалась нужная папка, если выбрано какое-то изображение, но сделать так, чтоб этот фалй был выделен в браузере у меня не получилось. Дефолтная папка для браузера указывается в настройках плагина.
ВАЖНО! Так как этот плагин — хак, не принимающий во внимание встроенную в MODX поддержку RTE, в настройках системы у вас не должно быть выбранного редактора.
Установка: качаем архив с плагином по ссылке ниже, не распаковаем, кладем его в /core/packages/. В MODX: Система — управление пакетами, на кнопке «Загрузить дополнения» выбираем пункт «Искать пакеты локально». Дальше как обычно, установить и пользоваться.
Скачать tiny4intro-1.0-beta1.transport
Буду признателен, если кто-то доведёт плагин до ума.
dyranov.ru
Content Editor Tools / modx.pro
Я решил немного облегчить себе жизнь и сделал 2 плагина (на самом деле 3) для работы с контентом из админки. Этот набор плагинов я назвал Content Editor Tools, чтоб не путать их с похожими имеющимися.Первое, это Rich Text Editor. Тут на выбор: TinyMCE или CKEditor. Второе: AssetsTV — это для работы с файлами. Пока всё в статусе беты.
TinyMCE и CKEditor умеют работать с introtext и description. В оба встроен простой, но рабочий типограф typofilter. В TinyMCE до кучи Яндекс.Спеллер. В обоих в режиме просмотра кода работает CodeMirror. Файловый браузер MODx открывается максимально нативно (не в отдельных окнах или айФреймах). Для обоих редакторов сделан скин а-ля MODx. Над набором плагинов ещё работаю.
AssetsTV — это набор из TV input type, плагина и сниппета. Модуль нужен для быстрой загрузки фалов в указанную папку (поддерживаются источники файлов). То есть это такая дропзона в дополнительных полях, в которую можно накидать фаликов. Кроме того она отображает существующие файлы, даёт возможность добавить к ним описание, отсортировать, вставить в RTE (при этом картинки можно вставить с превьюшкой для лайтбоксов). Можно определять типы файлов и вставлять их в редактор с разными шаблонами.
Сниппет assetsTV выводит загруженные файлы различными способами.
Все данные хранятся в TV в JSON. Новых таблиц в базе AssetsTV не создаёт. Так что будет работать и с теми фалами, которые вы уже загрузили раньше. Для загрузки используются переработанные стандартные процессоры MODx.
Видео работы RTE: www.youtube.com/watch?v=UVYg7Wtk9KI Видео работы AssetsTV: www.youtube.com/watch?v=K1dKHoOG7Dk
Скачать транспортные пакеты: CET_TinyMCE: yadi.sk/d/LiTKx6t3kokFV CET_CKEditor: yadi.sk/d/G0hcxoaqkokFU CET_AssetsTV: yadi.sk/d/O04AZY9CkokFX
modx.pro
|
CKEditor.com | The best web text editor for everyone CKEditor is a free, Open Source HTML text editor designed to simplify website content creation. It's a WYSIWYG editor that brings common word processor features directly to your web pages. ckeditor.com ckeditor, free, open source, web, website Рейтинг Alexa: #5,462,930 Google PageRank: 8 из 10 |
Рейтинг: 26.5 |
|
|
Infix PDF Editor - edits PDFs like a Word Processor The best way to edit paragraphs in a PDF. Also find & replace, spellcheck, translate, fill-in forms, scan, redact, export - clever PDF editing, made simple. iceni.com pdf editor, pdf edit text, editing text in a pdf, text pdf Рейтинг Alexa: #248,009 Google PageRank: 6 из 10 |
Рейтинг: 21.2 |
|
|
РЎР?Р‘-РўСЋРЅРёРЅРі xt text text text text text text text text text text text text text text text text text text text text text text text text sib-tuning.ru Google PageRank: 0 из 10 |
Рейтинг: 19.5 |
|
|
Personal Organizer Info Angel and Free Text Editor Angel Writer Personal Organizer Info Angel and Free Text Editor Angel Writer angelicsoftware.com info angel, personal organizer, personal information manager, pim, angel writer Рейтинг Alexa: #1,291,320 Google PageRank: 0 из 10 Яндекс ТИЦ: 50 |
Рейтинг: 18.6 |
|
|
CMS MODx - Разработка сайтов на MODx, примеры, документация, уроки, ресурсы, ссылки . CMS MODx , уроки, ресурсы, примеры и описания.У каждого разработчика есть свои причины для работы с определённой системой.MODx даёт максимальную свободу при разработке сайта. h88.ru чанки, форма, уроки, статья, статьи Google PageRank: 1 из 10 |
Рейтинг: 18.1 |
|
|
TinyMCE » WYSIWYG редактор на Javascript tinymce.ru Google PageRank: 2 из 10 |
Рейтинг: 17.8 |
|
|
Your Rich Way | Компания YOUR-RICH-WAY Компания YOUR-RICH-WAY your-rich-way.com yrw, your-rich-way, компания your rich way, йо рич вэй, твой богатый путь Google PageRank: 1 из 10 |
Рейтинг: 16.4 |
|
rankw.ru
Начальный минимум расширений для MODX Revolution
Каждый раз, начиная новый проект на MODX Revolution, прежде чем начинать что-то ваять, надо установить все необходимые дополнения. Возможно кому-то данная информация поможет, вот список тех расширений, которые я ставлю начиная проект на MODX Revolution, всё остальное ставится опционально по потребностям или дописывается ручками.
Первоначальный пакет дополнений для MODX Revolution, включает в себя следующие расширения:
Breadcrumbs – расширение генерирующее так называемые "хлебные крошки", ведь для хорошего юзабилити, навигация должна преследовать пользователя, конечно не навязчиво.
ACE (ранее пользовался Codemirror, но душа не лежала к нему) – расширение подсвечивающее код, удобство работы с чанками, шаблонами и тд. Данное расширение не подсвечивает код в статьях.
CustomURLs – расширение позволяет сделать автоматическую генерацию URL для каждого материала, по своему вкусу и уровню извращенной фантазии. Использовать можно всё, начиная от обычных стандартных полей материала, до TV параметров и модификаторов вывода.
FormIt – наше всё, расширение по работе с формами, любого назначения и вида.
getPage – расширение реализующее разбиение на страницы. Работает вместе с getResources или getProduct, ну или чем-либо другим реализующим выборки ресурсов.
getResources – расширение позволяющее делать выборки материалов, его вообще стоит ставить самым первым в любой проект. С помощью этого расширения можно реализовать практически всё, что подразумевает выборку материалов, например, те же "хлебные крошки", карту сайта и многое другое.
GoogleSiteMap – расширение создающее карту сайта, в виде файла xml, который не забудьте добавить в ваши панели web-мастеров от Google и Yandex.
phpThumbOn – расширение для работы с изображениями на лету с помощью популярного скрипта phpThumb. Данное расширение является аналогом phpThumbOff, вследствие чего ест все его настройки и параметры. В тоже время в отличии от phpThumbOff генерирует название изображений, более подходящих для SEO, а также обладает большей производительностью, еще он оптимизирован под множественные вызовы на одной странице.
Redirector – расширение позволяющее реализовать обычный редирект. Управление очень простое, пишем ссылку, откуда и ссылку куда.
TinyMCE Rich Text Editor (ранее пользовался TinyMCE, мне не очень понравился, хотя функционально одинаковая) – удобный редактор для полей материалов. На сайте разработчика можно посмотреть как включить дополнительные функции.
translit – расширение генерирующее alias материала путём транслитерации. По опыту рекомендую добавить в таблицы правила для точки, запятой и восклицательного знака.
Wayfinder – расширение позволяющее создавать меню, любых видов и уровней вложенностей.
Это минимум, который сделает Вашу работу по созданию и дальнейшей эксплуатации сайта на MODX Revolution комфортной и удобной. Вот собственно и всё, добра Вам!
www.romandubinevich.ru
