Tipps, WordPress

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.
Weiterlesen

Standard
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
Tipps, WordPress

WordPress WYSIWYG-Editor TinyMCE erweitern

Der Editor TinyMCE, der seit Version 2.1 von WordPress dabei ist hat eine ganze Reihe von Funktionen, die allerdings nicht standardmäßig ersichtlich sind. Außerdem gibt es die Funktion HTML-Code, die überhaupt nicht berücksichtigt wurde.

TinyMCE erweitert

Ich habe für ein Projekt den Editor verändert, so dass die Autoren leichter an die Zusatzfunktion kommen, einfach den zugehörigen Button klicken, und einen zusätzlichen Button für die Bearbeitung des kompletten HTML-Codes haben, in einem extra Fester.

Dazu muss die Konfigurationsdatei vom Editor bearbeitet werden: /wp-includes/js/tinymce/tiny_mce_config.php

Ändert den Code bei $mce_buttons in folgenden, oder passt ihn an.


$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', 'wp_adv', 'wp_adv_start', 'formatselect', 'underline', 'justifyfull', 'forecolor', 'separator', 'pastetext', 'pasteword', 'separator', 'removeformat', 'cleanup', 'separator', 'charmap', 'separator', 'undo', 'redo', 'separator', 'code', 'wp_adv_end' ) );
$mce_buttons = implode( $mce_buttons, ',' );

Der Button HTML kommt durch die Erweiterung von code. Der Button für das Ein-/Ausschalten der Zusatzfunktionen kommt daher, weil ich den Tag wp_adv vorgezogen habe, vor wp_ad_start.

Weitere Links:

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