Sidebar
ein-/ausblenden

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.

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'

Artikel #1100, 11. Februar 2010 · Tipps, WordPress · 37 Kommentare
Tags: Anleitung, Editor, HowTo, TinyMCE, WordPress, WP
Kommentar-Feed zum Artikel · Kommentare und Pings sind nicht erlaubt. · Kurzlink

37 Kommentare zu „WordPress WYSIWYG-Editor TinyMCE erweitern #2“

1
Kommentar von Kinger
11. Februar 2010 um 08:27
Moin,

Das erste Skript benutze ich so ähnlich. Aber für eine bessere Übersicht und Erweiterbarkeit habe ich die HTML-Tags, die ich dem TinyMCE beibringen möchte, in einem Array geparkt. Das ganze sieht denn so aus:

function change_mce_options( $init ) { $exts = array ( 'iframe' => 'iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]', 'pre' => 'pre[id|name|class|style]' ); foreach( $exts as $ext ) { if ( isset( $init['extended_valid_elements'] ) ) { $init['extended_valid_elements'] .= ',' . $ext; } else { $init['extended_valid_elements'] = $ext; } } return $init; }

add_filter( 'tiny_mce_before_init' , 'change_mce_options' );

Was ich leider noch noch nicht geschafft habe ist das nachträgliche laden eines TinyMCE-Plugins inklusive Button. Dabei will ich selbst bestimmen wo sich das Plugin befindet und wann es eingebunden wird. (z.B. in der "function.php" eines Templates)
Kannst du mir da vielleicht einen Tipp geben wo mich darüber schlau machen kann?

Gruß
2
Kommentar von Robert Harm
11. Februar 2010 um 09:06
Kann zur Anpassung des WP-Editors das Plugin TinyMCE Advanced sehr empfehlen. Dieses bietet vielfältige Anpassungsmöglichkeiten ohne Templatedateien ändern zu müssen
3
Kommentar von Kinger
11. Februar 2010 um 09:26
@Robert
Das Plugin "TinyMCE Advanced" habe ich bereits in Benutzung.
Das bittet schon gute Möglichkeiten den Editor zu erweitern. Aber ich möchte noch ein paar spezielle Funktionen in den Editor einbinden.
Im konkreten Fall Template abhängig.
4
Kommentar von Markus
11. Februar 2010 um 10:39
cool
jetzt kann ich mir wie Typo3 alles zusammenstellen wie ich es haben will
find es besser ohne plugins

cheers
5
Kommentar von Bernhard Babbe
11. Februar 2010 um 11:16
Danke für die Empfehlung Herr Harm! So ein Plugin hab ich schon immer gesucht. Vielen Dank noch mal, tolle Webseite hier!

Liebe Grüße

Bernhard
6
Kommentar von BGD
11. Februar 2010 um 16:10
Danke für diese Tipps, der mit der Rechtschreibprüfung gefällt mit.

Viele Grüße Bernhard
7
Kommentar von Max
14. Februar 2010 um 11:32
Danke für die wertvollen Tipps, Gruß aus Nürnberg
8
Kommentar von Webdesign aus Rosenheim
16. Februar 2010 um 08:04
Danke für den Beitrag! Ist sehr Hilfreich, wobei ich auch wie von Robert Harm erwähnt lieber das TinyMCE Advanced Plugin einsetze.
Aber gut zu wissen, was sonst noch so geht!
Ach und ist eine sehr gute Seite! Weiter so!

Grüße aus Rosenheim!
9
Kommentar von Tobi
17. Februar 2010 um 13:44
Ja mehr kann ich auch nicht sagen danke für den tipp..
Hat mir gerade sehr geholfen..
Ist sehr gut beschrieben..
Tobi
10
Kommentar von Herbert G.
19. Februar 2010 um 21:28
Man sieht das kompliziert aus. In den nächsten Ferien muss ich mich auch unbedingt mal mehr mit WordPress auseinandersetzen.

Kommentar von Frank Bültge
26. Februar 2010 um 11:45

Eigenes Stylesheet für den TinyMCE:


function ses_tinymce_css($wp) {
        $wp .= ',' . get_bloginfo('stylesheet_url');
        return $wp;
}
add_filter( 'mce_css', 'ses_tinymce_css' );

12
Kommentar von Notebook Alen
24. April 2010 um 09:57
Danke für die Tipps. Der Editor bietet so viel mehr Möglichkeiten. Nicht nur optisch wird er aufgewertet. Grüße Alen
13
Kommentar von Maggy
7. Mai 2010 um 13:07
Hi!
Danke für den tollen Artikel und die Kommentare!
Wie kann ich mit dieser Methode den Button für die Tables im TinyMCE einfügen?

Für Hilfe wäre ich echt dankbar.

