Plugin, WordPress

WordPress Editor TinyMCE leicht anpassen

Dieses Ziel ist die Aufgabe eines neuen Plugins mit dem Namen Super Edit.

In dem einen oder anderen Tutorial habe ich erklärt, wie man sich den WYSIWYG-Editor von WordPress anpassen kann. Das ist nicht unbedingt der einfache und beste Weg, vorallem für Code-Neulingen. Mit dem Plugin Super Edit ist damit Schluss, installieren, aktivieren und konfigurieren. Damit kann man jedem User den Editor einfach und schnell gestalten.

Wer weiter gehen möchte und die Buttons des Code-Editors erweitern möchte, der greift zum Plugin AddQuicktag, dann sollte nichts mehr schief gehen und alle benötigten Funktionen liegen im Editor bereit.

Standard
Tipps, WordPress

WordPress Editor TinyMCE noch umfangreicher erweitern

Der WYSIWYG-Editor ist sicher nicht das Allheilmittel und ob und wie gern man ihn verwenden sollte, muss jeder selber wissen. Ich für meinen Teil komme immer lieber auf meine HTML-Kenntnisse zurück. Trotzdem trudeln hier immer wieder Anfragen ein und für ein Projekt, wo ich ohne WYSIWYG nicht auskomme, musste ich mich damit auseinander setzen.

Wie das meist so ist, haben die Anwender erst einmal das Prinzip geschluckt – so wollen Sie immer mehr. Ein Anforderung war das eigene Implementieren von Tabellen. Eine Tabelle ist mit purem HTML nicht so einfach zu integrieren, da muss man schon mal mitdenken. Der TinyMCE hat diese Möglichkeit, allerdings nicht im Umfang von WordPress.

Wie man Veränderungen sonst noch vornehmen kann, habe ich schonmal in einem älteren Artikel erläutert WordPress WYSIWYG-Editor TinyMCE erweitern.

Um den Editor zu erweitern, muss man erst einmal das komplette Paket downloaden und darin befinden sich auch alle Plugins. Nun muss man die benötigten Plugins in das Verzeichnis /wp-includes/js/tinymce/plugins/ kopieren.

Danach muss die Konfiguationsdatei tiny_mce_config.php bearbeitet werden, in /wp-includes/js/tinymce/.

Ich möchte hier nicht explizit jeden Part erläutern, dafür steht die Dokumentation des TinyMCE-Projektes zum Thema Plugin bereit.

Aber als Beispiel soll die Tabelle herhalten.

TinyMCE und Tabellen

Nachdem das Plugin table in das Plugin-Verzeichnis des TinyMCE kopiert wurde, ladet die Konfigurationsdatei in euren Editor. Dort sucht ihr:


$plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'wordpress');

und erweitert um das Plugin, denn diese Variable übergibt alle zu verwendeten Plugins an die Initialisierung initArray, plugins : „<?php echo $plugins; ?>“.


$plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'table', 'wordpress');

Außerdem muss der Button tablecontrols geladen werden. Alle Zusatzfunktionen habe ich in die dritte Zeile $mce_buttons_3 des Editors gelegt, so dass ein Unterschied zu erkennen ist und die Zusatzfunktionen von den Originalfunktionen getrennt sind.


$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols'));
$mce_buttons_3 = implode($mce_buttons_3, ',');

Und das war es auch schon. Nun kann man per Extra-Fenster eine Tabelle integrieren.

Im folgenden der Code, der Datei tiny_mce_config.php, so dass alle Plugins immer aktiv sind und zusätzlich gibt es Tabellen – table, xhtml-Extras – cite, ins , del, abbr, acronym und Suchen & Ersetzen – search, replace. Allerdings soll dies nur als Beispiel dienen. TinyMCE bringt wesentlich mehr mit.

Eine andere Lösung, wenn man mit dem Editor nicht zufrieden ist, ist das Austauschen des Editors gegen einen anderen Editor. Erik Pöhler erklärt es – Weg mit TinyMCE… aber Zack Zack!


