Mga add-on (plugin, package) para sa MODX Revolution. Mga setting ng aking editor TinyMCE Text editor para sa modx revo

Halos bawat webmaster ay gumagamit ng isa o isa pang visual editor (WYSIWYG) upang mag-post ng nilalaman sa site. Hindi lamang pinapayagan ka ng mga visual na editor na magtrabaho sa HTML tulad ng sa plain text sa isang text editor, ngunit mayroon ding functionality na nagpapadali sa buhay para sa isang webmaster. Gayunpaman, ang huli ay hindi lamang maaaring gawing simple ang buhay, ngunit kumplikado din ito.

Sa MODX Revolution, pangunahing ginagamit ko ang TinyMCE editor, na naka-install bilang isang hiwalay na pakete. Hindi ko sasabihin ang tungkol sa mga kalamangan at kahinaan nito, ngunit ngayon ay tatalakayin ko lamang ang mga puntong iyon na ginagamit ko upang gawing mas madali ang pagtatrabaho dito.

Mga default na setting

Kaagad pagkatapos i-install ang TinyMCE package, sinusuri ko ang tinymce block sa mga setting ng system:

Tiny.forced_root_block gawin itong walang laman tiny.path_options dapat walang laman ang tiny.base_url ay dapat walang laman

Binago ko rin ang opsyong convert_urls sa Hindi sa mga setting ng plugin ng TinyMCE. Ginagawa ko ito upang hindi subukan ng editor na baguhin ang mga link na itinakda ko.

Pagkonekta ng styles file

Hindi ko ito palaging ikinokonekta, ngunit kung minsan ito ay kapaki-pakinabang at ginagawang mas madali ang pagtatrabaho sa nilalaman. Ginagawa ito sa pamamagitan ng pagtukoy sa editor_css_path system setting sa Rich-Text Editor system settings block setting Path sa CSS file o.

Mga tag ng HTML5

Sa totoo lang, hindi ko nagawang magsama ng mga HTML5 tag at maproseso ang mga ito nang matalino. Kaya nagpunta ako sa ruta ng pagpayag sa anumang mga tag sa pamamagitan ng pagdaragdag sa file core/components/tinymce/templates/script.tpl pagkatapos ng linya pagkatapos ng linya

Tiny.config =modx->toJSON($this->properties); ?>;

Tiny.config.valid_elements = "*[*]";

Na nagpapahintulot sa pagpasa ng anumang mga tag. Para sa mga gustong malito, ang variable na ito ay maaaring magtalaga ng isang listahan ng lahat ng posibleng HTML tag, kasama ang HTML5 tags mula sa xconfig.js file na kasama sa package.

Dahil ang MODX Revolution sa simula ay walang laman at para gumana ang site, masasabi kong may 99% na katiyakan na kakailanganin mong mag-install ng kahit isang add-on - plastik na bag. Sa bagay na ito, nagpasya akong magsulat isang maliit na listahan ng mga pakete na magiging kapaki-pakinabang sa marami kapag gumagawa ng mga website sa MODx Revolution.

(na-update ang artikulo noong 02/11/2018)

Mga karagdagan mula sa pangunahing imbakan ng modx

Ace- pag-highlight ng code kapag nag-e-edit ng mga template, chunks, snippet + built-in emmet.

TinyMCE Rich Text Editor- isang magandang visual na editor para sa nilalaman, maaaring mapalawak ng mga karagdagang function, tingnan ang website ng developer.

filetranslit- pinapalitan ang pangalan ng mga file mula sa Cyrillic patungong Latin kapag naglo-load (halimbawa: mag-upload ng larawan na may pangalan (pamagat) modx-plugin.png(kapag inilipat ang site, ang mga pangalan ng larawan ay magiging mga kambing at titigil sa pagpapakita)), isang file na may pangalan ay ia-upload sa admin panel modx-plugin.png.

translit– transliterasyon ng mga alias para sa mga pahina (url) – kinakailangan para sa .

FormIt- nagtatrabaho sa mga form (paglikha ng mga form ng contact ng anumang kumplikado).

Mga koleksyon- pagpapangkat ng mga dokumento (mga mapagkukunan) - higit pa para sa malalaking site kung saan maraming mga dokumento sa mga kategorya - tumutulong upang mapawi (pabilisin) ang admin panel, dahil kung mayroon kang malaking resource tree, magsisimula itong mag-glitch.

simpleUpdater- Pag-update ng Modex sa 1 click.

