Custom Button in TinyMCE

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"

---

Probier auch mal meine letzte tinyCustom3.5.12.php http://public.andreasburg.de/tinyCustom.zip

Die ist um einiges komfortabler, als die default. Viele Optimierungen sind nicht auf den ersten Blick zu erkennen, erst wenn man damit arbeitet. So werden die Klassen z.B. direkt auf die Elemente gelegt, anstatt mit einem SPAN gewrappt. Wenn du die ausprobieren willst, nicht vergessen die tinymce.css aus files/ updatesicher nach files/css/ zu legen. Der Pfad ist in der Datei angegeben. Wenn du aus meiner den Kram rausschmeißt den du nicht benötigst, hast du fast das was du auch erreichen möchtest.

Besten Dank! Genau das habe ich heute gesucht, konnte deinen Beitrag gut gebrauchen.