Bootstrap ve WYSIWYG editoru

26.11.2018 13:56 403 zhlédnutí
Autor článku
Cony
Článek uživatele

Většina aktuálních Joomla šablon je založena na CSS knihovně Bootstrap, která nabízí mnoho zajímavých prvků i pro psaní článků. Bohužel není jednoduché do editoru vložit prvky tak, aby se správně zobrazily na stránkách, a dokonce i v editoru. Jaké jsou tedy možnosti?

Co je to Bootstrap?

Nejjednodušší popis Bootstrap by asi byl, že se jedná o sadu CSS stylů a javaskriptů, které umožňují stylovat stránky ne pomocí vlastních CSS a skriptů, ale pomocí speciálního HTML zápisu. Tedy vlastně takové stylování postavené na hlavu :) Joomla ve verzi 3.x obsahuje v základu podporu Bootstrap 2, budu zde tedy popisovat práci s touto verzí. Některé šablony dnes využívají Bootstrap ve verzi 3, nebo nejnovější 4. Práce s těmito verzemi by byla velmi podobná, jen by byl rozdíl v názvech použitých tříd (prvků chcete-li), a ve vytvoření stylu pro editor.

Ukázky zde jsou ze základní Joomla šablony Protostar, která je součástí instalace Joomla verze 3.x.

Co je to WYSIWYG editor

WYSIWYG – What You See Is What You Get (volně přeloženo asi Co Vidíte To Dostanete), tj. editor umožňující přímo zobrazovat během psaní, jak bude vypadat výsledek. Nepíšete tedy HTML kód ale používáte editor podobný např. MS Word, OpenOffice Writer, nebo jiné kancelářské aplikaci. Joomla 3.x obsahuje v základu nainstalovaný editor TinyMCE, opět se budu tedy věnovat primárně tomu. Dále bych zmínil svůj oblíbený JCE, který je postaven na stejném základu, jen umožňuje díky pokročilejší administraci více nastavení.

Do Joomly existuje i řada dalších editorů, více či méně nastavitelných. Popisovaný postup může být vhodný i pro tyto editory, pokud mají podporu nastavení uživatelského CSS, popř. umí převzít předvolené CSS ze šablony.

Vkládání Bootstrap prvků do editoru

V první řadě je nutné do editoru vložit správný HTML kód, tak aby se zobrazil prvek na stránkách tak jak má. Možností jak vložit kód je několik:

  1. Přímá editace HTML kódu
  2. Šablony TinyMCE
  3. Stylování pomocí vlastních tříd v JCE
  4. Použití k tomu určeného pluginu
  5. Použití pluginu pro vkládání předdefinovaných kódů

Posledním dvoum možnostem se příliš věnovat nebudu, pluginů pro vkládání kódů bootstrap jsem zatím příliš neobjevil, a pluginů pro vkládání vlastních kódů naopak naleznete poměrně velké množství. Vzhledem ale k podpoře šablon přímo v TinyMCE mi přijde zbytečné instalovat další rozšíření.

Přímá editace HTML

Většina editorů umožňuje přepnutí do přímé editace HTML kódu, kde můžete zadat jakýkoliv potřebný kód. Přepnete se do režimu editace HTML, zadáte vše potřebné dle dokumentace Bootstrap, a uložíte.

tinymce zdroj menu 0525e tinymce zdroj toolbar 587fc

Tato varianta je sice univerzální, ale ne příliš pohodlná, a pro někoho kdo HTML nezná, naprosto nepoužitelná.

tinymce zdroj 797ff

Šablony TinyMCE

Méně známou funkcí TinyMCE je možnost vkládání předdefinovaných šablon. V základní instalaci bohužel editor obsahuje pouze dvě opravdu jen ukázkové šablony.  Přidání dalších ale není nijak složité.

