MetaModels Workshop in Berlin
Ergebnis 1 bis 3 von 3

Thema: Custom Button in TinyMCE

  1. #1
    Contao-Nutzer Avatar von marq
    Registriert seit
    20.03.2010.
    Ort
    Göttingen
    Beiträge
    190
    User beschenken
    Wunschliste

    Standard 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"
    Geändert von marq (17.05.2016 um 17:28 Uhr)

  2. #2
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.613
    User beschenken
    Wunschliste

    Standard

    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.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  3. #3
    Contao-Nutzer
    Registriert seit
    10.02.2012.
    Ort
    Basel
    Beiträge
    206
    Partner-ID
    8602

    Standard

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

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •