Sidebar
ein-/ausblenden

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

Artikel #415, 26. März 2007 · Tipps, WordPress · 30 Kommentare · Kommentar schreiben
Tags: HowTo, TinyMCE, WordPress, WP, WYSIWYG
Kommentar-Feed zum Artikel · TrackBack URL · Kurzlink

26 Kommentare und 4 Trackbacks zu „WordPress Editor TinyMCE noch umfangreicher erweitern“

1
Kommentar von Micha
26. März 2007 um 14:19
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
Pingback von Wordpress Editor TinyMCE erweitern - vi-su
14. Mai 2007 um 14:20
3
Pingback von Wordpress Plugin TinyMCE Advanced - vi-su
25. Mai 2007 um 09:11
4
Kommentar von Holmez!
1. Oktober 2007 um 11:17
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ß
5
Kommentar von raz!el
14. November 2007 um 10:37
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.
6
Kommentar von Frank Bültge
14. November 2007 um 10:54
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?
7
Kommentar von Ralf
14. November 2007 um 18:50
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 :-/
8
Kommentar von Esel
19. November 2007 um 15:32
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)
9
Pingback von kick-image.at - High End Webdesign / Printdesign / Webtools / Freeware / Linz / Austria / Österreich: Weblog: WordPress: Editor in “Fullscreen”
4. Februar 2008 um 11:55
10
Kommentar von Marc
12. Dezember 2008 um 17:22
Frage des Tages:
Wo ist die tiny_mce_config.php bei WP2.7?
11
Kommentar von Frank Bültge
12. Dezember 2008 um 19:25
@MArc: schau mal in die /wp-admin/includes/post.php und suche nach $mce_buttons
12
Kommentar von Marc
12. Dezember 2008 um 20:54
Hmmm... finde ich so gar nicht?!
13
Kommentar von Marc
16. Dezember 2008 um 22:24
Ok, lesen bildet... Ich sollte auch in wp-admin/ und nicht wp-includes/ suchen
Ist aber auch fies, dass es die post.php wirklich zweimal gibt!
14
Kommentar von Marguerite Baumann
11. Januar 2009 um 08:18
Hallo,
meine Tabelle läuft auf WordPress 2.7. Ich habe, wie oben beschrieben, schon die post.php so geändert, dass es läuft, nachdem ich die Plugin-Datei table für TinyMCE geholt und an entsprechender Stelle gespeichert habe. Ich fand das sehr aufregend, weil ich sonst nieeee in Codes rumwühle! Es war aber nicht kompliziert. Ich habe auch meine Tabelle erstellen können, allerdings ist der ganze Job noch nicht erledigt, denn die Darstellung der Menü ist irgendwie auf halber Strecke geblieben: Ich habe mal 2 Screenshots gespeichert: http://euphoriatours.wordpress.com/.
Liegt es an der Flash-Anwendung, die die Kurve nicht kratzen kann? Wie auch immer. Ich bin mit meinem armseligen Latein schon am Ende! Was soll ich jetzt tun?
Danke schon mal im voraus.
Marguerite
15
Pingback von tinyMCE und Tabellen in Wordpress 2.7 - Darstellung « Euphoria-Tours
11. Januar 2009 um 08:26
16
Kommentar von Frank Bültge
11. Januar 2009 um 11:14
@MArquerite Baumann: alternativ ist sicher leichter wenn man via Plugin die Zusatzfunktionen des Editors frei schaltet, schau dir bitte den Tiny MCE Advanced an
17
Kommentar von Marguerite Baumann
11. Januar 2009 um 18:06
Aber natürlich! Ich könnte heulen vor Freude! Wie toll! Herzlichen Dank!
Viele Grüße
Marguerite
18
Kommentar von thomas
15. Juni 2009 um 16:22
hallo frank,
seit 2.8 kann ich in der post.php nur die buttons eintragen, die nicht als plugins ebenfalls eingetragen werden - wie eben table mit tablecontrols.
Table kriege ich so nicht mehr zum laufen.