Šablony jsou uloženy ve složce /media/editors/tinymce/templates. Jedná se o běžné soubory HTML, které obsahují kód, který se vloží do editoru po zvolení příslušné šablony. Pro vytvoření např. šablony pro vložení kódu primárního tlačítka pro Bootstrap 2 by mohl kód vypadat např. takto

<a href=”#” class=”btn btn-primary”>Text tlačítka</a>

Soubor s tímto obsahem uložíte pod názvem button_primary.html do složky /media/editors/tinymce/templates. Pro dokonalost je ještě potřeba přidat jazykovou konstantu PLG_TINY_TEMPLATE_BUTTON_PRIMARY_TITLE s názvem šablony (např. „Primární tlačítko“) a PLG_TINY_TEMPLATE_BUTTON_PRIMARY_DESC s popisem šablony (např. „Vloží primární tlačítko“). Jazykové konstanty se skládají vždy z předpony PLG_TINY_TEMPLATE_, následované názvem souboru bez přípony psáno velkými písmeny (zde tedy PRIMARY_BUTTON) a příponou _LABEL pro název a _DESC pro delší popisek.

Jazykovou konstantu přidáte nejjednodušeji přímo v administraci, nebo přímou editací souboru /language/overrides/cs-CZ.override.ini, popř. /administrator/language/overrides/cs-CZ.override.ini.

V přiloženém souboru sablony.zip naleznete několik základních šablon Bootstrap 2, včetně českých popisů. Soubor stačí rozbalit do kořenové složky Joomly. Jen pozor, pokud již máte nějaké své textové konstanty, tímto by jste si je přepsali, soubory s jazykovými konstantami tedy aktualizujte.

Po nahrání souboru již jen stačí otevřít v editoru šablony a zvolit si kterou chcete do článku vložit.

tinymce sablony menu a4913 tinymce sablony toolbar 8d79a

tinymce sablony 40468

Pokud to uděláte, text v editoru bude vypadat nějak takto:

TineMCE bez vlastního CSS

Když ale článek uložíte a zobrazíte na stránkách, bude vypadat např. takto:

Zobrazení článku

Nastavení editoru

Aby se i v editoru zobrazil zadaný text v nějaké formě (a byl to tedy skutečný WYSIWYG editor), je potřeba ještě uzpůsobit nastavení TinyMCE. Editor TinyMCE se ve výchozím nastavení pokusí nahrát soubor se styly nazvaný editor.css a uložený ve složce css v hlavní složce výchozí šablony. Pro šablonu Protostar je to tedy soubor /templates/protostar/editor.css. V nastavení TinyMCE (správce pluginů – plugin Editor - TinyMCE) lze definovat v poli Vlastní CSS jiný název souboru, bohužel ale vždy v rámci složky css v šabloně. Případně lze do tohoto pole zadat absolutní URL adresu, pak je možné mít jeden styl pro editor, nezávislý na použité šabloně.

Při nejjednodušším postupu tedy použijeme soubor editor.css v šabloně. V příloze editor.zip naleznete zjednodušený styl Bootstrap 2, rozšířený o zvýraznění některých prvků v editoru (sloupce, skrývání na mobilu / tabletu apod.), použitelný v editoru TinyMCE. Obsah tohoto archivu rozbalte do složky své šablony (tj. např. pro protostar to bude /templates/protostar/).

Otevřete znovu článek a prohlédněte si výsledek:

tinymce s css 30b2c

Editor JCE

V editoru JCE lze využít nastavení CSS stylu podobným způsobem, jako u TinyMCE. V globálním nastavení editoru lze opět nastavit vlastní CSS soubor editoru, zde ale není cesta relativní ke složce css v šabloně, ale absolutní vzhledem ke kořenové složce Joomly. Nastavení tedy může vypadat např. takto /templates/$template/css/editor.css.

Editor JCE dále umožňuje definovat profily a v rámci profilu nastavit vzhled editoru, použitá tlačítka a nastavit i jednotlivé pluginy. Plugin který lze využít pro vkládání tříd Bootstrap prvků se jmenuje Výběr stylu, a lze si v něm přidat seznam svých pojmenovaných tříd a stylů.

