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

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:

1. Přejděte do nastavení Konfigurace > Vytváření obsahu > Wysiwyg profiles. Zde klepněte na nastavení profilu editoru přiřazeného k některému formátu textu. Případně jej nejprve spárujte.
2. V nastavení editoru máte dle zvoleného editoru několik možností, nás v tuto chvíli zajímá část CSS. Při spárování s TinyMCE zde máte možnost nastavit Block formats. Jde o značky, které se objeví při použití editoru v rozbalovací nabídce Formáty. Ano, toto je to místo, kam můžete přidat standardně chybějící H1.
3. Volbu Editor CSS přepněte na Definovat CSS a do políčka CSS path zadejte %b%t/editor.css. Tím Drupalu sdělujete, že pro editor má použít soubor editor.css, který najde v momentálně použitém tématu vzhledu.
4. V políčku CSS třídy pak definujete vždy název, který se v editoru objeví v rozbalovací nabídce Styly a CSS třídu, která se při použití takového stylu aplikuje na zvolený prvek v editoru. Takže například na Maxiorlovi mám ve stylech uvedeno Boxík=boxik a pokud jej aplikuji na odstavec, vykreslí se mi HTML značka p.boxik, nastylovaná do vzhledu jaký vidíte na začátku článku u poznámky.
5. Nastavení takto uložte. Zbývá vytvořit zmíněný soubor editor.css, nakopírovat jej do používaného tématu vzhledu nebo jiné složky, kterou jste specifikovali a upravit jej. Písmo, mezery, barvy a další věci by měly respektovat vizuální stránku webu definovanou v hlavních CSS pro frontendovou část webu.

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.

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.

1. Styly se zde nastavují trochu odlišně. V administrační části Nastavení > Vytváření obsahu > Text formats and editors se přepněte do nastavení některého z formátů textu, například Full HTML.
2. Máte-li jako editor zvolený CKEditor a mezi aktivními tlačítky i Styles, pak pod nastavením lišty editoru najdete i volbu Styles dropdown. Funguje podobně jako výše uvedené nastavení v Drupalu 7. U Drupalu 8 však specifikujete zápis v trošku složitější podobě: prvek.css-trida|Popisek. Má to tu výhodu, že můžete specifikovat nějaké styly například pro mezinadpisy, které ovšem nepůjde aplikovat na odstavce.

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.

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.