SEO Pro- SEO assistant! Sinusuri ang haba ng mga field - pamagat, paglalarawan, nagdaragdag ng focus na keyword (mga keyword) at ipinapakita kung paano magiging hitsura ng mga pahina sa mga resulta ng paghahanap.

Image SEO alt at mga tag ng pamagat- Awtomatikong pinapalitan ang alt at pamagat para sa mga larawan kung hindi tinukoy ang mga ito. Gumamit nang may pag-iingat sa isang site ng produksyon, maaari itong masira ang ilang mga output na dumaan sa CODE

Gallery– mga gallery ng imahe

migx- napaka cool na bagay! Pagpapakita ng ilang mga TV sa nilalaman, maaari kang lumikha ng isang slider, gallery, atbp.

SimpleSearch– organisasyon ng paghahanap sa site.

Tagger- mga tag para sa mga post, tag cloud.

ClientConfig– paglikha ng mga setting ng kliyente, na maaaring i-edit ng mga tagapamahala sa ibang pagkakataon. Yung. Ipinasok namin dito ang lahat ng madalas na nagbabago, o isang bagay lang, halimbawa, mga contact, address, slogan, atbp. – para madali at mabilis na mababago ng customer ang lahat.

Magmana ng Template— nagtatakda ng template para sa mga elemento ng bata.

BersyonX– isang bahagi para sa mga nag-aabot ng mga site para sa pagpapabuti sa mga freelancer, o marahil kahit na mga baguhan. Idinisenyo upang lumikha ng mga lokal na backup ng lahat ng mga elemento (mga tipak, mga snippet, mga mapagkukunan). Maaari mong tingnan ang lumang bersyon at ibalik ito kung kinakailangan. Nagbibigay-daan din ito sa iyo na malaman kung sino ang gumawa ng ilang partikular na pagbabago.

Console– nagbibigay-daan sa iyong patakbuhin ang PHP code mula sa backend.

AjaxManager— acceleration ng admin panel.

Captcha– captcha para sa pag-log in sa admin panel – karagdagang proteksyon.

backupMODX– paglikha ng mga backup mula sa isang gumaganang website sa 1 click.

logPageNotFound– mga error sa log 404. Mahusay para sa pagsubaybay sa mga sirang link.

cacheClear – nagbibigay-daan sa iyo na tanggalin ang lahat mula sa /core/cache/ folder sa isang click.

Mga karagdagan mula sa imbakan ng modstore.pro

Basahin ang tungkol sa kung paano ikonekta ang isang karagdagang repository.

AjaxForm- Pagpapadala ng mga contact form nang hindi nire-reload ang pahina, sa pamamagitan ng Ajax. Gumagamit ng FormIt, ngunit sa katunayan maaari mong tukuyin ang iyong sariling snippet.

DateAgo- Magandang pag-format ng petsa tulad ng CMS LiveStreet.

autoRedirector- Awtomatikong gumagawa ng 301 na pag-redirect, maaari ka ring gumawa ng mga pag-redirect nang manu-mano.

Mga tiket- paglikha ng isang blog, mga form sa pagkokomento, mga pagsusuri, atbp.

Jevix- isang bagay na parang typograph, na naka-install sa Tickets machine

