Můj web

Wysiwyg ve WordPressu

Publikováno 11.2.2012

Ač zarytý odpůrce wysiwyg editorů (v rukou neznalého uživatele mohou napáchat velké škody) – řeším následující úkol: potřebuji v editaci textu wysiwyg editorem v administraci WordPressu dát editorovi možnost používat i jiné styly pro formátování textu, než H1-H6. (Z hlediska SEO nemusí být používání těchto značek vždy žádoucí.) Chci si tedy vytvořit vlastní styly a tyto styly se musí objevit v nabídce formátování textu. Rovnou prozradím, že moje řešení se jmenuje CKEditor. Jak jsem k němu dospěl se dozvíte v článku.

Výchozí editor TinyMCE mi řešení požadavku jednoduše neumožňuje. Existuje rozšiřující plugin TinyMCE Advanced, který obsahuje celkem pěknou administraci wysiwygu. Přidává do nabídky uživatelsky definované styly, které jsou obsaženy v souboru editor-style.css, který je umístěn v adresáři aktuálního tématu webu. Teoreticky krásné, tak jsem si to jednoduše naklikal. Při prvním načtení wysiwygu vidím všechny definované CSS styly, paráda. Ale po refreshi, jsou najednou pryč! Hledám, co jsem kde změnil, ale do původního stavu se dostanu zpět až po vymazání cache v prohlížeči. Na první načtení styly znovu vidím, pak už ne. Hledat řešení této chyby nehodlám – tolik času nemám. Tento plugin tedy opouštím.

Následuje ukázka funkčního řešení pomocí pluginu CKEditor. Předvedu, jak lze nastavit formátovací styl Red Text do výběrového boxu.

Wysiwyg CKEditor CSS styly

Krok 1: Po nainstalování pluginu nejde ani v rozšířeném nastavení naklikat seznam formátovacích prvků editoru. Ovšem velmi jednoduše lze přidat výběrový box pro formátovací styly editací souboru /wp-content/plugins/ckeditor-for-wordpress/ckeditor.config.js

// WordPress full toolbar
config.toolbar_WordpressFull = [
  ['Source'],
  ['Cut','Copy','Paste','PasteText','PasteFromWord','-','SpellChecker', 'Scayt'],
  ['Undo','Redo','Find','Replace','-','SelectAll','RemoveFormat'],
  ['HorizontalRule'],
  '/',
  ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
  ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
  ['JustifyLeft','JustifyCenter','JustifyRight'],
  ['BidiLtr','BidiRtl'],
  ['Link','Unlink','Anchor'],
  '/',
  ['Styles','Format','FontSize'],
  ['TextColor','BGColor'],
  ['Maximize', 'ShowBlocks'],['MediaEmbed'],['Iframe']
];

Ve třetí skupině odspodu přibylo Styles. Tím se zobrazí výběrový box.

Krok 2: Musíme definovat styly, které jsou v něm nabízeny. K tomu použijeme soubor s CSS styly, který se natahuje do webové prezentace, např. /wp-content/themes/mojetema/style.css

.custom-red {
  color: red;
}

Krok 3: Dále řekneme editoru, který styl má nabízet ve výběru /wp-content/plugins/ckeditor-for-wordpress/ckeditor.styles.js Všechny nechtěné styly zakomentujeme (nebo smažeme) a přidáme náš výše nadefinovaný:

CKEDITOR.addStylesSet( 'wordpress',
[
  { name : 'Red Text' , element : 'span', attributes : { 'class' : 'custom-red' } },
  ...
]);

Krok 4: Aby nám všechno šlapalo, musíme mít samozřejmě provedeno správně nastavení pluginu CKEditor. V základním nastavení necháme toolbar na hodnotě WordPressFull. V rozšířeném nastavení vybereme volbu CSS pro editor na vlastní – Define CSS a zadáme cestu k souboru: /wp-content/themes/mojetema/style.css

Při laborování s CKEditorem jsem narazil i na plugin Dean’s FCKEditor a vyzkoušel ho. Oproti předchozímu řešení nabízí administraci prvního kroku. Jak a kde provést nadefinování vlastních stylů jsem neobjevil. Navíc je postaven na nějaké starší verzi CKEditoru, takže mi přijde lepší použít předchozí řešení. Někomu ale může tento plugin s předdefinovanými styly posloužit.

Pokud máte někdo vyzkoušené jiné řešení, můžete se podělit v komentářích.

Komentáře

Komentáře jsou vypnuty.