tinyMCE - begrenzte Anzahl an Zeichen

17.04.2025 18:43 von Bernhard Renner

Kann man im Backend im tinyMCE Editor die Zeichen zählen und nur eine bestimmte Anzahl zulassen? Diese Frage stellte sich beim letzten Contao Austria Stammtisch.

Am 16.04.2025 hielten wir online den 60. Contao Austria Stammtisch ab. Hier tauchte die Frage auf, ob man denn - zum Beispiel für Teaser - die Anzahl der einzugebenden Zeichnen begrenzen könne.
Ein Lösung wäre, via php oder CSS den Inhalt im Frontend einfach „abzuschneiden“. Das dürfte jedoch keine saubere Lösung, für genau diesen Anwenderkreis sein, für den die Frage in den Raum gestellt wurde.

Rasch wurde online recherchiert, und man stiess auf den Link
How to limit characters and set a maxlength with TinyMCE .
Der Versuch, das gleich mal zu testen scheiterte. In Ruhe nochmals drüber geschaut, fand sich jedoch folgende Lösung.

Erstellte dir - sofern noch keine vorhanden ist - im Verzeichnis /templates/ eine Datei be_tinyMCE.html5 an. In dieser Datei fügst du folgenden Inhalt ein:

// templates/be_tinyMCE.html5
<?php $this->extend('be_tinyMCE'); ?>

  <?php $this->block('plugins'); ?>
    plugins: 'wordcount',
  <?php $this->endblock(); ?>


  <?php $this->block('custom'); ?>

    setup: function(editor) {
        var max = 170;
        editor.on('submit', function(event) {
            var numChars = tinymce.activeEditor.plugins.wordcount.body.getCharacterCount();
            if (numChars > max) {
              alert("Es sind maximal " + max + " Zeichen erlaubt.");
              event.preventDefault();
              return false;
            }
        });
    },

<?php $this->endblock(); ?>

Im Block <?php $this->block('plugins'); ?> ist das Plugin wordcount das notwendige Plugin.
Sollte bereits eine Datei und dieser Block darin vorhanden sein, dann kannst du wordcount einfach hinzufügen.

In den Block <?php $this->block('custom'); ?> fügst du den Teil von setup: function(editor) ein. Auch hier gilt - wenn bereits eine Datei und dieser Block vorhanden ist, dann füge das einfach hinzu.

var max = 170; ... hier gibst du die maximale Zeichenanzahl an.
alert("Es sind maximal " + max + " Zeichen erlaubt."); ... hier erstellst du den Text für die Meldung.

Hinweis

Auch ein Leerzeichen wird als Zeichen gewertet.
123 abc ... das sind 7 Zeichen

Im Editor findest du nun rechts unten einen Zusatz: die Anzahl der Wörter.

Klickst du mit der Maus einmal auf diese Information, ändert sich die Anzeige. Nun wird dir die Anzahl der Zeichen angezeigt.

Diese Anzeige kann den Redakteuren schon mal gute Hilfestellung dienen.
Wird die erlaubte Anzahl trotzdem überschritten, so erhält man beim Speichern einen Hinweis und das Speichern kann nicht durchgeführt werden.

Hinweis

Hiermit sind nun ALLE tinyMCE Editoren betroffen.

Jedoch mit einer weiteren Anpassung kann auch das verhindert werden.
In unserem Beispiel möchte ich dass die begrenzte Zeichenanzahl nur im Nachrichten-Teaser greift - also in der tl_news.

Wie auch in der Doku vermerkt, können verschiedene Editor-Konfigurationen angelegt werden. Dazu muss eine DCA Anpassung gemacht und ein individuelles tinyMCE-Template angelegt werden.

Lege zunächst eine tl_news.php im Verzeichnis /contao/dca/ an. Exsistiert diese Datei bereits, dann erweitere diese einfach. Der Inhalt der Datei:

<?php

// contao/dca/tl_news.php

$GLOBALS['TL_DCA']['tl_news']['fields']['teaser']['eval']['rte'] = 'tinyMCEnews';

Und das individuelle tinyMCE-Template benenne ich mit be_tinyMCEnews.html5. Der Inhalt des Templates bleibt ident wie oben beschrieben.
Die be_tinyMCEnews.html5 befindet sich ebenfalls im Ordner /templates/.

Damit kann nun die Anzahl der Teaser-Zeichen bereits im Backend limitiert werden.

tinyMCE - begrenzte Anzahl an Zeichen

Hinweis

Hinweis

Kommentare

Einen Kommentar schreiben