WordPress WYSIWYG-Editor TinyMCE erweitern #2

Das schöne am Leben ist ja: man lernt immer dazu und nie aus. Auch in diesem Bereich ist das mal wieder so, denn ein alter Artikel auf diesem meinem kleinen Blog hier, hat mal erklärt, wie man den Editor TinyMCE in WordPress an seine Bedürfnisse anpassen kann - sträflich, denn ich habe damals die Core-Dateien von WordPress angefasst. Um so wichtiger, dass ich eine bessere Lösung aufzeige und wiedermal, in dem Fall auch mich, darauf hinweise, dass man die Core-Dateien von Systemen nicht anfasst! Aber der Artikel scheint recht beliebt und scheinbar wollen auch viele Nutzer diesen Editor anpassen. Im ersten Schritt sucht man dann nach Plugins und nicht immer wird man fündig. Es gibt also noch immer Bedarf im Plugin-Sektor von WordPress; wie im übrigen auch meine Mails zeigen.

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 8 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Das schöne am Leben ist ja: man lernt immer dazu und nie aus. Auch in diesem Bereich ist das mal wieder so, denn ein alter Artikel auf diesem meinem kleinen Blog hier, hat mal erklärt, wie man den Editor TinyMCE in WordPress an seine Bedürfnisse anpassen kann - sträflich, denn ich habe damals die Core-Dateien von WordPress angefasst.

Um so wichtiger, dass ich eine bessere Lösung aufzeige und wiedermal, in dem Fall auch mich, darauf hinweise, dass man die Core-Dateien von Systemen nicht anfasst! Aber der Artikel scheint recht beliebt und scheinbar wollen auch viele Nutzer diesen Editor anpassen. Im ersten Schritt sucht man dann nach Plugins und nicht immer wird man fündig. Es gibt also noch immer Bedarf im Plugin-Sektor von WordPress; wie im übrigen auch meine Mails zeigen.

Nun aber zum eigentlichen Inhalt des Beitrags, das Anpassen des Editor TinyMCE via Hook, also unabhängig der Core-Dateien von WordPress. Die folgenden Code-Schnippsel legt man in die functions.php des Themes oder lagert sie in ein Plugin aus. Es gibt eine ganze Reihe von Möglichkeiten und ich möchte nur eine Auswahl aufzeigen. Das Anpassen der Buttons ist sicher recht bequem über das Plugin TinyMCE Advanced zu erledigen.

Den HTML-Filter anpassen

Im Standard ist der Editor so eingestellt, dass immer xHTML 1.0 erzeugt wird und damit werden nicht alle Tags erlaubt; klassisches Beispiel sind iframes, die man Beispielsweise mit Google Map im Boot hat. Auch dafür gibt es andere Ansätze via Shortcode etc., aber darum soll es hier nicht gehen. Lediglich als Beispiel soll das Erlauben des Tag iframe mit diversen Attributen hier stehen und die Tags müssen zur Variable $ext ergänzt werden.