Ebenso konnte ich die Dropdownliste fürs FORMAT bzw. formatselect angepassen in "advaned themes" im tiny in editor.js --- unter advanced.blockformat - also dort zB. "div" und "blockquote" hinzufügen.

Tja - und das läuft jetzt auch nicht mehr im 2.8.

Eine Idee ?????

grüsse thomas
19
Kommentar von Frank Bültge
15. Juni 2009 um 16:53
@thomas: kommst du nicht einfacher weg, wenn du zusätzliche Buttons via Plugin integrierst: Advanced TinyMCE müsste es heißen.
20
Kommentar von thomas
15. Juni 2009 um 19:49
hallo frank,
ja -hm - advanced TinyMCE hab ich ja jetze erstmal im Einsatz - Ich mag das Ding aber nicht besonders (Gibt einige Gründe...), zumal ich auch dort nicht bestimmen kann was im Dropdown vom FORMAT (formatselect) erscheinen soll - wie bislang.

Ich möchte selber die Kontrolle behalten über das Angebot im TinyMCE was ich den Leuten mitgebe, denen ich das System in die Hand gebe und wie die damit umgehen.

Beispiel: Habe ich den Div Tag unter Format kann ich den Leuts sagen "wenn Ihr Euer Flv Movie mittels z.B. Wordtube eingebt und das mittig haben wollt, dann markiert die Zeile und formatiert das mit DIV und dann gebt dem Ganzen das Atribut aligncenter - und dann haben die den Movie auch mittig."
Ansonten müssen die mit dem Layer Button das Gleiche umständlicher erreichen mit zusätzlichen Fehlerquellen und müssen nochmehr beachten ohne genau den Hintergrund zu verstehen.

Insofern möchte ich das schon lieber selber steuern können wie bisher.
und - destoweniger Plugins im Einsatz um so besser anyway.....

Grüsse thomas
21
Kommentar von thomas
16. Juni 2009 um 15:49
hallo Frank,

Habe die Script-Komprimierung im ersten Schritt deaktiviert und hatte zumindest den sehr erfeulichen Effekt das meine Anpassungen (angepasst in “advaned themes” by tiny in editor-template.js ) der Dropdownlist für FORMAT (formatselect) jetzt wirksam werden.

Das betrifft i.Übrigen auch den advanced Tiny MCE......

Was die Table etc. Integration angeht suche ich noch nach der Lösung......

grüsse thomas
22
Kommentar von thomas
16. Juni 2009 um 19:26
Das meine Anpassungen der FORMAT Dropdownlist jetzt angenommen werden liegt nicht unrsächlich an der Script-Komprimierung, wie ich nach nochmal nachdenken feststellen musste!

In der wp-tinymce.js als auch der komprimierten Kopie wp-tinymce.js.gz ist auch die komplette
advanced/editor_template.js enthalten .

In der nichtkompriemierten wp-tinymce.js hatte ich schon die theme_advanced_blockformats geändert bzw. um div & blockquote ergänzt - nicht aber in der gepackten.
Dachte beim löschen der gepackten würde die nichtgepackte aktiv.

So gesehen ist in 2.8 alles dreifach vorhanden……..

Bin noch am schauen ob diese wp-tinymce.js auch verhindert das das Plugin Table angemeldet wird????

grüsse thomas
23
Kommentar von thomas
16. Juni 2009 um 22:33
In der Tat:
Diese wp-tinymce.js insbesondere die komprimierte wp-tinymce.js.gz ist verantwortlich das Andere als die von WP hier eingetragenen tinyMCE plugins nicht genutzt werden können.

Dazu muss hier der Code der "editor-plugin.js" der einzelnen Tiny Plugins in die Wp-tiny.js reinkopiert werden, dann wieder als Gzip gepackt werden und sowohl komprimiert als unkomprimiert hochgeladen werden.

