Sidebar
ein-/ausblenden

WordPress WYSIWYG-Editor TinyMCE erweitern #2

Plugin für WordPress SEO

Anzeige

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'

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

  1. 1
    Kommentar von Kinger

    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. 2
    Kommentar von Robert Harm

    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. 3
    Kommentar von Kinger

    @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. 4
    Kommentar von Markus

    cool :)
    jetzt kann ich mir wie Typo3 alles zusammenstellen wie ich es haben will
    find es besser ohne plugins

    cheers

  5. 5
    Kommentar von Bernhard Babbe

    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. 6
    Kommentar von BGD

    Danke für diese Tipps, der mit der Rechtschreibprüfung gefällt mit.

    Viele Grüße Bernhard

  7. 7
    Kommentar von Max

    Danke für die wertvollen Tipps, Gruß aus Nürnberg

  8. 8
    Kommentar von Webdesign aus Rosenheim

    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. 9
    Kommentar von Tobi

    Ja mehr kann ich auch nicht sagen danke für den tipp.. :)
    Hat mir gerade sehr geholfen..
    Ist sehr gut beschrieben..
    Tobi

  10. 10
    Kommentar von Herbert G.

    Man sieht das kompliziert aus. In den nächsten Ferien muss ich mich auch unbedingt mal mehr mit WordPress auseinandersetzen.

  11. 11
    Kommentar von Frank Bültge

    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. 12
    Kommentar von Notebook Alen

    Danke für die Tipps. Der Editor bietet so viel mehr Möglichkeiten. Nicht nur optisch wird er aufgewertet. Grüße Alen

  13. 13
    Kommentar von Maggy

    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. 14
    Kommentar von Frank Bültge

    @Maggy: dafür muss der Syntax der tables ergänzt werden, diesen findet man auf der Site des TinyMCE

  15. 15
    Kommentar von Maggy

    ja, danke.
    aber ich glaube ich nehm dann doch den tinyMCE advanced - ist wohl einfacher.

    ;)

  16. 16
    Kommentar von Daniel

    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. 17
    Kommentar von Frank Bültge

    @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. 18
    Kommentar von Daniel

    @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. 19
    Kommentar von Florian

    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. 20
    Kommentar von Nadine

    @Frank: Vielen Dank für Deine tollen Tipps! Mit Dir macht das Verwenden von WordPress richtig Spaß! ;o)

  21. 21
    Kommentar von Gabi

    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. 22
    Kommentar von Florian

    @Gabi: Das war auch meine Frage ;-)

  23. 23
    Kommentar von Tino

    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. 24
    Kommentar von Muckel

    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. 25
    Kommentar von Frank Bültge

    @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. 26
    Kommentar von Florian

    Hallo alle zusammen!
    Gibt es denn mittlerweile bei jemandem Erkenntnisse zum Thema Tabellen-Controls? Bei mir funktioniert es leider immer noch nicht...

  27. 27
    Kommentar von Frank Lakowski

    Hallo ersteinmal zusammen. Finde dieses Tutorial ganz gut. Vielen >Dank an den Verantwortlichen.
    Liebe Grüsse
    Frank

  28. 28
    Kommentar von David-Gee

    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. 29
    Kommentar von Alex

    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. 30
    Kommentar von Frank Bültge

    @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. 31
    Kommentar von Alex

    @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. 32
    Kommentar von Alex

    Falls es jemand interessiert, es ging mit folgender Anweisung:

    $initArray['theme_advanced_styles'] = "Name=css-klasse";

  33. 33
    Kommentar von Rene

    Viele Dank für die zahlreichen Infos. Genau danach habe ich gesucht.

  34. 34
    Kommentar von Marco

    Das ist wirklich interessant was du hier aufzeigst. Vielen Dank

  35. 35
    Kommentar von Markus

    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. 36
    Kommentar von mores

    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. 37
    Kommentar von Norbel

    @ 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

Kommentare sind geschlossen.