Lekce 1 - Instalace knihoven TinyMCE, FancyBox a dalších do CMS
Spojení TinyMCE, Responsive FileManager a CMS (systém pro zveřejňování obsahu) se stává být zajímavou možností pro ty, kteří chtějí získat dostupné řešení s bohatou možností nastavení. Spojením těchto tří součástí můžeme získat okamžité řešení pro svůj webový projekt.
TinyMCE
TinyMCE je oblíbený vizuální editor obsahu. Především je populární v open source verzi, šířen pod LGPL. LGPL je licence, která umožňuje ve zkratce propojení svobodného kódu s nesvobodným. Vypadat může například takto:
Nenechte se ale zmást vzhledem, stylovat si ho můžete úplně podle svých představ a existuje na něj i mnoho předdefinovaných skinů (vzhledů).
Responsive FileManager
Responsive FileManager je správce souborů. Umožňuje přidávat a odebírat soubory v různých formátech s bohatou možností nastavení. Do TinyMCE 5 bude přidán jako plugin (rozšíření). Plugin bude spouštěn prostřednictvím TinyMCE. Responsive FileManager je také open source, takže si ho můžeme bezplatně stáhnout a používat.
Vypadá takto:
Fancybox
Fancybox je javascriptový plugin určen především pro práci s galerií. Na použití je velice jednoduchý a díky tomu můžeme mít pěknou galerii téměř bez práce:
V dalších lekcích
V následujících lekcích si vhodně nastavíme TinyMCE
editor s vytvořením vlastního limitu znaků pro pole
textarea. Limit bude nezávislý od interního limitu TinyMCE.
Integrujeme plugin Responsive FileManager do editoru TinyMCE a funkčně jej
nastavíme. Použijeme na svém webu minimálně 2 typy
uploadů. První typ použije upload souborů přes
TinyMCE a druhý typ bude vlastní samostatný upload
souborů využívající plugin Responsive FileManager. Budeme mít
možnost přidávat vlastní konfigurační soubory k jednotlivým
adresářům a tím vhodně nakonfigurovat adresář určený pro
upload souborů. Dále můžeme vytvořit více typů úložišť
souborů. Například úložiště galerie/,
soubory/ a media/ s různým nastavením limitů.
Instalace balíčků
Níže popisuji instalaci potřebných balíčků pro správné fungování. Odkazy jsou na oficiální stránky nebo GitHub. V případě výpadku z některých uvedených zdrojů nahraju vše pod další článek (vyjma CMS od ITnetwork, na který budeme knihovny implementovat).
Editor TinyMCE
S vyhlídkou do budoucna je výhodné mít TinyMCE editor uložen na svém serveru. V minulosti bylo sice výhodné přistupovat k TinyMCE editoru z externího zdroje, ale v současnosti se vývojáři rozhodli omezit přístup na tento externí zdroj. Stačil například pouze tento zápis:
<script type = "text/javascript" src = "//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
TinyMCE editor se následně stal přístupný na našem webu. Při používání TinyMCE editoru z externího zdroje je nutná registrace a API klíč, přičemž použití editoru se váže do určitého termínu. V praxi to znamená, že pokud zůstaneme na nepodporované starší verzi, TinyMCE editor nám zablokují. To je uživatelsky značně nevýhodné a těžko udržitelné.
Uživatelský výhodnější řešení je stáhnout si plnou verzi TinyMCE Community editoru přímo z oficiálních stránek a stáhnout si dostupný český nebo slovenský balíček z https://www.tiny.cloud/…ge-packages/.
Postup instalace TinyMCE
TinyMCE je už předinstalován v redakčním systému ITnetworkMVC. Pokud budeme používat CMS z kurzu MVC v PHP, není třeba ho instalovat a můžete rovnou přejít k instalaci FancyBoxu.
Stažený balík bude mít prvně složku tinymce/, poté
js/ a pak znovu tinymce/. Obsah této složky budeme
kopírovat. V kořenovém adresáři svého webu si vytvoříme složku
tinymce/ a do ní nakopírujeme soubory z výše uvedené
složky. Potom vyextrahujeme český nebo slovenský baliček
ze zazipovaného souboru a nakopírujeme do už vytvořené složky
tinymce/langs/ svého webu.
Nakonec nastavíme cestu k editoru.
Všude, kde se bude TinyMCE používat, přidáme tento kód:
<script src = "/tinymce/tinymce.min.js"></script> <script src = "/tinymce/jquery.tinymce.min.js"></script>
Ten máme například v souboru pohledy/editor.phtml .
Pokud však nemáte tinymce/ v kořenové složce
webu a máte ho například ještě ve složce js/, je třeba URL k
balíčku samozřejmě změnit.
Máme hotovo! Výhody interního editoru jsou značné. Můžeme používat služby editoru bez omezení i bez připojení na internet. Při testování na localhostu nejsme vázáni na datum podpory a samotná aktualizace je pouze na nás.
Instalace Fancyboxu
Fancybox galerii můžeme nainstalovat do svého úložiště jako interní zdroj, nemusíme se spoléhat na funkčnost serverů při použití z externího zdroje tak, jako s TinyMCE. Fancybox servery nás však (zatím) nijak API klíčem neomezují. To se ale může změnit a pokud děláme někomu web, kde chce mít galerii, je nanejvíc vhodné si Fancybox stáhnout na vlastní server.
Fancybox galerii si můžeme stáhnout z GitHubu nebo pomocí npm příkazu:
npm i @fancyapps/[email protected]
Stáhneme si balík UI, kde je navíc carousel (plátno, kde se dá přepínat s obrázky) a panzoom (přiblížení a přejíždění mezi obrázky na mobilních zařízení přes dotyk).
Instalovat budeme verzi 4.0.5, existuje však i o něco starší verze, která je dostupná na http://fancybox.net/, je jednodušší na používání. Používat však budeme o tři řády vyšší verzi a to zmíněnou 4.0.5.
Instalace jQuery
Nedílnou součástí Fancyboxu je jQuery, kterou si můžeme stáhnout na https://jquery.com/ nebo pomocí příkazu:
npm i jquery
Stačí zadat příkaz výše a jQuery bude staženo do složky
node_modules/jquery/. Osobně to budu dělat manuálně, stáhneme
balík z https://jquery.com/, přesněji se
doklikáme na adresu https://code.jquery.com/…3.6.0.min.js
(verze se může lišit). Pravým klikneme na stránku a klikneme na "Uložit
jako..." a soubor si uložíme na web do složky své nové složky
jquery/.
Instalace CMS
CMS můžete použít svůj vlastní nebo můžete použít ze serveru itnetwork.cz. V článku bude použit Jednoduchý redakční systém z kurzu MVC redakční systém v PHP, kde vše budeme implementovat. Náš CMS má také předinstalovaný TinyMCE, není ho tedy třeba instalovat znovu.
Z CMS chceme využít především jeho schopnost přihlašování, sessions, editor aj. Tento tutoriál však můžete aplikovat na jakýkoliv jiný CMS.
Postup instalace nebudu rozepisovat bylo by to duplicitní, vše podrobně je
popsáno ve zmíněném článku. V zásadě úplně stačí nakopírovat
soubory ze zmíněného CMS do kořenové složky svého webu a zpřístupnit
databázi. Stačí si databázi naimportovat a v souboru index.php
zadat správné údaje databáze na tomto řádku:
// Připojení k databázi Db::pripoj("127.0.0.1", "root", "", "mvc_db");
CMS zde ke stažení nebude, protože je součástí jiného kurzu.
Instalace Responsive FileManager (RF)
Projdeme si nejprve požadavky před samotnou instalací, ta bude na straně serveru i klienta.
Serverové požadavky
- Vyžaduje se alespoň PHP 7.1 nebo vyšší
- Apache 2.2 nebo 2.4 (pravděpodobně máte)
K tomu dodávám, že RF pravděpodobně ve verzi PHP 7.1 bude fungovat nejlépe. Demo verze, kterou máte možnost si odzkoušet na adrese responsivefilemanager.com/demo.php před samotnou instalací, dává tomu za pravdu.
Požadavky klienta (PC)
RF se ve své struktuře připojuje na externí zdroje. To znamená, že bez připojení na internet ho nespustíte. Pokud používáte některé rozšíření nebo přídavné pluginy prohlížeče na anonymizaci, které blokují RF, je třeba je zakázat nebo povolit jejich URL.
Rozšíření nebo pluginy prohlížeče, které přímo blokují spuštění:
- Decentraleyes - přímo blokuje spuštění, řešením je zakázat rozšíření nebo povolit URL.
- Privacy Badger - povolí spustit RF, ale blokuje
spuštění vestavěného editoru obrázků - Toast UI image
editor. Blokující URL adresa je
uicdn.toast.com. Řešením je buď rozšíření zakázat nebo povolit URL.
Stažení
Oficiální balíček je dostupný na adrese responsivefilemanager.com, vždy nejnovější verzi však můžete sehnat na GitHubu.
Pokud si opět nevíte rady, pod článkem je archiv se všemi balíčky.
Základní postup instalace RF v součinnosti s TinyMCE
Po stažení oficiálního balíčku si ze zazipovaného souboru
responsive_filemanager.zip vyhledáme složky
filemanager/, thumbs/ a source/. Celé
tyto složky vyextrahujeme do kořenového adresáře svého webu.
Ve složce thumbs/ se budou ukládat miniatury souborů, ve
složce source/ budou přímo nahrané soubory.
Pro složky thumbs a source musíte nastavit práva na 777! Bez těchto práv nebude moct RF nahrávat soubory. Pokud máte web pouze na localhostu na Windows, není třeba nic dělat.
Ze zazipovaného souboru responsive_filemanager.zip nám zbývá
už pouze složka tinymce/. Tuto složku vyextrahujete tam, kde
máte nainstalován TinyMCE. Pokud postupujete podle mě a našeho CMS, budete
ji mít v kořenovém adresáři webu.
V další lekci, Limit znaků a FileManager v editoru TinyMCE v PHP, si ukážeme, jak nastavit Responsive FileManager a implementujeme si vlastní limit znaků pro TinyMCE.
Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.
