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).
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'
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ß
Kann zur Anpassung des WP-Editors das Plugin TinyMCE Advanced sehr empfehlen. Dieses bietet vielfältige Anpassungsmöglichkeiten ohne Templatedateien ändern zu müssen
@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.
cool
jetzt kann ich mir wie Typo3 alles zusammenstellen wie ich es haben will
find es besser ohne plugins
cheers
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
Danke für diese Tipps, der mit der Rechtschreibprüfung gefällt mit.
Viele Grüße Bernhard
Danke für die wertvollen Tipps, Gruß aus Nürnberg
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!
Ja mehr kann ich auch nicht sagen danke für den tipp..
Hat mir gerade sehr geholfen..
Ist sehr gut beschrieben..
Tobi
Man sieht das kompliziert aus. In den nächsten Ferien muss ich mich auch unbedingt mal mehr mit WordPress auseinandersetzen.
Eigenes Stylesheet für den TinyMCE:
Danke für die Tipps. Der Editor bietet so viel mehr Möglichkeiten. Nicht nur optisch wird er aufgewertet. Grüße Alen
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
@Maggy: dafür muss der Syntax der tables ergänzt werden, diesen findet man auf der Site des TinyMCE
ja, danke.
aber ich glaube ich nehm dann doch den tinyMCE advanced - ist wohl einfacher.
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
@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.
@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
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...
@Frank: Vielen Dank für Deine tollen Tipps! Mit Dir macht das Verwenden von WordPress richtig Spaß! ;o)
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
@Gabi: Das war auch meine Frage
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
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
@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.
Hallo alle zusammen!
Gibt es denn mittlerweile bei jemandem Erkenntnisse zum Thema Tabellen-Controls? Bei mir funktioniert es leider immer noch nicht...
Hallo ersteinmal zusammen. Finde dieses Tutorial ganz gut. Vielen >Dank an den Verantwortlichen.
Liebe Grüsse
Frank
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
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.
@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.
@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
Falls es jemand interessiert, es ging mit folgender Anweisung:
$initArray['theme_advanced_styles'] = "Name=css-klasse";
Viele Dank für die zahlreichen Infos. Genau danach habe ich gesucht.
Das ist wirklich interessant was du hier aufzeigst. Vielen Dank
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
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.
@ 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