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);

28 Kommentare

  1. Hallo Frank,
    mir gehts wie dir, ich hasse Tiny MCE. Jedesmal wenn man code eingfügt hat und hinterher noch mal was editiert, klatscht der ganze Code zusammen und die Einrückungen sind weg. Wenn ich ein Tutorial schreibe, dann mach ich es mit meinem HTML Editor und füge dann den gesamten Quelltext über den Button 'html einfügen' ein und aus die Maus 🙂
    Viele Grüße
    Micha

  2. Hallo. Danke erstmal für diesen Beitrag - ist ne gute Sache und funktioniert simpel und recht stabil!
    Bis auf eine Sache [vielleicht hatte ja jemand das gleiche Problem und kennt ne lösung]:
    ich hab den editor um die tabellenfunktion wie beschrieben erweitert und sobald ich bei einer erstellten tabelle die zeileneigenschaften ändere (zB. HG-Farbe) verschwindet die komplette Zeile nach dem speichern...

    Ideen?? | Danke | Gruß

  3. Ich hab leider ein Problem mit Tabellen und WordPress / Tiny Editor,
    Wordpress löscht mir ständig Zeilen raus aus Tabellen. An welchem WordPress Filter liegt das, das WP den Code umstellt.

    Es liegt definitiv nicht an Tiny selbst sondern kommt von einem Filter den WordPress aufruft.

  4. Schalte mal die Funktion "WordPress soll falsch verschachteltes XHTML automatisch korrigieren." in Einstellungen --> Schreiben aus, eventuell liegt es daran. Wie fügst du Tabellen ein, via TinyMCE Plugin oder Code?

  5. Schon alles versucht, der Fehler entsteht wenn ich den Post editiere.
    In der DB steht der Inhalt richtig drin, wenn ich den nun editiere läd er den Inhalt falsch ins Fenster.

    Hab mal ein wenig rum gesucht, ich denke es liegt am Filter the_editor_content jedoch weiß ich nicht was dieser bewirkt :-/

  6. Danke für die Beschreibung, sehr hilfreich! (z.B. dass die Plugins im Download versteckt sind, oder warum man nicht nach tinyMCE.init() suchen muss etc)

Kommentare sind geschlossen.