<?php
	@ require('../../../wp-config.php');

	function wp_translate_tinymce_lang($text) {
		if ( ! function_exists('__') ) {
			return $text;
		} else {
			$search1 = "/^tinyMCELang\\[(['\"])(.*)\\1\]( ?= ?)(['\"])(.*)\\4/Uem";
			$replace1 = "'tinyMCELang[\\1\\2\\1]\\3'.stripslashes('\\4').__('\\5').stripslashes('\\4')";

			$search2 = "/ : (['\"])(.*)\\1/Uem";
			$replace2 = "' : '.stripslashes('\\1').__('\\2').stripslashes('\\1')";

			$search = array($search1, $search2);
			$replace = array($replace1, $replace2);

			$text = preg_replace($search, $replace, $text);

			return $text;
		}
	}

	// Set up init variables
	$valid_elements = 'p/-div[*],-strong/-b[*],-em/-i[*],-font[*],-ul[*],-ol[*],-li[*],*[*]';
	$valid_elements = apply_filters('mce_valid_elements', $valid_elements);

	$plugins = array('inlinepopups', 'autosave', 'spellchecker', 'paste', 'table', 'xhtmlxtras', 'searchreplace', 'wordpress');
	$plugins = apply_filters('mce_plugins', $plugins);
	$plugins = implode($plugins, ',');

	$mce_buttons = apply_filters('mce_buttons', array('bold', 'italic', 'strikethrough', 'separator', 'bullist', 'numlist', 'outdent', 'indent', 'separator', 'justifyleft', 'justifycenter', 'justifyright', 'separator', 'link', 'unlink', 'image', 'wp_more', 'separator', 'spellchecker', 'separator', 'wp_help'));
	$mce_buttons = implode($mce_buttons, ',');

	$mce_buttons_2 = apply_filters('mce_buttons_2', array('formatselect', 'underline', 'justifyfull', 'forecolor', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo'));
	$mce_buttons_2 = implode($mce_buttons_2, ',');

	$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols', 'separator', 'cite', 'ins', 'del', 'abbr', 'acronym', 'separator', 'search', 'replace'));
	$mce_buttons_3 = implode($mce_buttons_3, ',');

	$mce_browsers = apply_filters('mce_browsers', array('msie', 'gecko', 'opera', 'safari'));
	$mce_browsers = implode($mce_browsers, ',');
	
	$mce_popups_css = get_option('siteurl') . '/wp-includes/js/tinymce/plugins/wordpress/popups.css';
	$mce_css = get_option('siteurl') . '/wp-includes/js/tinymce/plugins/wordpress/wordpress.css';
	$mce_css = apply_filters('mce_css', $mce_css);
	if ( $_SERVER['HTTPS'] == 'on' ) {
		$mce_css = str_replace('http://', 'https://', $mce_css);
		$mce_popups_css = str_replace('http://', 'https://', $mce_popups_css);
	}
?>

initArray = {
	mode : "specific_textareas",
	editor_selector : "mceEditor",
	width : "100%",
	theme : "advanced",
	theme_advanced_buttons1 : "<?php echo $mce_buttons; ?>",
	theme_advanced_buttons2 : "<?php echo $mce_buttons_2; ?>",
	theme_advanced_buttons3 : "<?php echo $mce_buttons_3; ?>",
	language : "<?php echo strtolower(get_locale()); ?>",
	theme_advanced_toolbar_location : "top",
	theme_advanced_toolbar_align : "left",
	theme_advanced_path_location : "bottom",
	theme_advanced_resizing : true,
	browsers : "<?php echo $mce_browsers; ?>",
	dialog_type : "modal",
	theme_advanced_resize_horizontal : false,
	convert_urls : false,
	relative_urls : false,
	remove_script_host : false,
	force_p_newlines : true,
	force_br_newlines : false,
	convert_newlines_to_brs : false,
	remove_linebreaks : false,
	fix_list_elements : true,
	entities : "38,amp,60,lt,62,gt",
	content_css : "<?php echo $mce_css; ?>",
	valid_elements : "<?php echo $valid_elements; ?>",
	save_callback : 'TinyMCE_wordpressPlugin.saveCallback',
	imp_version : "<?php echo intval($_GET['ver']); ?>",
<?php do_action('mce_options'); ?>
	plugins : "<?php echo $plugins; ?>"
};

<?php
	// For people who really REALLY know what they're doing with TinyMCE
	// You can modify initArray to add, remove, change elements of the config before tinyMCE.init
	do_action('tinymce_before_init');
?>

tinyMCE.init(initArray);
Standard
Webküche

Vergleich von Webbasierenden WYSIWYG-Editoren

TinyMCEWebbasierenden WYSIWYG-Editoren sind nichts neues mehr. Es gibt die verschiedensten Modelle mit den unterschiedlichsten Möglichkeiten. Wie sieht es aber um die Einhaltung von Standards aus, denn der Code, der dabei entsteht sollte auch hier sauber sein und dem geeignet Code-Leser gefallen.

Für die WordPress-Community ist TinyMCE der aktuelle Standard. Nicht immer ist er das Non-Plus-Ultra, was aber auch für diverse Aufgaben nicht gedacht ist und er ist Open Source. Im Vergleich schlägt er sich aber nicht schlecht – Platz 3 mit 15 Punkten auf der Vergleichsübersicht von Peter Krantz. Mehr zu den Ergebnissen sind im zugehörigen Artikel zu finden.

Standard