Ich möchte heute mal in einer kleine Anleitung dazu beitragen, wie man eine eigene Schaltfläche (Custom Button) in TinyMCE einbaut.
Wie man generell halt TinyMCE anpasst ist im Wiki sehr gut beschrieben (Link zum Wiki)
Dieser Button ist, wie ich heute gelernt habe, bei verhaltenskreativen Anwendern durchaus nötig.
Zum besseren Verständnis, wieso und warum... jemand wollte eine Zwischenüberschrift einfügen und das Ergebnis im Output sah dannach dann wie folgt aus:
HTML-Code:
<h3><span class="subheading"><em><strong>Dankesworte und auch etliche Tränen</strong></em></span></h3>
<p>Mit einer Grillparty sind...</p>
Statt dem Anwender wieder Stunden lang einzuprügeln was dieser falsch gemacht hat, hat dieser jetzt 1. kaum noch Möglichkeiten per TinyMCE irgendwas zu machen und 2. einen Button "Zwischenüberschrift".
Dann fangen wir mal an, zuerst suchen wir uns diese Zeile:
Code:
templates: [
<?php echo Backend::getTinyTemplates(); ?>
],
Dann fügen wir folgenden Code dahinter ein:
Code:
setup: function (editor) {
editor.addButton('h3', {
text: 'Zwischenüberschrift',
icon: false,
onclick: function () {
editor.focus();
var text = editor.selection.getContent({'format': 'html'});
if(text && text.length > 0) {
editor.execCommand('mceInsertContent', false, '<h3>'+text+'</h3>');
}
}
});
},
Suchen uns im Anschluss die Zeile mit der Toolbar. Diese sieht im Normalfall so aus:
Code:
toolbar: "link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code"
und schreiben dort mit "h3" unsern neuen Button rein.
Code:
toolbar: "h3 | link unlink | image | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | undo redo | code"
und falls Ihr auch so spezielle Anwender habt, ich kann seit heute folgende Konfiguration empfehlen :-)
Code:
toolbar: "link unlink | h3 | undo redo"
Lesezeichen