Gruß
Maggy
14
Kommentar von Frank Bültge
10. Mai 2010 um 10:27
@Maggy: dafür muss der Syntax der tables ergänzt werden, diesen findet man auf der Site des TinyMCE
15
Kommentar von Maggy
10. Mai 2010 um 14:38
ja, danke.
aber ich glaube ich nehm dann doch den tinyMCE advanced - ist wohl einfacher.
16
Kommentar von Daniel
14. Juli 2010 um 16:38
Hi,

ich habe das ganze eben bei mir (WP 3.0) versucht. Und zwar mit dem Hinzufügen des DropDowns. Habe den Code in der function.php eingesetzt.

Das ganze geht leider nicht. Es ändert sich rein gar nichts. Unter WP3 sieht der Editor auch komplett anders aus als oben in den Screenshots (z.B. kein Einrücken, kein Unterstreichen ...)

Was ich auch sehr seltsam finde ist: Ich habe im TyniMCE Verzeichnis auf dem Server z.B. gar nicht die Datei tiny_mce_config.php

Wo finde ich das ganze denn unter WP 3.0? Hat da schon jemand Erfahrung und kann mir auf die Sprünge helfen?!

Danke schon mal.

VG
Daniel
17
Kommentar von Frank Bültge
15. Juli 2010 um 08:27
@Daniel: auch in 3.0 ist das genauso - es gibt auch keine Unterschiede in der Optik, hier muss ein Fehler vorliegen. Der Code muss in ein Plugin oder in die functions.php des Themes, eventuell hier ein Fehler? Die config ist uninteressant, daher hier der Beitrag #2 via Hook. Man muss via Hook anpassen und einige Beispiele enthält dieser Beitrag und die anderen Möglichkeiten stehen unten. Ich habe noch einen Teil 3 offen, komme aktuell aber nicht dazu.
18
Kommentar von Daniel
16. Juli 2010 um 00:26
@Frank: Danke für deine Antwort. Es war meine eigene Blödheit, anders kann ich es leider nicht sagen. Ich hätte vorher doch mal den Button "Werkzeugleiste anzeigen/verstecken" ausprobieren sollen. Bin davon ausgegangen das ich dadurch die komplette Leiste ausschalten kann...

Und siehe da... alles vorhanden.

Dein Seiten hier gefallen mir übrigens sehr. Als Anfänger wie mich kann man viel mitnehmen. Danke!

VG
Daniel
19
Kommentar von Florian
8. August 2010 um 19:07
Hallo!
Ich hatte gerade versucht die Table-Controls einzufügen. In deinem alten Post hattest du das ja bereits erklärt... mit der neuen Methode müsste es ja theoretisch genau so einfach sein... hier mein Code:
function change_mce_buttons( $initArray ) { $initArray['theme_advanced_blockformats'] = 'p,h3,h4,h5,h6'; $initArray['theme_advanced_buttons2'] = 'formatselect,pastetext,removeformat,|,media,charmap,|,outdent,indent,|,tablecontrols,|,undo,redo,wp_help'; $initArray['plugins'] = 'table,safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus,NextGEN';

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

Funktioniert alles genau so, wie es soll, nur dass eben die tablecontrols nicht angezeigt werden sondern stattdessen nur ein goßer Zwischenraum. Woran liegt das? bei WordPress 3 ist das plugin table ja sogar schon mit dabei, also müsste es doch eigentlich funktionieren...
20
Kommentar von Nadine
13. August 2010 um 08:26
@Frank: Vielen Dank für Deine tollen Tipps! Mit Dir macht das Verwenden von WordPress richtig Spaß! ;o)
21
Kommentar von Gabi
13. August 2010 um 18:09
Danke für eure Tipps. Meine Frage ist auch schon beantwortet. Wollte fragen wie ich mit dieser Methode den Button für die Tables im TinyMCE einfügen kann?
Danke nochmal.
LG
Gabi
22
Kommentar von Florian
15. August 2010 um 01:34
@Gabi: Das war auch meine Frage
23
Kommentar von Tino
16. August 2010 um 19:08
Ich nutze WP nur sporadisch. Für meinen Blog habe ich nun aber den Editor nach dieser Anleitung erweitert und bin erstaunt was alles möglich ist. Danke für dieses tolle Tutorial. Mir hats sehr geholfen. Beste Grüße
24
Kommentar von Muckel
21. August 2010 um 15:24
Hallo zusammen,

erstmal vielen Dank für diesen nützlichen Artikel. Habe nun das Beispiel "Anpassen der Funktion, der Buttons im Editor" genutzt. Wenn ich Text nun markiere und Monospace benutzte, wird auch das pre-Tag verwendet. Nutze ich aber Code, passiert leider nichts.

Da ich das PlugIn WP-Syntax verwende, hätte ich es gerne, dass bei der Auswahl von Code im Quellcode folgendes erscheint:Der markierte Inhalte (Natürlich ohne *) Damit ich dann nur noch die Sprache angeben muss.