Wird mir nicht klar was das soll ?????? Ergibt für mich keinen ´Sinn zumal man sich nicht mal die Mühe gemacht hat die doppelten Scripte zu löschen...........

Na ja Advanced TinyMCE wird sich freuen.....Individuelle Anpassungen werden durchs System unnötig erschwert - wie im realen Leben......(!) Klasse!!

hier eine gepackte Version mit "div" & "Blockquote" zusätzlich als FORMAT mit im Angebot als auch die Freischaltung für's Table Plugin von TinyMCE, soweit es mit table & tablecontrol in der post.php eingetragen wurde.

grüsse thomas
24
Kommentar von thomas
17. Juni 2009 um 19:12
... und in diesem Zusammenhang dürfte dieser Links von Interesse sein:
Fall back to wp-tinymce.js if wp-tinymce.js.gz doesn't exist
25
Kommentar von Karl-Heinz Weidlinger
24. Januar 2010 um 15:52
Hallo, vielen herzlichen Dank für diesen Betrag, so habe ich auf diese Seite gefunden. Ich habe neuerdings das Problem (schätze es ist mit der WP 2.9.1 erst gekommen, zumindest ist es mir vorher nicht aufgefallen.
Nach einfügen eines Links mit Parameter &xx=123 ändert WP das in &=123 was dann in vielen Fällen zu einem Fehlerhaften Link führt.
Derzeit habe ich als einzige Lösung herausgefunden, dass ich vor dem Speichern und veröffentlichen die amp; bei jedem Link manuell entferne, dass dies nicht Dauerhaft und Elegant gelöst ist, kann sich jeder vorstellen.
Wer kennt eine Lösung für dieses Verhalten?

Ich wäre jedem Hinweis dankbar!

Liebe Grüsse, Karl-Heinz
26
Kommentar von Christoph
3. Mai 2010 um 10:47
Hallo,

vielen Dank für den guten Beitrag. Ich habe auch alles gemacht wie beschrieben, aber ich habe ein Problem:

Die Buttons für die Tabelle werden nicht angezeigt. Ich habe dies in die dritte Werkzeugleiste eingefügt, die auch entsprechend vorhanden ist. Allerdings ist sie leer?! Woran kann das liegen?

Vielen Dank und viele Grüße
Christoph

WP 2.9.2

$plugins = array( 'safari', 'inlinepopups', 'spellchecker', 'paste', 'wordpress', 'media', 'fullscreen', 'wpeditimage', 'wpgallery', 'tabfocus', 'table');

$mce_buttons_3 = apply_filters('mce_buttons_3', array('tablecontrols')); $mce_buttons_3 = implode($mce_buttons_3, ',');
27
Kommentar von klaus-peter
9. Juli 2010 um 17:07
Hallo,
bin seit einigen Monaten Verarbeiter von wordpress und lesen fast alles, was ich über spezielle Einstellungen erreichen kann. Leider komme ich an vielen Stellen nicht weiter. So ist z.B. die datei tiny_mcs_config.php in keiner meiner Installationen 2.9.x bis 3.0 enthalten.
Was kann ich machen, um den Editor zu erweitern?
28
Kommentar von Frank Bültge
9. Juli 2010 um 17:18
qklaus-peter: schaue mal in einen anderen Beitrag von mir: WordPress WYSIWYG-Editor TinyMCE erweitern #2
29
Kommentar von Webdesign Mannheim
23. Juli 2010 um 11:43
Gilt leider alles nicht mehr für die aktuelle Version... Finde keine Konfig-Datei....
30
Kommentar von Frank Bültge
23. Juli 2010 um 12:54
Bitte Teil 2 dazu lesen: WordPress WYSIWYG-Editor TinyMCE erweitern #2

Kommentar schreiben

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als < und > als > einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.

bueltge.de [by:ltge.de]

Ähnliche Beiträge

Journal

Projekte

Nutze die Feeds

Themen

hier werben Sponsoren