JCE - nastavení stylů

V editoru se pak zobrazí formou rozbalovacího okénka.

JCE - náhled stylů

V přiloženém souboru jce.zip naleznete uložený profil obsahující definici tříd pro základní seznam prvků Bootstrap 2. Tento soubor rozbalte u sebe na počítači a pomocí možnosti Import profilu v seznamu profilů JCE importujte, popř. upravte dle libosti.

jce import profilu cdc09

JCE také obsahuje plugin Správce šablon, umožňující definici vlastních HTML šablon, obdobně jako v TinyMCE, ale přímo v editoru.

Bootstrap Row Builder

Jediným pluginem který bych okrajově zmínil je plugin Bootstrap Row Builder, který pod editor přidá tlačítko umožňující rychlé vytvoření  několika sloupců ve stylu Bootstrap. Můžete použít jako šikovnou alternativu k vlastním šablonám.

Další možnosti

Jak TinyMCE tak JCE nabízí také možnost importu přímo CSS souboru šablony. Tím v podstatě docílíte nejvíce WYSIWYG efektu, protože v editoru se zobrazí vše stejně, jako na výsledných stránkách. Ale opravdu vše, může se Vám tedy stát že např. něktré bloky neuvidíte, protože jsou nastaveny jen na zobrazování na desktopu, a vy máte zrovna editor příliš malý, některé bloky budou s nějakým obrázkem na pozadí, což bude editor zbytečně zatěžovat apod. Doporučil bych tedy spíše věnovat trochu času vytvoření si kopie CSS souboru jen pro editor, zanést si do této kopie jen podstatné věci, popř. si uzpůsobit zvýraznění některých neviditelných prvků.

Odkazy

Informace o autorovi Cony

Líbil se vám článek?
(7 hlasů)
Jak vložit vlastní kód do článku?
Následujicí článek autora
30.11.2018 00:00 255 zhlédnutí
Jak vložit vlastní kód do článku?
Článek uživatele
V pravidelných intervalech se na diskusním fóru objevuje dotaz, jak vložit HTML / PHP /...

Štítky: Návod

Stáhnout přílohy:
30.11.2018 00:00 255 zhlédnutí
Vývojářské tipy
Jak vložit vlastní kód do článku?
Jak vložit vlastní kód do článku?

V pravidelných intervalech se na diskusním fóru objevuje dotaz, jak vložit HTML / PHP / Javaskript...

26.11.2018 13:56 404 zhlédnutí
Vývojářské tipy
Bootstrap ve WYSIWYG editoru
Bootstrap ve WYSIWYG editoru

Většina aktuálních Joomla šablon je založena na CSS knihovně Bootstrap, která nabízí mnoho...

25 komentáře

Bart
napsal(a) Bart/27. lis 2018 15:18

Luxusní. Toto jsem moc potřeboval.

Odkaz Komentáře
Karel Neugebauer jr. - itx.cz
napsal(a) Karel Neugebauer jr. - itx.cz/27. lis 2018 15:56

Super, díky.

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/27. lis 2018 16:14

S Page Builderem + plugins od Joomla CK (i ve free verzi) se to nedá srovnávat. Natož s Themlerem.
Bootstrap Row Builder pro nejjednoduší případy má u mě palec nahoru.
Čus.
PS - Asi jste vyděsil začátečníky, natož laiky. Hlavně nezapomeňte na štítek :)

Odkaz Komentáře
Cony
napsal(a) Cony/27. lis 2018 16:23

Page Builder je Page Builder, se všemi plusy i mínusy. Tohle byl návod jak uzpůsobit základní editor pro jednoduší použití. Zatím jsem nenašel Page Builder, jehož výstup bych si pustil do jakýchkoliv stránek, přeci jen 1MB stylů a skriptů je prostě moc vysoká cena za jednoduchost v administraci. I ta jednoduchost je s otazníkem, protože většina Page Builderů ve snaze o univerzálnost nabízí u každého prvku tisíce nastavení, ve kterých se vyznat je někdy oříšek :)

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/27. lis 2018 17:00