mixedImage- halo-halong pag-upload ng file (pagpapalit ng karagdagang field (para sa mga larawan, attachment, atbp.)

pdoTools- isang buong pagsasama, na kinabibilangan ng mga sumusunod na snippet:
pdoResources- ay pangunahing inilaan upang magpakita ng isang listahan ng mga mapagkukunan, ngunit sa katunayan, maaari mo itong gamitin upang lumikha ng maraming mga kawili-wiling bagay: isang mapa ng site (para sa mga tao), mga gallery ng larawan, mga portfolio, mga kaso mula sa mga mapagkukunan, atbp.
pdoMenu- paglikha ng menu.
pdoPage- tulad ng pdoRecources, ay nagpapakita ng listahan ng mga mapagkukunan + lumilikha ng page navigation, kabilang ang mula sa isang seleksyon ng iba pang mga snippet.
pdoCrumbs- para sa paglikha ng mga mumo ng tinapay
pdoUsers— output ng gumagamit
pdoSitemap— paglikha ng isang awtomatikong nabuong sitemap.xml
pdo Mga Kapitbahay— nagpapakita ng nakaraan at susunod na mga dokumento (kapaki-pakinabang para sa mga blog, artikulo, atbp.)
pdoField— ipinapakita ang anumang field ng tinukoy na mapagkukunan o ang magulang nito, kabilang ang mga parameter ng TV.
pdoTitle— dinisenyo upang biswal na makilala ang mga dokumento gamit ang page navigation.
pdoArchive— output ng isang archive ng mga dokumento ng site na hinati-hati sa mga araw, buwan at taon
Parser— humarang sa pagproseso ng mga tag sa pahina.
Ito marahil ang pinakakailangan na pakete kung wala ito hindi ka makakagawa ng isang normal na website. Bukod dito, nagdaragdag ito ng suporta para sa Fenom template engine, na mas mabilis kaysa sa built-in.

miniShop2- paglikha ng isang online na tindahan.

BannerY- Component para sa pamamahala ng mga banner (advertising). Ito ay mahalagang ipatupad ang isang slider dito.

phpThumbOn- mga thumbnail para sa mga larawan (pagpapakita ng mga larawan na may mga kinakailangang laki).

MinifyX– pagpapaliit at pagsasama ng mga script at istilo sa dalawang file (css at js) – nagbibigay-daan sa iyong bawasan ang bilang ng mga kahilingan at pataasin ang bilis ng paglo-load ng pahina.

xPoller2— Multilingual na mga survey.

AdminTools- baguhin ang scheme ng kulay ng admin panel, mga paboritong elemento, mga tala, pahintulot sa admin panel sa pamamagitan ng email, atbp.

frontendManager— Pag-edit ng mga pahina mula sa frontend.

dbAdmin – tinitingnan ang listahan ng mga talahanayan ng database mula sa admin panel ng MODx Revo. Pinapayagan ka nitong i-export ang parehong hiwalay na talahanayan at ang buong database sa kabuuan. Maaari rin itong magtanggal at mag-clear ng mga talahanayan (mag-ingat kapag ginagamit ito) at makagawa ng iba't ibang uri ng mga query sa SQL.

modDevTools – mabilis na paghahanap at pagpapalit ng mga elemento sa mga chunks at snippet.

debugParser – Paghahanap ng mga bottleneck sa site.

tagElementPlugin – nagbibigay-daan sa iyong mag-edit ng mga snippet o chunks sa pamamagitan ng pagpili sa tag nito at pagpindot sa ctrl+enter key combinations.

controlErrorLog – nagdaragdag ng icon sa tuktok na menu bar na nagpapahiwatig ng pagkakaroon ng mga entry sa log ng error.

Pangkalahatang mga plugin

— awtomatikong pag-compress ng mga imahe sa anumang site, ang serbisyo ay binabayaran, ngunit hindi mahal, mula sa simula ay binibigyan ka ng 10 MB - ito ay sapat na upang i-compress ang tungkol sa 500 mga imahe - na sapat para sa anumang business card, maaari ka ring makakuha ng karagdagang 200 MB nang libre.

Isa sa mga pinakasikat na add-on para sa MODX Revolution ay ang TinyMCE visual editor.

Naiintindihan ito; bihirang magagawa ng isang site nang walang mahusay na richtext editor para sa nilalaman.

Sinasaklaw ng artikulong ito ang pag-install at pag-configure ng TinyMCE editor.

Pag-install

Upang i-install, kailangan mong i-download ang package mula sa repository (http://modx.com/extras/package/TinyMCE) at i-install ito sa pamamagitan ng seksyong "Pamahalaan ang Mga Package" ng iyong website.

Pagkatapos i-install ang package, maaari mong agad na buksan ang anumang mapagkukunan para sa pag-edit at tiyaking lilitaw ang editor.

Maaari mong simulan kaagad ang pagsusulat ng teksto dito, ngunit para sa mas komportableng paggamit, inirerekomenda namin ang pag-set up ng editor.

Ang pagse-set up ng TinyMCE ay may kasamang ilang hakbang:

• Pagkonekta ng styles file
• Pagdaragdag ng mga pindutan para sa pagtatrabaho sa mga talahanayan

Pagkonekta ng style file sa TinyMCE

Ito ay kinakailangan upang sa visual editor ang teksto ay mukhang katulad ng sa website: font, laki at kulay ng teksto, disenyo ng mga larawan at hitsura ng mga talahanayan.

Buksan ang "System Settings," at sa filter piliin ang "Visual Editor":

Mayroong kabuuang 5 mga setting na magagamit sa seksyong ito:

• Path sa CSS file (editor_css_path)- tukuyin ang landas sa iyong file na may mga estilo ng teksto. Pakitandaan na hindi mo dapat gamitin ang buong CSS file ng iyong site, ngunit isang hiwalay na file, kung saan ang mga istilo lamang na direktang nauugnay sa disenyo ng teksto (heading h1-h6, mga talata p, mga link a, mga talahanayan ng talahanayan at iba pa) dapat isama. Ang editor ay gagana nang mas mabilis at mas tama.
• Gumamit ng text editor (use_editor)- maaari mong huwag paganahin ang editor nang ilang sandali kung kinakailangan, nang hindi tinatanggal ang TinyMCE.
• Editor (which_editor)- Binibigyang-daan ka ng MODX Revolution na mag-install ng maraming iba't ibang mga editor sa iyong site, at maaari kang lumipat sa pagitan ng mga ito kung kinakailangan. Sa pamamagitan ng paraan, maaari mong i-override ang setting na ito para sa mga administrator ng site, kaya nagtatalaga ng iba't ibang mga editor sa iba't ibang mga administrator.
• Editor para sa mga elemento (which_element_editor)- tukuyin ang isang editor para sa mga snippet, plugin, chunks. Halimbawa, maaaring ito ay CodeMirror o Ace.

Pagdaragdag ng mga pindutan sa TinyMCE para sa pagtatrabaho sa mga talahanayan

Sa TinyMCE, na naka-install mula sa repositoryo ng MODX Revolution, sa ilang kadahilanan ay hindi pinagana ang pagtatrabaho sa mga talahanayan bilang default. Hindi, siyempre maaari kang lumipat sa HTML mode at manu-manong isulat ang code, ngunit bakit! Mas madaling gumugol ng 2 minuto at paganahin ang suporta sa talahanayan.

Kaya, buksan ang mga setting ng system, at sa unang filter piliin tinymce:

Magbubukas ang isang listahan ng mga magagamit na opsyon. Kami ay interesado sa 2:

• tiny.custom_plugins- listahan ng mga konektadong plugin sa TinyMCS. Dapat kang magdagdag" mesa", sa gayon ay nagkokonekta ng isang plugin para sa pagtatrabaho sa mga talahanayan. Ang plugin ay kasama ng TinyMCE at hindi kailangang i-install, kailangan mo lang itong paganahin.
• maliit.custom_buttons3- listahan ng mga pindutan na ipinapakita sa ika-3 linya. Ipahiwatig doon" tablecontrols", sa gayon ay nagdaragdag ng isang hanay ng mga pindutan para sa pagtatrabaho sa mga talahanayan. Malinaw na ang mga pindutan na ito ay maaaring ilagay sa anumang iba pang linya. Kung titingnan mo ang iba pang mga linya, makikita mo ang isang listahan ng mga preset na button tulad ng undo, redo, selectall at marami pang iba. Maaari kang "maglaro" sa kanila sa pamamagitan ng paglalagay ng mga pindutan sa iba't ibang mga order.

Ngayon sa channel ng telegram ng MODX ay isinulat nila na ang TinyMCE Rich Text Editor ay hindi ginagawa ito at hindi ginagawa iyon. Nabigo ang ilang tao na i-configure ito, para sa ilan ay gumawa ito ng mga error, atbp. Ang tanong ng pagpili ng isang editor ay bumangon para sa akin sa sandaling lumipat ako sa MODX (na, hayaan mo akong ipaalala sa iyo, nangyari hindi pa katagal, mga 8 buwan na ang nakakaraan). Mayroon lamang isang gawain: gumawa ng simple, maginhawa at multifunctional na editor ng nilalaman. Naglaro ako sa regular na TinyMCE, naglaro sa ckeditor, naglaro sa TinyMCE Rich Text Editor at nagpasyang piliin ang huli.

Hindi ko nais na magsimula ng isang holivar tungkol sa kung aling editor ang mas mahusay. Nagbabahagi ako ng isang handa na solusyon para sa isang gumagana at multifunctional na editor. At kung alin ang pipiliin ay siyempre nasa iyo.

Kwento

Ang pag-setup ay hindi tumagal ng maraming oras; Ngunit sa kabutihang palad, alam ko pa rin kung paano mag-Google nang kaunti at nakakita ng ilang kapaki-pakinabang na paksa sa mga mapagkukunan sa wikang Ingles, sa tulong kung saan naisagawa ko ang editor na makukuha namin sa kalaunan.

Ang pagpupulong ay walang mga pagkakamali.

Pag-install

1) Maaari mong i-download ang auto-installer mula sa aking bagong likhang Git repository.

2) Ang proseso ng pag-install ay napaka-simple - i-drop ang file na tinymcerte-1.0.0-beta.transport.zip sa ../core/packages/ at hanapin ang package nang lokal sa pamamagitan ng installer. Susunod na i-install lang namin ito. Itatakda mismo ng auto-installer ang mga setting.

