Hiranthi's weblog

Gisteren kreeg ik via Skype (niet helemaal letterlijk) de volgende vraag:

Ik heb 2 WYSIWYG-editors in het Content Edit scherm, ik wil ze graag beide apart stijlen. Kan dat?

Omdat ik het antwoord niet wist gooide ik meteen Google open en begon te zoeken. Helaas was er niet veel over te vinden. Het enige dat ik tegenkwam was allemaal veroudert (van ergens in 2008 tot halverwege 2011). Toen leek ik wat gevonden te hebben op StackExchange, maar dat bleek niet meer te werken vanaf WordPress 3.1, hadden we dus niks aan.

Uiteindelijk vond ik wat op de TinyMCE website zelf: je kunt via een var (in de TinyMCE JS) een body_class opgeven. Helemaal geweldig, want dat is wat we nodig hadden. Ik gevraagd of dat toegevoegd kon worden aan de code, maar dat lukte niet echt. Toen gevraagd hoe de editor wordt aangemaakt en toen kreeg ik een verrassend antwoord:

<?php
$settings = array (
 'textarea_name' => 'page_sidebar_box',
 'textarea_rows' => '8',
 'media_buttons' => false,
 'teeny' => true,
 'wpautop'=> false
);

wp_editor( $page_sidebar_box, 'page_sidebar_box', $settings );

?>

Nu vraag je je wellicht af wat het verrassende was aan dat antwoord. Nou, ik kende de [wp]wp_editor[/wp] functie helemaal niet
Blijkbaar is die functie toegevoegd in WordPress 3.3 (dus best nieuw, niet zo gek dat ik ‘m nog niet tegen was gekomen ).

Dus: pagina in de Codex opgezocht en daar zag ik iets heel interessants staan:

tinymce(array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array()

Default: true

 Dus ik dacht, hee dat combineren we met wat ik op de TinyMCE website had gevonden, wie weet werkt dat wel:

<?php
$settings = array (
 'textarea_name' => 'page_sidebar_box',
 'textarea_rows' => '8',
 'media_buttons' => false,
 'teeny' => true,
 'wpautop'=> false,
 'tinymce' => array('body_class' => 'my_class') // <- dit dus toegevoegd
);
?>

En wat denk je? Het werkt!

Zo kun je dus een realistischere WYSIWYG beleving geven aan je klanten (of jezelf natuurlijk ) omdat je in de [wp]add_editor_style[/wp] nu ook kunt richten op een specifieke WYSIWYG editor!

Print PDF