Добавки (плъгини, пакети) за MODX Revolution. Инсталиране на текстовия редактор CKEditor (алтернатива на TinyMCE) на MODX Evolution Вмъкване на множество изображения tinymce modx revo
Днес в телеграмния канал на MODX те написаха, че TinyMCE Rich Text Editor не прави това и не прави това. Някои хора не са успели да го конфигурират, при някои е генерирал грешки и т.н. Въпросът за избора на редактор възникна за мен веднага след като преминах към MODX (което, нека ви напомня, се случи не толкова отдавна, преди около 8 месеца). Задачата беше една: да го направим прост, удобен и многофункционален редакторсъдържание. Играх с обичайния TinyMCE, играх с ckeditor, играх с TinyMCE Rich Text Editor и реших да избера последния.
Не искам да започвам holivar за това кой редактор е по-добър. споделям готово решениеработещ и многофункционален редактор. И кой да изберете, разбира се, зависи от вас.
История
Настройката не отне много време; персонализирането на редактора и вграждането отне много повече време необходими функции. Но за щастие все още знам как да търся малко в Google и намерих няколко полезни теми сред англоезичните ресурси, с помощта на които успях да внедря редактора, който в крайна сметка ще получим.Сглобяването мина без грешки.
Монтаж
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. Проверката на правописа TinyMCE поддържа огромен брой езици за проверка. Докато yandex.speller само 3 (руски, украински, английски).
Най-вероятно след актуализацията MODX Evolution системиТекстовият редактор TinyMCE не работи за вас. Това е снимката, която имам във всички актуализирани сайтове:
1. Изтеглете плъгина от тук.
2. Разархивирайте.
3. Попълнете папката ckeditor в папката активи/плъгини/
4. Създайте плъгин ckeditor
5. Копирайте съдържанието от ckeditor.tpl
Проверете системните събития „OnRichTextEditorInit“, „OnRichTextEditorRegister“ и „OnInterfaceSettingsRender“
6. Активирайте CKEditor
Можете да активирате CKEditor в Инструменти>Конфигурация>Интерфейс и презентация, в колоната " редактор:"избери CKEditor
7. Влизаме във всеки документ и виждаме тази снимка
8. Нека се сприятелим с CKEditor и файловия мениджър KCFinder
За да може редакторът да работи правилно файлов мениджър KCFinder замества този код във файла /assets/plugins/ckeditor/functions.php:
$mcpuk_path["база"] = MODX_BASE_URL. "manager/media/browser/mcpuk/browser.php" . $cke_query;$mcpuk_path["image"] = $mcpuk_path["база"] . "&Тип=изображения";
$mcpuk_path["flash"] = $mcpuk_path["база"] . "&Type=flash";
$mcpuk_path["link"] = $mcpuk_path["base"] . "&Тип=файлове";
$mcpuk_path["база"] = MODX_BASE_URL. "manager/media/browser/mcpuk/browse.php";// . $cke_query;
$mcpuk_path["image"] = $mcpuk_path["база"] . "?type=images";
Config.toolbar_simple = [ ["Източник","-","Максимизиране","Премахване на формат"], ["Поставяне на текст","Намиране","Замяна"], ["Връзка","Прекратяване на връзката"], ["Изображение ","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) въведете името на приставката, която ще инсталирате. И в групи от бутони ( лента с инструменти) вмъкнете „име на приставка“ на правилното място. Добавката е инсталирана и готова за използване.
защото MODX революцияпървоначално идва празен и за да работи сайта, мога да кажа с 99% сигурност, че ще трябва да инсталирате поне една добавка - найлонов плик. В тази връзка реших да пиша малък списък от пакети, които ще бъдат полезни за мнозинапри създаване на уебсайтове на MODx Revolution.
(статията е актуализирана на 11.02.2018 г.)
Добавки от основното хранилище на modx
Асо- осветяване на код при редактиране на шаблони, парчета, фрагменти + вграден Емет.
TinyMCE Rich Text Editor- хубав визуален редактор за съдържание, може да се разширява с допълнителни функции, вижте уебсайта на разработчика.
filetranslit- преименува файловете от кирилица на латиница при зареждане (например: качете снимка с име (заглавие) modx-plugin.png(когато сайтът бъде прехвърлен, такива имена на снимки ще се превърнат в кози и ще спрат да се показват)), файл с името ще бъде качен в админ панела modx-plugin.png.
транслит– транслитерация на псевдоними за страници (url) – задължително за .
FormIt- работа с форми (създаване форми за контактвсякаква сложност).
Колекции- групиране на документи (ресурси) - повече за големи сайтове, където има много документи в категории - спомага за облекчаване (ускоряване) на админ панела, т.к. ако имате огромно дърво на ресурсите, то ще започне да се сблъсква.
simpleUpdater- Актуализация на Modex с 1 щракване.
SEO професионалист- SEO асистент! Проверява дължината на полетата – заглавие, описание, добавя фокус ключова дума(ключови думи) и показва как ще изглеждат страниците резултати от търсенето.
Image SEO alt и title тагове- автоматично замества alt и title за изображения, ако не са посочени. Използвайте с повишено внимание на производствен сайт, това може да повреди някои изходи, които минават през CODE
Галерия– галерии с изображения
migx- много яко нещо! Показвайки няколко телевизора в съдържанието, можете да създадете слайдер, галерия и т.н.
SimpleSearch– организиране на търсене в сайта.
Маркиране- тагове за публикации, облак от тагове.
ClientConfig- Създаване клиентски настройки, които мениджърите ще могат да редактират в бъдеще. Тези. В него въвеждаме всичко, което се променя често или просто нещо, например контакти, адрес, слоган и др. – за да може клиентът да промени всичко лесно и бързо.
Наследяване на шаблон— задава шаблона за дъщерни елементи.
Версия X– компонент за тези, които предават сайтове за подобрение на фрийлансъри или може би дори на начинаещи. Проектиран да създава локални резервни копия на всички елементи (парчета, фрагменти, ресурси). Можете да видите стара версияи, ако е необходимо, да го възстановите. Също така ви позволява да разберете кой е направил определени промени.
Конзола– позволява ви да стартирате PHP код от бекенда.
AjaxManager— ускоряване на админ панела.
Captcha– captcha за влизане в админ панел – допълнителна защита.
архивиранеMODX– създаване на резервни копия от работещ уебсайт с 1 клик.
logPageNotFound– регистриране на грешки 404. Чудесно за проследяване неработещи връзки.
cacheClear – ви позволява да изтриете всичко от папката /core/cache/ с едно кликване.
Допълнения от хранилището на modstore.pro
Прочетете как да свържете допълнително хранилище.
AjaxForm- Изпращане на формуляри за контакт без презареждане на страницата, чрез Ajax. Използва FormIt, но всъщност можете да посочите свой собствен фрагмент.
Дата преди- Приятно форматиране на датата като CMS LiveStreet.
autoRedirector- създава 301 пренасочвания автоматично, можете също да създавате пренасочвания ръчно.
Билети- създаване на блог, форми за коментиране, рецензии и др.
Jevix- нещо като типограф, инсталиран на машината за билети
mixedImage- смесено зареждане на файл (замяна допълнително поле(за снимки, прикачени файлове и др.)
pdoTools- цяла комбинация, която включва следните фрагменти:
pdoResources- е предназначен основно за показване на списък с ресурси, но всъщност можете да го използвате, за да създадете много интересни неща: карта на сайта (за хора), фото галерии, портфолио, случаи от ресурси и др.
pdoMenu- създаване на меню.
pdoPage- подобно на pdoRecources, показва списък с ресурси + създава навигация страница по страница, включително от селекция от други фрагменти.
pdoCrumbs- да създавам галета(галета)
pdoUsers— потребителски изход
pdoSitemap— създаване на автоматично генерирана карта на сайта.xml
pdoСъседи— показва предишни и следващи документи (полезно за блогове, статии и др.)
pdoField— показва всяко поле на посочения ресурс или неговия родител, включително телевизионни параметри.
pdoTitle— предназначени за визуално разграничаване на документи с навигация по страниците.
pdoArchive— извеждане на архив от документи на сайта, разбити по дни, месеци и години
Анализатор— прихваща обработката на тагове на страницата.
Това е може би най-необходимият пакет, без него не можете да създадете нормален уебсайт. Освен това добавя поддръжка за шаблонния двигател на Fenom, който е по-бърз от вградения.
miniShop2- създаване на онлайн магазин.
BannerY- Компонент за управление на банери (реклама). По същество е лесно да се внедри плъзгач върху него.
phpThumbOn- миниатюри за изображения (показване на изображения от точните размери).
MinifyX– минимизиране и обединяване на скриптове и стилове в два файла (css и js) – ви позволява да намалите броя на заявките и да увеличите скоростта на зареждане на страницата.
xPoller2— Многоезични проучвания.
AdminTools– промяна на цветовата схема на админ панела, любими елементи, бележки, оторизация в админ панела чрез имейл и др.
frontendManager— Редактиране на страници от интерфейса.
dbAdmin – разглеждане на списък с таблици на база данни от MODx администратори Revo. Освен това ви позволява да експортирате както отделна таблица, така и цялата база данни като цяло. Може също да изтрива и изчиства таблици (внимавайте, когато го използвате) и да създава различни видове SQL заявки.
modDevTools – бързо търсене и замяна на елементи в парчета и фрагменти.
debugParser – Откриване на тесни места в сайта.
tagElementPlugin – ви позволява да редактирате фрагменти или части, като маркирате неговия таг и натиснете клавишните комбинации ctrl+enter.
controlErrorLog – добавя икона към горната лента с менюта, която показва наличието на записи в регистъра на грешките.
Универсални добавки
— автоматично компресиране на изображения на всеки сайт, услугата е платена, но не е скъпа, от самото начало ви се дават 10 MB - това е достатъчно за компресиране на около 500 изображения - което е достатъчно за всяка визитка, можете да получите и допълнителни 200 MB безплатно.
Една от най-популярните добавки за MODX Revolution е визуалният редактор TinyMCE.
Това е разбираемо; рядко сайт може да мине без добър редактор на богат текст за съдържание.
Тази статия обхваща инсталирането и конфигурирането на редактора TinyMCE.
Монтаж
За да инсталирате, трябва да изтеглите пакета от хранилището (http://modx.com/extras/package/TinyMCE) и да го инсталирате през секцията „Управление на пакети“ на вашия уебсайт.
След като инсталирате пакета, можете веднага да отворите всеки ресурс за редактиране и да се уверите, че редакторът се появява.
Можете веднага да започнете да пишете текст в него, но за по-удобно използване препоръчваме да настроите редактора.
Настройването на TinyMCE ще включва няколко стъпки:
- Свързване на файла със стилове
- Добавяне на бутони за работа с таблици
Свързване на стиловия файл към TinyMCE
Това е необходимо, за да може във визуалния редактор текстът да изглежда точно както на уебсайта: шрифт, размер и цвят на текста, дизайн на картинки и външен видмаси.
Отворете „Системни настройки“ и във филтъра изберете „Визуален редактор“:
В този раздел има общо 5 настройки:
- Път до CSS файла (editor_css_path)- посочете пътя до вашия файл с текстови стилове. Моля, имайте предвид, че не използвайте пълен cssфайла на вашия уебсайт и отделен файл, който съдържа само стилове, пряко свързани с дизайна на текста (заглавия h1-h6, параграфи p, връзки a, таблици таблици и други). Редакторът ще работи по-бързо и по-правилно.
- Използвайте текстов редактор (use_editor)- можете да деактивирате редактора за известно време, ако е необходимо, без да изтривате TinyMCE.
- Редактор (which_editor)- MODX Revolution ви позволява да инсталирате няколко различни редактора на вашия сайт и можете да превключвате между тях, ако е необходимо. Между другото, можете да замените тази настройка за администраторите на сайта, като по този начин зададете различни редактори на различни администратори.
- Редактор за елементи (which_element_editor)- задайте редактор за фрагменти, плъгини, парчета. Например, може да е CodeMirror или Ace.
Добавяне на бутони към TinyMCE за работа с таблици
В TinyMCE, който е инсталиран от хранилището на MODX Revolution, по някаква причина работата с таблици е деактивирана по подразбиране. Не, разбира се, можете да превключите на HTML режим и да напишете кода ръчно, но защо! Много по-лесно е да отделите 2 минути и да активирате поддръжката на маса.
Така че отворете системните настройки и в първия филтър изберете tinymce:
Ще се отвори списък с налични опции. Интересуваме се от 2:
- tiny.custom_plugins- списък на свързани плъгини към TinyMCS. Трябва да добавите " маса", като по този начин свързва плъгин за работа с таблици. Плъгинът идва с TinyMCE и не е необходимо да се инсталира, просто трябва да го активирате.
- tiny.custom_buttons3- списък с бутони, показани на 3-ти ред. Посочете там " таблични контроли", като по този начин добавя набор от бутони за работа с таблици. Ясно е, че тези бутони могат да бъдат поставени на всеки друг ред. Ако погледнете другите редове, ще видите списък с предварително зададени бутони като undo, redo, selectall и много други. Можете да „играете“ с тях, като поставите бутоните в различен ред.
Почти всеки уеб администратор използва един или друг визуален редактор (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 Път до CSS файл CSS файл) или.
HTML5 тагове
Честно казано, не успях да включа HTML5 тагове и да ги обработя разумно. Така че тръгнах по пътя на разрешаване на всякакви тагове чрез добавяне към файла core/components/tinymce/templates/script.tpl след ред след ред
Tiny.config =modx->toJSON($this->properties); ?>;
Tiny.config.valid_elements = "*[*]";
Което позволява преминаването на всякакви тагове. За тези, които искат да се объркат, на тази променлива може да бъде присвоен списък с всички възможни HTML тагове, включително HTML5 тагове от файла xconfig.js, включен в пакета.