Tip pro Drupal: jak na stejný vzhled písma v editoru i na webu

Jedním z mnoha příjemných rysů uživatelského rozhraní administrace Drupalu je možnost nastavení vzhledu obsahu v editoru tak, aby odpovídal tomu, co pak uživatel vidí po uložení článku. Získá tak lepší představu o výsledné vizuální podobě textu.
reklama

Ještě v době, kdy responzivní weby nehrály prim, jsem velice často řešil požadavky na to, aby se text v editoru v Drupalu zalamoval na stejném místě jako je to vidět ve frontendové části webu po uložení článku. Prostě požadavek na nastavení šířky elementu body v editoru. Jiní provozovatelé webu zase celkem logicky chtěli vidět mezinadpisy v článku stejně velké a barevné, jako tomu bylo ve frontendu. Zkrátka většina lidí ocení, když prostředí editace dává rovnou náhled na to, jak bude článek vypadat. Samozřejmě bez okolních boxíků, reklam a dalších věcí.

V Drupalu není toto problém zařídit. Někteří možná následující řešení používáte a je pro vás samozřejmost, někteří možná ne. Na následujících řádcích mám pro vás postup, jak tohoto úkolu docílit v Drupalu 7 při použití modulu WYSIWYG API a v Drupalu 8 za použití výchozího editoru textu.

Poznámka: Samozřejmě zde neřeším použití BUEditoru a jiných věcí, které nepracují s vizuální podobou upravovaného textu, ale s formátovacími značkami.

Vzhled textu v editoru v Drupalu 7

Kdysi jsem vystřídal řadu modulů, které do Drupalu nějakým způsobem zapouzdřovaly různé vizuální editory textu. Chvíli byl mým favoritem CKEditor, chvíli TinyMCE a jejich stejnojmenné moduly. Nakonec jsem ale skončil u řešení v podobě modulu WYSIWYG API, které funguje jako univerzální pojítko pro řadu editorů.

Tento modul si nainstalujete, stáhnete si do něj (resp. do složky sites/all/libraires) některý z podporovaných editorů, v nastavení jej zapnete a vyberete si tlačítka, která u editoru při použití spárovaného formátu textu budou dostupná.

V případě, že takto integrujete TinyMCE nebo CKEditor, tak máte možnost ovlivnit i CSS, které tyto editory použijí k zobrazení vzhledu textu v editoru:

Po změně nastavení bude možná nutné vymazat jak cache Drupalu, tak cache webového prohlížeče, aby se vám nová úprava projevila.

TinyMCE v Drupalu 7 s doplněnými styly

Drupal 8 a nastavení stylů pro CKEditor

Jsem rád, že jsem v Drupalu 7 a starších nakonec před lety začal používat právě modul WYSIWYG API. Jeho princip, tedy propojení nějakého editoru s konkrétním formátem textu je aplikován i v Drupalu 8. Ten má navíc jako výchozí editor přímo v jádře integrovaný CKEditor.

A kde se přiřazuje konkrétní CSS soubor k editoru? Za příslušnou úpravou se musíte vydat do tématu vzhledu, které je na webu aplikováno. Konkrétně do jeho souboru *.info.yml. Zde v syntaxi YAML doplňte následující řádky:

ckeditor_stylesheets:
  - css/editor.css

Těmi Drupalu říkáte, že CKEditor má použít soubor editor.css nacházející se v podsložce css v daném tématu vzhledu.

Nastavení stylů pro CKEditor v Drupalu 8

Po úpravě nastavení opět nezapomeňte vyprázdnit cache, a to jak tu v Drupalu 8, tak ve svém webovém prohlížeči.

Tagy
Autor článku: Jan Polzer

Tvůrce webů z Brna se specializací na Drupal a Symfony. Obojí také školím spolu se základy SEO. Jsem Acquia Certified Developer a Site Builder a napsal jsem několik knih o Drupalu. Ve volných chvílích cestuji a podnikám výlety. Více se dozvíte na mém firemním webu.

reklama

Komentáře k článku

návštěvník

Jakým způsobem v Drupal 8 v administračním tématu vzhledu připojit do CKEditoru CSS z aktivního tématu vzhledu?

Profile picture for user Jan Polzer

No tak, jak to zmiňuji v článku. Do frontendového tématu vzhledu a jeho *.info.yml dopíšete v článku uvedené nastavení, které bude fungovat, i když samozřejmě používáte v administraci jiné téma vzhledu.

Přidat komentář

Filtered HTML

  • Povolené HTML značky: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br>
  • Řádky a odstavce se zalomí automaticky.
  • Web page addresses and email addresses turn into links automatically.

Odesláním komentáře souhlasíte s podmínkami Ochrany osobních údajů

reklama
Sledujte Maxiorla na Facebooku

Maxiorel na Facebooku

Poslední komentáře
reklama
reklama
Hosting pro Drupal a WordPress

Hledáte český webhosting vhodný nejenom pro redakční systém Drupal? Tak vyzkoušejte Webhosting C4 za 1200 Kč na rok s doménou v ceně, 20 GB prostoru a automatické navyšováním o 2 GB každý rok. Podrobnosti zde.

Knihy o Drupalu

Kniha Drupal 8 Kniha Drupal 7 333 tipů a triků pro Drupal
Více na KnihyPolzer.cz

@maxiorel na Twitteru

Maxiorel na Twitteru