function fb_change_mce_options($initArray) {
	// Comma separated string od extendes tags
	// Command separated string of extended elements
	$ext = 'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]';

	if ( isset( $initArray['extended_valid_elements'] ) ) {
		$initArray['extended_valid_elements'] .= ',' . $ext;
	} else {
		$initArray['extended_valid_elements'] = $ext;
	}
	// maybe; set tiny paramter verify_html
	//$initArray['verify_html'] = false;

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_options');

Anpassen der Funktion, der Buttons im Editor

Im weiteren eine kleine Möglichkeit um die Blockformate (theme_advanced_blockformats) zu erweitern bzw. zu verändern und einige Buttons im Editor zu deaktivieren (theme_advanced_disable).

TinyMCE in WordPress angepasst


function fb_change_mce_buttons( $initArray ) {
	//@see http://wiki.moxiecode.com/index.php/TinyMCE:Control_reference
	$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
	$initArray['theme_advanced_disable'] = 'forecolor,bold,italic';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

Sprachen der Rechtschreibprüfung ändern

Im dritten Fall passen wir die Sprachen der Rechtschreibprüfung an, im Beispiel wird nun nur noch Deutsch und Englisch zugelassen.


function fb_mce_external_languages($initArray){
	$initArray['spellchecker_languages'] = '+German=de, English=en';

	return $initArray;
}
add_filter('tiny_mce_before_init', 'fb_mce_external_languages');

Die Standard-Werte von WordPress

Im Anschluss die Werte, die im Standard von WordPress genutzt werden und die einen Einblick in die Möglichkeiten für die Übergabe des Arrays geben.


'mode' => 'specific_textareas'
'editor_selector' => 'theEditor'
'width' => '100%'
'theme' => 'advanced'
'skin' => 'wp_theme'
'theme_advanced_buttons1' => 'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv'
'theme_advanced_buttons2' => 'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help'
'theme_advanced_buttons3' => ''
'theme_advanced_buttons4' => ''
'language' => 'de'
'spellchecker_languages' => 'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv'
'theme_advanced_toolbar_location' => 'top'
'theme_advanced_toolbar_align' => 'left'
'theme_advanced_statusbar_location' => 'bottom'
'theme_advanced_resizing' => true
'theme_advanced_resize_horizontal' => false
'dialog_type' => 'modal'
'relative_urls' => false
'remove_script_host' => false
'convert_urls' => false
'apply_source_formatting' => false
'remove_linebreaks' => true
'gecko_spellcheck' => true
'entities' => '38,amp,60,lt,62,gt'
'accessibility_focus' => true
'tabfocus_elements' => 'major-publishing-actions'
'media_strict' => false
'paste_remove_styles' => true
'paste_remove_spans' => true
'paste_strip_class_attributes' => 'all'
'wpeditimage_disable_captions' => false
'plugins' => 'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus'

Hinweis für WordPress 3.9

Mit WordPress 3.9 wurde der TinyMCE 4 integriert, in dem eine neue API verwendet wird. Damit ändern sich teilweise die Schlüssel-Werte der oben beschriebenen Arrays. Die Hooks innerhalb von WordPress sind geblieben. Daher schaut bitte auf die Werte des Array, anbei ein neues Abbild des aktuellen Standard-Arrays, der die Schlüsselwerte seit WP 3.9, TinyMCE 4 enthält. Parallel gibt es weitere Werte, die im Standard nicht genutzt werden, dazu im Wiki von TinyMCE schauen.


array (size=31)
  'theme' => string 'modern' (length=6)
  'skin' => string 'lightgray' (length=9)
  'language' => string 'en' (length=2)
  'formats' => string '{
						alignleft: [
							{selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
							{selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
						],
						aligncenter: [
							{selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
							{selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
						],
						alignright: [
							{selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
							{selector: 'img,tab'... (length=606)
  'relative_urls' => boolean false
  'remove_script_host' => boolean false
  'convert_urls' => boolean false
  'browser_spellcheck' => boolean true
  'fix_list_elements' => boolean true
  'entities' => string '38,amp,60,lt,62,gt' (length=18)
  'entity_encoding' => string 'raw' (length=3)
  'keep_styles' => boolean false
  'paste_webkit_styles' => string 'font-weight font-style color' (length=28)
  'preview_styles' => string 'font-family font-size font-weight font-style text-decoration text-transform' (length=75)
  'wpeditimage_disable_captions' => boolean false
  'wpeditimage_html5_captions' => boolean false
  'plugins' => string 'charmap,hr,media,paste,tabfocus,textcolor,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpview,wpfullscreen' (length=121)
  'external_plugins' => string '{"rmnlQuicktagSettings_tmce":"http:\/\/localhost\/wp-plugins\/AddQuicktag\/inc\/tinymce\/editor_plugin.dev.js","template":"http:\/\/localhost\/wp-plugins\/tinymce-templates\/mce_plugins\/4.0\/plugins\/template\/plugin.min.js"}' (length=226)
  'content_css' => string 'http://localhost/wpbeta/plugins/wp-includes/css/dashicons.css?ver=4.0-alpha,http://localhost/wpbeta/plugins/wp-includes/js/mediaelement/mediaelementplayer.min.css?ver=4.0-alpha,http://localhost/wpbeta/plugins/wp-includes/js/mediaelement/wp-mediaelement.css?ver=4.0-alpha,http://localhost/wpbeta/plugins/wp-includes/js/tinymce/skins/wordpress/wp-content.css?ver=4.0-alpha,http://localhost/wp-content/themes/twentyten/editor-style.css,http://localhost/wp-plugins/tinymce-templates/editor.css' (length=489)
  'selector' => string '#content' (length=8)
  'resize' => boolean false
  'menubar' => boolean false
  'wpautop' => boolean true
  'indent' => boolean false
  'toolbar1' => string 'template,|,bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,wp_fullscreen,wp_adv' (length=153)
  'toolbar2' => string 'rmnlQuicktagSettings_tmce,formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help' (length=135)
  'toolbar3' => string '' (length=0)
  'toolbar4' => string '' (length=0)
  'tabfocus_elements' => string 'insert-media-button,save-post' (length=29)
  'body_class' => string 'content post-type-post post-status-draft post-format-standard' (length=61)
  'add_unload_trigger' => boolean false

Kommentare sind geschlossen.