3) Sa folder na /files/TinyMCERTE-settings/, makakahanap ka ng maliit na readme.txt at typograf plugin, na dapat ilagay sa editor plugins folder (basahin ang tungkol dito sa readme.txt). Iyon lang - handa nang gamitin ang editor.

Mga babala at rebisyon

1) Sinubukan ko ang auto-installer na ito sa isang malinis na site at isang site na walang naka-install na editor. Hindi ko alam kung paano at ano ang mangyayari kung i-install mo ito sa isang site na mayroon nang editor (Ace doesn't count).

2) Magiging maganda na awtomatikong ilagay ang typograf folder sa nais na seksyon, ngunit ang aking kaalaman ay hindi sapat upang ipatupad ang ideyang ito. Kung may gustong tumulong, astig. Ipo-post ko ang mga pinagmumulan ng auto-installer na ito sa parehong repository ngayon, ngunit mamaya sa gabi.

4) Upang suriin ang spelling, ginagamit ng editor ang serbisyong yandex.speller. Mahahanap mo ang mga setting ng serbisyo sa file ../assets/components/tinymcerte/tinymcerte/js/external-config.json. Sinusuportahan ng Spellchecker TinyMCE ang isang malaking bilang ng mga wika para sa pagsusuri. Samantalang ang yandex.speller ay 3 lamang (Russian, Ukrainian, English).

