1. diel - Inštalácia knižníc TinyMCE, FancyBox a ďalších do CMS
Spojenie TinyMCE, Responsive FileManager a CMS (systém pre zverejňovanie obsahu) sa stáva byť zaujímavou možnosťou pre tých, ktorí chcú získať dostupné riešenie s bohatou možnosťou nastavenia. Spojením týchto troch súčastí môžeme získať okamžité riešenie pre svoj webový projekt.
TinyMCE
TinyMCE je obľúbený vizuálny editor obsahu. Predovšetkým je populárny v open source verzii, šírený pod LGPL. LGPL je licencia, ktorá umožňuje v skratke prepojenie slobodného kódu s neslobodným. Vyzerať môže napríklad takto:
Nenechajte sa ale zmiasť vzhľadom, stylovať si ho môžete úplne podľa svojich predstáv a existuje na neho i mnoho preddefinovaných skinov (vzhľadov).
Responsive FileManager
Responsive FileManager je správca súborov. Umožňuje pridávať a odoberať súbory v rôznych formátoch s bohatou možnosťou nastavenia. Do TinyMCE 5 bude pridaný ako plugin (rozšírenie). Plugin bude spúšťaný prostredníctvom TinyMCE. Responsive FileManager je tiež open source, takže si ho môžeme bezplatne stiahnuť a používať.
Vyzerá takto:
Fancybox
Fancybox je javascriptový plugin určený predovšetkým pre prácu s galériou. Na použitie je veľmi jednoduchý a vďaka tomu môžeme mať peknú galériu takmer bez práce:
V ďalších lekciách
V nasledujúcich lekciách si vhodne nastavíme TinyMCE
editor s vytvorením vlastného limitu znakov pre pole
textarea. Limit bude nezávislý od interného limitu TinyMCE.
Integrujeme plugin Responsive FileManager do editora TinyMCE a funkčne ho
nastavíme. Použijeme na svojom webe minimálne 2 typy
pridaní. Prvý typ použije upload súborov cez
TinyMCE a druhý typ bude vlastný samostatný upload
súborov využívajúce plugin Responsive FileManager. Budeme mať
možnosť pridávať vlastné konfiguračné súbory k jednotlivým
adresárom a tým vhodne nakonfigurovať adresár určený pre upload
súborov. Ďalej môžeme vytvoriť viac typov úložísk
súborov. Napríklad úložisko galerie/,
soubory/ a media/ s rôznym nastavením limitov.
Inštalácia balíčkov
Nižšie popisujem inštaláciu potrebných balíčkov pre správne fungovanie. Odkazy sú na oficiálnej stránky alebo GitHub. V prípade výpadku z niektorých uvedených zdrojov nahrám všetko pod ďalší článok (okrem CMS od ITnetwork, na ktorý budeme knižnice implementovať).
Editor TinyMCE
S vyhliadkou do budúcnosti je výhodné mať TinyMCE editor uložený na svojom serveri. V minulosti bolo síce výhodné pristupovať k TinyMCE editora z externého zdroja, ale v súčasnosti sa vývojári rozhodli obmedziť prístup na tento externý zdroj. Stačil napríklad len tento zápis:
<script type = "text/javascript" src = "//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
TinyMCE editor sa následne stal prístupný na našom webe. Pri používaní TinyMCE editora z externého zdroja je nutná registrácia a API kľúč, pričom použitie editora sa viaže do určitého termínu. V praxi to znamená, že ak zostaneme na nepodporované staršiu verziu, TinyMCE editor nám zablokujú. To je užívateľsky značne nevýhodné a ťažko udržateľné.
Užívateľský výhodnejšie riešenie je stiahnuť si plnú verziu TinyMCE Community editora priamo z oficiálnych stránok a stiahnuť si dostupný český alebo slovenskom balík z https://www.tiny.cloud/...ge-packages/.
Postup inštalácie TinyMCE
TinyMCE je už predinštalovaný v redakčnom systéme ITnetworkMVC. Ak budeme používať CMS z kurzu MVC v PHP, nie je potrebné ho inštalovať a môžete rovno prejsť k inštalácii FancyBoxu.
Stiahnutý balík bude mať prvýkrát zložku tinymce/, potom
js/ a potom znova tinymce/. Obsah tejto zložky budeme
kopírovať. V koreňovom adresári svojho webu si vytvoríme zložku
TinyMCE / a do nej nakopírujeme súbory z vyššie uvedené
zložky. Potom vyextrahujeme český alebo slovenskom baličiek
zo zozipovaného súboru a nakopírujeme do už vytvoreného priečinka
TinyMCE / Langs / svojho webu.
Nakoniec nastavíme cestu k editoru.
Všade, kde sa bude TinyMCE používať, pridáme tento kód:
<script src = "/tinymce/tinymce.min.js"></script> <script src = "/tinymce/jquery.tinymce.min.js"></script>
Ten máme napríklad v súbore pohledy/editor.phtml.
Ak však nemáte tinymce/ v koreňovom priečinku
webu a máte ho napríklad ešte v priečinku js/, treba URL k
balíčku samozrejme zmeniť.
Máme hotovo! Výhody interného editora sú značné. Môžeme používať služby editora bez obmedzenia aj bez pripojenia na internet. Pri testovaní na localhost nie sme viazaní na dátum podpory a samotná aktualizácia je iba na nás.
Inštalácia Fancyboxu
Fancybox galériu môžeme nainštalovať do svojho úložiska ako interný zdroj, nemusíme sa spoliehať na funkčnosť serverov pri použití z externého zdroja tak, ako s TinyMCE. Fancybox servery nás však (zatiaľ) nijako API kľúčom neobmedzujú. To sa ale môže zmeniť a ak robíme niekomu web, kde chce mať galériu, je nanejvíc vhodné si Fancybox stiahnuť na vlastný server.
Fancybox galériu si môžeme stiahnuť z GitHub alebo pomocou NPM príkazu:
npm i @fancyapps/[email protected]
Stiahneme si balík UI, kde je navyše carousel (plátno, kde sa dá prepínať s obrázkami) a panzoom (priblíženie a prechádzaní medzi obrázkami na mobilných zariadení cez dotyk).
Inštalovať budeme verziu 4.0.5, existuje však aj o niečo staršia verzia, ktorá je dostupná na http://fancybox.net/, je jednoduchšie na používanie. Používať však budeme o tri rády vyššiu verziu a to spomínanú 4.0.5.
Inštalácia jQuery
Neoddeliteľnou súčasťou Fancyboxu je jQuery, ktorú si môžeme stiahnuť na https://jquery.com/ alebo pomocou príkazu:
npm i jquery
Stačí zadať príkaz vyššie a jQuery bude stiahnuté do zložky
node_modules/jquery/. Osobne to budem robiť manuálne, stiahneme
balík z https://jquery.com/, presnejšie sa
doklikáme na adresu https://code.jquery.com/...3.6.0.min.js
(verzie sa môže líšiť). Pravým klikneme na stránku a klikneme na
"Uložiť ako ..." a súbor si uložíme na web do zložky svojej novej zložky
jquery/.
Inštalácia CMS
CMS môžete použiť svoj vlastný alebo môžete použiť zo servera itnetwork.cz. V článku bude použitý Jednoduchý redakčný systém z kurzu MVC redakčný systém v PHP, kde všetko budeme implementovať. Náš CMS má tiež predinštalovaný TinyMCE, nie je ho teda potrebné inštalovať znova.
Z CMS chceme využiť predovšetkým jeho schopnosť prihlasovanie, sessions, editor i. Tento tutoriál však môžete aplikovať na akýkoľvek iný CMS.
Postup inštalácie nebudem rozpisovať bolo by to duplicitné, všetko
podrobne je popísané v tomto článku. V zásade úplne stačí nakopírovať
súbory zo spomínaného CMS do koreňového priečinka svojho webu a
sprístupniť databázu. Stačí si databázu naimportovať a v súbore
index.php zadať správne údaje databázy na tomto riadku:
// Připojení k databázi Db::pripoj("127.0.0.1", "root", "", "mvc_db");
CMS tu k stiahnutiu nebude, pretože je súčasťou iného kurzu.
Inštalácia Responsive FileManager (RF)
Prejdeme si najprv požiadavky pred samotnou inštaláciou, tá bude na strane servera i klienta.
Serverové požiadavky
- Vyžaduje sa aspoň PHP 7.1 alebo vyšší
- Apache 2.2 alebo 2.4 (pravdepodobne máte)
K tomu dodávam, že RF pravdepodobne vo verzii PHP 7.1 bude fungovať najlepšie. Demo verzia, ktorú máte možnosť si odskúšať na adrese responsivefilemanager.com/demo.php pred samotnou inštaláciou, dáva tomu za pravdu.
Požiadavky klienta (PC)
RF sa vo svojej štruktúre pripája na externé zdroje. To znamená, že bez pripojenia na internet ho nespustíte. Ak používate niektoré rozšírenie alebo prídavné pluginy prehliadača na anonymizáciu, ktoré blokujú RF, treba ich zakázať alebo povoliť ich URL.
Rozšírenie alebo pluginy prehliadača, ktoré priamo blokujú spustenie:
- Decentraleyes - priamo blokuje spustenie, riešením je zakázať rozšírenie alebo povoliť URL.
- Privacy Badger - povolí spustiť RF, ale blokuje spustenie
vstavaného editora obrázkov - Toast UI image editor.
Blokujúci URL adresa je
uicdn.toast.com. Riešením je buď rozšírenie zakázať alebo povoliť URL.
Stiahnutie
Oficiálne balík je dostupný na adrese responsivefilemanager.com, vždy najnovšiu verziu však môžete zohnať na GitHub.
Ak si opäť neviete rady, pod článkom je archív so všetkými balíčky.
Základný postup inštalácie RF v súčinnosti s TinyMCE
Po stiahnutí oficiálneho balíčka si zo zozipovaného súboru
responsive_filemanager.zip vyhľadáme zložky
filemanager/, thumbs/ a source/. Celé
tieto zložky vyextrahujeme do koreňového adresára svojho webu.
V priečinku thumbs/ sa budú ukladať miniatúry súborov, v
priečinku source/ budú priamo nahrané súbory.
Pre zložky thumbs a source musíte nastaviť práva na 777! Bez týchto práv nebude môcť RF nahrávať súbory. Ak máte web len na localhost na Windows, nie je potrebné nič robiť.
Zo zozipovaného súboru responsive_filemanager.zip nám
zostáva už len zložka tinymce/. Túto zložku vyextrahujete tam,
kde máte nainštalovaný TinyMCE. Ak postupujete podľa mňa a nášho CMS,
budete ju mať v koreňovom adresári webu.
V ďalšej lekcii, Limit znakov a FileManager v editore TinyMCE v PHP , si ukážeme, ako nastaviť Responsive FileManager a implementujeme si vlastný limit znakov pre TinyMCE.