Jasněže šetřit data je správně, ale naměřil jsem pro Joomla CK CSS +40kB, JS +64kB, CSSlightbox +507kB, další hodnoty jsou zanedbatelné. A to s tím lightboxem zatočí datově asi každá plugina, včetně JCE.
Šetřit, ale nestrašit - čus.

Odkaz Komentáře
Cony
napsal(a) Cony/27. lis 2018 17:52

Joomla CK bude zřejmě jeden z úspornějších Page Builderů, i když galerie 500kB (není to náhodou i s obrázkama?) rozhodně standard není, skript pro galerii mívá v řádu jednotek až desítek kB. Např. Nivo Lightbox má cca 8kB skript i styly. JCE je editor, lightbox neřeší, to řeší až případné pluginy.

Základní Protostar má cca 300KB skriptů a stylů, pokud Jomla CK přidá oněch 100KB je to 30% navíc. To ať si každý rozhodne sám, o tom ostatně ale tenhle článek nebyl.

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/27. lis 2018 18:17

Jo, rejpnul sem si, ale vy jste to převedl na závodění o velikost dat.
Já spustil o tom, že lze využít hotová řešení.
Kdo má stránky s tisíci a víc přístupy, ať optimalizuje, ti ostatní data navíc z Pagebuilderu řešit nemusejí.
Čus.

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz/27. lis 2018 18:44

Jeden z velmi užitečných článků pro všechny uživatele Joomla, díky! Page buildery které se instalují do systému až na pár vyjímek obecně způsobují uživatelům víc problémů než užitku, nehledě na to, že pokud se uživatel časem rozhodne Page Builder přestat používat, je velice pravděpodobné že si tím způsobí ještě více problémů s webem. O problémech s kompatibilitou, hromadou scriptů a dalších souborů ani nemluvím.

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/27. lis 2018 18:57

To jsou ale dost odvážná a nepodložená tvrzení. Kolik rozšíření skončilo v propadlišti dějin a dalo se to vyřešit ...
Čus.

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz/27. lis 2018 19:06

Doproučujete instalaci Page Builderu jako alternativu k tomu co napsal Cony? Jaký Page Builder? Při tvorbě webů na RS Joomla je mimo jiné cílem i použití minima pokud možno prověřených rozšíření pro zachování dlouhodobé životnosti webu bez složitých aktualizací a migrací.

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/27. lis 2018 19:10

Ten co jsem uvedl, jako alternativu. Čtěte i co píšu, Františku.
Čus.

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz/27. lis 2018 19:16

Který ten pro začátečníky a který ten pro laiky?

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz/27. lis 2018 19:39

Jestli máte dobré zkušenosti s nějakým Page Builderem, napište (fórum nebo článek). Bude to zajímavé téma.

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/27. lis 2018 19:58

Už né, Františku.
Upřímě vám přeju hodně úspěchů s novým portálem, ale mám obavu ze stejného osudu, jako u všech předešlých a já jdu jen do toho, čemu věřím a co mě baví.
Čus.

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz/27. lis 2018 20:09

Dobře, přemlouvat vás už nebudu. Vaše připomínky k portálu byly podnětné, myslím to vážně. Čeká nás hodně práce, předchozí provozovatel portálu už neměl sílu projekt zvládnout a dopadlo to jak to dopadlo. :-( Zastavte se někdy alspoň ve fóru. Ať se vám daří.

Odkaz Komentáře
Cony
napsal(a) Cony/27. lis 2018 21:45

Já nezávodím :) Píšu svůj názor na věc. Zatím jsem nenašel Page Builder, který by mi vyhovoval v generovaném kódu, jednoduchosti ovládání (bez složitých "fičurek" navíc) a integrovaností do Joomly (ideálně aby prostě nahradil editor v článku, bez dalších komponent). Některé z těch podmínek některé buildery jakž takž splnily, žádný ale ne všechny, nebo natolik, abych byl ochoten ho použít. Stránky se snažím obvykle navrhnout tak, aby nebyl ani potřeba, při troše snaze to jde. Uživatelé pak již jen píší čisté bloky textu běžným editorem, a použijí tak. max. nadpis nebo odstavec.