Eine andere Möglichkeit wäre, dass ich/man eigene Beschreibung erstellt, so zum Beispiel html, php, css, usw. und das dann auch der obige Inhalt erscheint, allerdings mit der entsprechenden Sprache. Kann man den WYSIWYG-Editor dazu bewegen?

Würde mich über Hilfe sehr freuen!
Liebe Grüße
Muckel
25
Kommentar von Frank Bültge
24. August 2010 um 15:27
@Muckel: ja, man kann via Schnittstelle eigene Auswahlbuttons einfügen, quasi wie beim Format zu "Absatz" oder Überschrift. Dazu gibt es hier aber keine Anleitung, in der Doku zum TinyMCE wird man dazu fündig; da dies kein KnowHow von WP ist.
26
Kommentar von Florian
24. August 2010 um 17:23
Hallo alle zusammen!
Gibt es denn mittlerweile bei jemandem Erkenntnisse zum Thema Tabellen-Controls? Bei mir funktioniert es leider immer noch nicht...
27
Kommentar von Frank Lakowski
25. August 2010 um 18:00
Hallo ersteinmal zusammen. Finde dieses Tutorial ganz gut. Vielen >Dank an den Verantwortlichen.
Liebe Grüsse
Frank
28
Kommentar von David-Gee
29. Oktober 2010 um 19:17
Hallo@all,

wie lassen sich die Bezeichnungen der Formate ändern ?

Hier auf der Seite im Beispiel wurde z.B das neue Format: "Code" und "Codebeispiel" hinzugefügt.

Wo kann man diese Texte bzw. Bezeichnungen ändern ?

Vielen Dank für eure Mühe und Hilfe im voraus

Viele Grüße

David-Gee
29
Kommentar von Alex
8. November 2010 um 13:32
Hallo,

ist es irgendwie möglich, im Dropdown der Stylesheets die Klassen wp-caption usw. zu deaktivieren? Ich habe meine eigenes Stylesheet hinzugefügt und dort wird die Klasse erst unter den vorhandenen Klassen angezeigt. Am besten wäre deshalb, wenn man diese Klassen ausblenden könnte.
30
Kommentar von Frank Bültge
8. November 2010 um 19:30
@Alex: ja, du kannst über die Hooks die bestehenden Inhalte filtern. Entweder du setzt die neuen Inhalte komplett neu oder filterst die bestehenden so, dass nur deine bleiben.
31
Kommentar von Alex
8. November 2010 um 19:39
@Frank, ich habe es bisher so hier:

function af_tinymce_css($wp) {
$wp .= ',' . get_bloginfo( 'template_directory' ).'/assets/css/tinymce.css';
return $wp;
}
add_filter( 'mce_css', 'af_tinymce_css' );

function af_change_mce_buttons( $initArray ) {
$initArray['theme_advanced_buttons2_add'] = 'styleselect';
return $initArray;
}
add_filter('tiny_mce_before_init', 'af_change_mce_buttons');

Wie binde ich nun die Hooks ein zum Filtern der bestehenden CSS-Klassen? Ich möchte dann nur die Klassen aus der tinymce.css haben
32
Kommentar von Alex
8. November 2010 um 22:22
Falls es jemand interessiert, es ging mit folgender Anweisung:

$initArray['theme_advanced_styles'] = "Name=css-klasse";
33
Kommentar von Rene
12. November 2010 um 00:11
Viele Dank für die zahlreichen Infos. Genau danach habe ich gesucht.
34
Kommentar von Marco
20. November 2010 um 15:37
Das ist wirklich interessant was du hier aufzeigst. Vielen Dank
35
Kommentar von Markus
24. Januar 2011 um 15:56
Hat jemand eine Idee wie man folgenden Code noch mit in die functions.php einbauen könnte? Damit werden die Blockelemente im tinymce erweitert und so müsste ich nicht immer den wp-core-code anfassen.

$style_formats = array(
array('title' => 'Example 1', 'inline' => 'span', 'classes' => 'example1'),
array('title' => 'Example 2', 'inline' => 'span', 'classes' => 'example2'),
);

Danke und viele Grüsse!
M
36
Kommentar von mores
6. März 2011 um 17:47
Ich möcht auch noch mal die Frage stellen, ob es denn nun jemand auf diese Art und Weise geschafft hat, die Tabellenbuttons in WP3.1 zu erhalten.
37
Kommentar von Norbel
8. Juni 2011 um 12:38
@ Markus
Einfach in eine neue Funktion so als String hinschreiben, wie es in der Doku steht
z.B.
$initArray['style_formats']= "[{title : 'Fliesstext', block :'p',classses :'kiju_fliess'}]";Dann die Funktion an den Filter mit add_filter('tiny_mce_before_init','...')
übergeben.
Aber Achtung: im tinyMCE advanced Theme funktioniert das so nicht richtig

Hab es mal auf meiner Webseite http://www.it-in-a-box.com beschrieben, die ist aber gerade wg. Routing Problemen nicht erreichbar

Gruß

Norbel