Schlagwort: tinyMCE erweitern

tinyMCE erweitern mit neues Styles

9. Juni 2011 - tinymce, wordpress

Für ein Projekt musste ich den tinyMCE um ein paar Stilvorlagen erweitern. Die Vorgehensweise möchte ich hier kurz aufzeigen. Damit es einfacher wird, kann man sich auch ein kleines Plugin herunterladen.

English Summary: if you want to configure the WordPress standard editor, tinyMCE,  you need to change just one array. That sounds easy. However: This array is huge and not without contradictions. Same is true for the documentation. In the following I want to show how to add some styles to the tinymce style-dropdown meue. For better understanding you may download a small plugin.

Tinymce wird über ein riesiges Array konfiguriert. Darauf kann man mit verschiedenen Methoden zugreifen:
mit jQuery, mit dem Plugin Tinymce Advanced oder mit WordPress Bordmitteln „add_editor_style(…)“ oder add_filter(‚tiny_mce_before_init‘,’name_of_function_you_have written’)

Um die Stilvorlagen im Hauptmenu anzuzeigen, schaltet man sich die benötigten  Dropdowns ( hier: Styles und Font Size für unterschriedliche Schriftgrößen ) am einfachsten mit dem Tinymce Advanced Plugin frei.

Beispiel: kiju_fliess soll ein Format sein, das auf beiden Seiten einen definierten Abstand zum Rand hat.

.kiju_fliess { padding: 0 15% 0 15%;}

Das Menü styles wird nun um den Eintrag Fliesstext=kiju_fliess erweitert. Tinymce trägt an allen markierten Textstellen die Klasse kiju_fliess ein, wenn „Fliesstext“ angewählt wurde.

Natürlich muss man im Frontend auch sein Seitenstylesheet (z.B. style.css) entsprechend erweitern 🙂

Wenn man die Auswirkungen der Formatierung gleich im Editor sehen möchte, kann man tinymce  ein zusätzliches Stylesheet mitgeben. Dieses Stylesheet liegt in diesem Beispiel im Plugin im Ordner stylesheets.

Das Plugin besteht nur aus den folgenden Zeilen:

if ( !class_exists( 'tinymce_add_styles' ) ) {
class tinymce_add_styles {
function tinymce_add_styles() {
add_action( 'admin_head',array(&$this, 'tinymce_add_styles_init'));
}
function tinymce_add_styles_init() {
if (get_user_option('rich_editing') == 'true') {
add_filter('tiny_mce_before_init',array(&$this,'nf_add_styles'));
}
}
public function nf_add_styles ($initArray) {
$initArray['theme_advanced_font_sizes'] = "8px=8px,10px=10px,12px=12px,14px=14px,18px=18px,24px=24px,36px=36px";
$initArray['theme_advanced_styles'] ="Überschrift_gross=kiju_sub_36,Überschrift_mittel=kiju_sub_24,Überschrift_klein=kiju_sub_18,Fliesstext=kiju_fliess";
$nf_stylesheet=plugins_url().'/tinymce_add_styles/stylesheets/editor-style.css';
if (array_key_exists('content_css', $initArray) && !empty($initArray['content_css'])) $initArray['content_css'].=",".$nf_stylesheet;
else $initArray['content_css'] = $nf_stylesheet;
return $initArray;
}
}
$tinymce_add_styles = new tinymce_add_styles();
}

Tinymce kann mit mehreren Stylesheets umgehen. Man muss nur aufpassen, dass man bestehende Einträge in $initArray[‚content_css‘] nicht überschreibt.

Achtung:

Ich hatte in diesem Fall den tinyMCE  ‚advanced’ . Es gibt noch einen zweiten erweiterbaren Style-Bereich im initArray:
$initArray[’style_formats‘]=….

Den sollte man aber nicht verwenden, da sich seine Einstellungen mit „advanced“ nicht vertragen. Nur zur Vollständigkeit: $initArray[’style_formats‘]= „[{title : ‚Fliesstext‘, block :’p‘,classses :’kiju_fliess‘}]“;

Hier könnt ihr das Plugin downloaden:  tinymce_add_styles