Uznávám, občas se může hodit uprostřed článku vložit dva tři sloupce textu, proto používám nastavení editoru, abych nemusel zobrazovat zdrojový kód a vše hned viděl. Není to ideální, někomu nemusí vyhovovat, ale mně to přijde lepší alternativa než page builder, už jen kvůli tomu co psal František.

PS: možná spíše než Page Builder v pravém slova smyslu by byl zajímavý jakýsi "blokový editor", Wordpress aktuálně zavádí nový Gutenberg editor do standardu, chystám se na to ho prozkoumat a zkusit zaintegrovat do Joomly. Teda až bude čas :/

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/27. lis 2018 22:40

Taky jsem nějaký čas vzdoroval a snažil se vyrobit vše v editoru článku. Ale HTML5 a CSS3 + responzivita prostě tuhle cestu, jak sám píšete - tisíci nastavítek - prostě vylučují.
Já tvrdím, že laika na joomlistu nepřesvědčíte tím, že má tvořit pěkně vypadající obsah stránek až si naštuduje tlusté knihy o HTML5 a CSS3, ale naučím ho v rozumném PageBuilderu vytvořit totéž se zlomkem úsilí.
Joomlista nemusí být nutně programátor - a o tom to je.
Ve vší úctě a s pochvalou za článek, je to ale článek o tom, jak se "přenastaví" editor článku. Vy v tom žijete, ale laik k tomu potřebuje vědět, na co mu to bude. Ne příklad, který vypadá jako tři krátké texty vystředěné na stránce, to umí udělat jinak ...
Už jsem to psal jinde, laik touží například dostat na stránku bloky textu vedle sebe do sloupečků a v nich fotečku. Že by to snad dokázal s vaším návodem, to nemá šanci pochopit.
Nechci vás zrazovat o dalších návodů, ale musíte psát i pro laiky. Jinak to není o budování komunity, ale postřehy programátorů pro programátory, pracujících v CMS Joomla a to je málo.

Odkaz Komentáře
fwd
napsal(a) fwd/27. lis 2018 22:49

Perfektní článek. Moc děkuji.
Je to strašné, nestíhám to ani číst....
Roky tu nic moc nebylo a teď se roztrhl pytel.

Odkaz Komentáře
Cufe
napsal(a) Cufe/28. lis 2018 04:04

Cony, díky. Taky to využívám a hodí se to, uživatelé to vždy ocení.

Aleši (coleoptera), proč stále požadujete články pro začátečníky? Pochopte, že tento třeba nemusí být na ně zaměřen. Vy máte šanci napsat článek, konstruktivně kontrovat dalším názorem a napsat článek o využití a přednostech pagebuilderů. Místo toho, abyste to udělal, ztrácíte čas a energii na kecy a žádné činy. Znám ještě jednu takovou postavu, je to rádoby parťák od Ferdy mravence... brouk pytlík.
Tak jak se Vám to líbí? Chápete, že nikdo tady není zvědavý na neustálé kritizování a nicnedělání? Máte zveřejněn jeden jediný článek, další 1 nebo 2 čekají nejspíš na schválení, až je upravíte. To je myslím dost málo. Zkuste zvolit lepší strategii, když už investujete čas a energii na tomto portále, k získání si určitého respektu tím, že začnete psát o věcech, které Vám zde chybí. Zatím jsem kolem Vás viděl jen uprdnutý obláček a dusno. Tak se už seberte, buďte chlap a prekousněte své ego a zkuste postupně získat na svou stranu všechny, kteří tu něco dělají a jen nekecají a třeba se Vám pak podaří prosadit svůj názor a změny, které požadujete. Díky a čus i pro Vás ode mě.
P.S. Nechci od Vás textovou reakci zde v komentářích, chci si přečíst článek od Vás pro začátečníky a čekám též na článek ohledně Pagebuilderů a jejich výhod pro začátečníky. Jen tak se ukáže, zda to, co jen říkáte, míníte i dělat a nehledáte jen srabsky výmluvy, protože Vám "stávající systém" nevyhovuje!

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/28. lis 2018 07:53

