Jak v Drupalu 8 pohodlně vkládat texty z Wordu do editoru

V Drupalu 7, resp. na všech webech, které jsem na něm postavil, používám kombinaci modulu Wysiwyg a editoru TinyMCE. Třeba pro Maxiorla všechny články píšu ve Wordu, využívám kontrolu pravopisu i kontrolu gramatiky. Připravím si všechny podnadpisy, odkazy, seznamy atd.

Pak celý text vezmu do schránky, v TinyMCE stisknu tlačítko Vložit z Wordu, vložím text do dialogu a potvrdím. Text se mi objeví v editoru se zachovaným členěním a bez nepořádku v podobě vložených CSS či fontů.

Jenže tohle v Drupalu 8 není možné ve výchozím stavu udělat. Coby výchozí formát textu je připraven Basic HTML. Tlačítko Vložit z Wordu zde není, nicméně po běžném vložení se Drupal zeptá, zda chci text z Wordu vyčistit. Souhlasím. A co dostanu? Místo čistých značek balast, v němž je text uzavřen do čtveřice značek span. To vůbec není ideální.

Jasně, v reálu Basic HTML nepoužívám, protože potřebuji vkládat celou škálu HTML značek, například iframe s nějakou vloženou mapou. Přepnu si tedy textový formát pod editorem na Full HTML a znovu vložím text z Wordu. Jaký balast získám, vidíte na screenshotu níže. Tentokrát žádný dotaz na očištění. Sice je zachováno formátování, ale zůstávají vložené styly atd.

Možná vás někdy napadlo, kouknout do nastavení formátu textu Full HTML a do lišty editoru přetáhnout tlačítko Vložit z Wordu. To je sice pěkné, ale nenašel jsem prohlížeč, ve kterém by fungovalo. Obvykle jen uvidíte hlášku, že prohlížeč nepodporuje vkládání pomocí tlačítka na liště nástrojů.

Jak tedy z tohoto problému ven? Chvíli jsem učil své zákazníky, ať používají klávesovou zkratku Ctrl+Shift+V, resp. CMD+Shift+V. Ta vloží text do editoru zcela bez formátování. Pak si v něm nadpisy, odkazy a další členění dodělají.

Ale to se časem ukázalo také v praxi nepoužitelné. Postupem doby jsem ale dospěl k řešení, které mi na 90 % vyhovuje a splňuje následující:

• Umožňuje mi používat většinu HTML značek
• Bezvadně očistí text vložený z Wordu a nezanechá balast
• Snadno se používá a běžný uživatel nemusí nic speciálního mačkat nebo na něco myslet

Jak tedy na Drupal 8 a očištěný text z Wordu?

Kupodivu nepotřebujete žádný speciální modul nebo nějaké fragmenty kódu vložené ve vlastním modulu či tématu vzhledu. K výše uvedenému řešení se propracujete jen úpravou základního nastavení Drupalu 8.

1. Přejděte do Nastavení > Vytváření obsahu > Formáty textu a editory. Změňte pořadí formátů tak, aby na prvním místě byl Full HTML. Bude to pohodlnější jak pro vás, tak pro běžné uživatele, kterým na něj přiklepnete oprávnění. Nastavení uložte.
2. Přejděte do Nastavení formátu Full HTML. Upravte lištu s nástroji, jak potřebujete. Především ale zapněte filtr Omezit povolené HTML tagy a opravit chyby v HTML.
3. 3.     Ve spodní části vám přibude nastavení s Povolenými značkami HTML. Zde je zakopaný pes. Výchozí sada vám pravděpodobně nebude stačit, já ji nahrazuju za tuto:
   <em class> <strong class> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id class> <h3 id class> <h4 id> <h5 id> <h6 id> <s> <sup> <sub> <a href hreflang data-entity-type data-entity-uuid class target> <img src alt data-entity-type data-entity-uuid data-align data-caption class width height> <table> <caption> <tbody> <thead> <tfoot> <th> <td> <tr> <hr> <p class> <h1 id class> <pre> <div class style> <br> <iframe width height src allow allowfullscreen frameborder>
   
   
4. Nastavení po této změně uložte a vyzkoušejte vložení nějakého textu z Wordu do Drupalu 8 s formátem textu Full HTML.
   

Proč to nejde tak hladce s výchozím formátem Basic HTML? Pokud vám stačí omezená sada HTML značek, dosáhnete podobného výsledku, když v nastavení tohoto formátu textu smažete ze seznamu povolených značku <span>. Pak se bude vložený text očišťovat a zároveň nebudou vznikat ony zbytečné spany.

Já ale potřeboval něco více. Spolu s klienty používáme tlačítka pro zarovnávání textu. Občas vložíme nějaký iframe – video, mapu či něco takového. Proto dávám přednost úpravě Full HTML, vylepšené liště editoru a rozšířenému seznamu povolených značek. Všimněte si, že u nich musíme specifikovat i atributy, které CKEditor dovolí používat. Bez atributu class by třeba nefungovalo zarovnávání textu tlačítkem v editoru.

Nevýhoda takového řešení?

Nahoře jsem psal, že mi toto řešení vyhovuje tak na 90 %. Ano, já bych totiž úplně nejraději měl značku <span> povolenou a zároveň filtrovanou při vkládání z Wordu. Spany se totiž dají použít s připravenými styly, pokud chcete něco jako zvýrazněný kus textu ve větě.

Řeším to nyní tak, že připravím v nabídce stylů něco jako em.highlighter|Zvýrazněný text. Označený text se sice udělá kurzívou a přidá se mu třída .highlighter, ale kurzívu už jsem schopen na úrovni CSS předefinovat a také podbarvit, jak je třeba.