Malamang pagkatapos ng update Mga sistema ng MODX Evolution Ang text editor ng TinyMCE ay hindi gumagana para sa iyo. Ito ang larawan na mayroon ako sa lahat ng na-update na mga site:

1. I-download ang plugin mula dito.

2. I-unzip.

3. Punan ang ckeditor folder sa folder mga asset/plugin/

4. Gumawa ng plugin ckeditor

5. Kopyahin ang mga nilalaman mula sa ckeditor.tpl

Suriin ang mga kaganapan sa system na "OnRichTextEditorInit", "OnRichTextEditorRegister" at "OnInterfaceSettingsRender"

6. Paganahin ang CKEditor

Maaari mong paganahin ang CKEditor sa Tools>Configuration>Interface at Presentation, sa column " Editor:" pumili CKEditor

7. Pumunta kami sa anumang dokumento at tingnan ang larawang ito

8. Makipagkaibigan tayo kay CKEditor at sa KCFinder file manager

Upang gumana nang tama ang editor sa KCFinder file manager, papalitan namin ang code na ito sa file /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. Binuo ko ang aking pagpupulong ng mga pindutan na kailangan ko

Sa file /assets/plugins/ckeditor/modx_config.js maaari mong baguhin ang lokasyon, alisin o magdagdag ng mga button. Pinagsama-sama ko ang kumbinasyong ito para sa aking sarili.

Kung may interesado, maaari mong palitan ang linya ng code:

Config.toolbar_modx = [ ["Source"], ["Bold","Italic","underline","Strike","-","Subscript","Superscript"], ["PasteText","PasteFromWord"] , ["I-undo","I-redo","-","Hanapin","-","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","- ","Tungkol sa"] ];

Config.toolbar_simple = [ ["Source","-","Maximize","RemoveFormat"], ["PasteText","Find","Replace"], ["Link","I-unlink"], ["Larawan ","SpecialChar"], ["Format"], "/", ["Bold","Italic","Salungguhit","Strike","-","Subscript","Superscript"], ["TextColor " ","BGColor"], ["NumberedList","BulletedList","-","Blockquote"], ["JustifyLeft","JustifyCenter","JustifyRight","JustifyBlock"] ];

Dito iniwan ko lang ang kailangan ko: Source code, Enlarger (para mas madaling magsulat), text formatting, Insert text lang, Search and Replace, Links, Insert images, Symbols, Headings, Text attributes, text at background color, paragraphs , quote at text justification.

Pag-install ng mga karagdagang plugin

Ang CKeditor ay may maraming kawili-wiling mga plugin. Maaari mong mahanap ang mga ito sa Internet at sa opisyal na website ng CKeditor. Ang lahat ng mga plugin ay naka-install sa /manager/assets/components/ckeditor/ckeditor/plugins/ folder.

Susunod, sa "Mga setting ng system" piliin ang "ckeditor" at sa karagdagang patlang ng mga plugin ( extra_plugins) ipasok ang pangalan ng plugin na mai-install. At sa mga pangkat ng mga pindutan ( toolbar) ipasok ang "pangalan ng plugin" sa tamang lugar. Ang add-on ay naka-install at handa nang gamitin.