Kecy, brouk pytlík, srab, výmluvy, uprdnutý obláček ... tady už nic.

Odkaz Komentáře
Cufe
napsal(a) Cufe/28. lis 2018 11:04

No vidíte a tak to máte, když se člověk snaží být vlídný a pojmenuje asertivně s nadhledem věci správnými výrazy. Někdo to holt neunese (i když takový Onthophagus taurus unese až 1150násobek své hmotnosti) a zmůže se jen na předchozí příspěvek. Je to škoda, protože se stačilo jen zapojit a snažit se pro změnu jemně a postupně, ne se chovat, jako když sníte všechnu moudrost světa. Ono je potřeba trochu pokory, když přijdete k někomu na dvůr a začnete si poroučet, kde má stát králíkárna, kde má být hnojiště, kde chlívek a bouda pro psa. Může se totiž stát, že pes začne štěkat, chlívek vám nemusí vonět a v úprku spadnete dohnojiště. A to i přesto, že vlastník je vlídný hospodář. ;-)

Odkaz Komentáře
coleoptera
napsal(a) coleoptera/28. lis 2018 11:18

Vy nejste vlídný hospodář, ale hulvát, který k mým argumentům nenapsal nic.
Pokud je možné zrtušit mou registraci, ocením to.

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz/28. lis 2018 11:26

Vlídný hospodář jsem já :-) Pánové prosím zanechte této debaty po článkem a vyplňte si dotazník https://goo.gl/forms/0SAjlV6AjURCHDt43 ;-) Díky.

Odkaz Komentáře
Linelabcz
napsal(a) Linelabcz/28. lis 2018 11:37

Příště prosím komentáře pouze k článku.

Odkaz Komentáře
Cufe
napsal(a) Cufe/28. lis 2018 11:37

Mohu Vás ubezpečit, nejsem hospodář tohoto webu, ale nejsem ani hulvát. Jsem člověk, který si nenechá kálet na hlavu a nemá rád, když někdo prudí ostatní, když se snaží (navíc dobrovolně), a Vy jste člověk, který si nevidí do úst, umí jen kritizovat a nepřijímá cizí názory. Přijdete si jednou za uherský rok, začnete mrčet jak malé děcko, když Vás člověk vyhecuje, abyste místo mrčení taky něco udělal, tak napíšete 1 článek a na ostatní se vykašlete, i když Vás člověk ocenil za snahu. Takových lidí je spousta a já si je mažu na chleba a dávám ke snídani. Podpořil jsem Vás ve snažení (vizte fórum) a Vy jste se na to vykašlal a měl zase plnou hubu keců, tak se opravdu nedivte. Píši to zcela s chladnou hlavou, protože v pravidelných intervalech takoví lidé, jako jste Vy, tento portál navštěvují a komunikace s nimi je stále stejná. :-) Proto mě osočení z hulvátství, od člověka, jako jste Vy, opravdu nijak netrápí. Registraci si nechte zrušit u admina, "čus" jen pro Vás!

A já jdu psát článek...

Odkaz Komentáře

Nové články

Článek uživatele
Novinky
Trochu povyku pro nic na Active24
Článek uživatele
Vývojářské tipy
Univerzální oprava instalace Joomly
Článek uživatele
Komunita Joomlaportal.cz
Zúčastněte se průzkumu
Článek uživatele
Novinky
Wordpress

Související články