Zur Startseite
Bild von Jan auf Pixabay

Tag 22 - Leichtere Inhaltspflege mit Vorlagen im TinyMCE

Wenn Inhalte eine gewisse Formatierung haben sollen, kann die Erstellung von Vorlagen für den TinyMCE die Arbeit erleichtern.

Ein Beispiel: Auf der Website sollen Produkte dargestellt werden: Text, eine Tabelle mit weiteren Infos, ein Bild und mehr Text. Die Tabelle soll rechts vom Text erscheinen, und zwar in einer Bootstrap-Card. Das Bild soll neben dem anderen Text angezeigt werden. Und alles soll natürlich responsive sein.

Ein Beispielartikel mit einer hübschen Produktbeschreibung rechts und einem Text, der diese Beschreibung umfließt
Beispiel für eine Produktbeschreibung mit umfließendem Text.


Um nicht jedes Mal den HTML-Code manuell einfügen zu müssen, werden wir uns Vorlagen für den TinyMCE bauen. Als erstes gehen wir zu System -> Plugins und suchen den Editor. In den Einstellungen wählen wir den Ordner, wo die Vorlagen abgelegt werden:

Eine Übersicht über die Einstellung im TinyMCE
Einstellungen im TinyMCE


Jetzt gehen wir zu System -> Templates -> Site Templates, öffnen das aktive Template (in meinem Fall ist es Cassiopeia) und klicken auf „Neue Datei“:

Ein Bild der Templateeinstellung für die neue Datei
Hier wird die neue Datei erstellt.


Im Modalfenster stellen wir sicher, dass du den Ordner für die Vorlagen ausgewählt hast. Wir geben der Datei den Namen „bild-links“ und wählen „.txt“ als Dateityp:

Die besondere Einstellung im TinyMCE für das Bild links.
Hier wird "Bild links" eingestellt.


Die Datei wird erstellt und wir können HTML-Code schreiben:

<div class="container">
  <div class="row">
    <div class="col-md-4">Hier Bild einfügen</div>
    <div class="col-md-8"><p>Hier Text einfügen</p></div>
  </div>
</div>

Für den Introtext und Tabelle erstellen wir eine andere Vorlage namens „card“:

<div class="card col-lg-4 ms-lg-3 float-lg-end">
  <div class="card-header">
    <h3>Infos zum Produkt</h3>
  </div>
  <div class="card-body">
    <table class="table">
     <tbody>
       <tr>
         <th scope="row">Gewicht</th>
         <td>100g</td>
        </tr>
       <tr>
         <th scope="row">Farbe</th>
         <td>blau</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<p>Introtext</p>

 

Nun legen wir einen Beitrag an und im Editor klicken wir auf dem Vorlagen-Button:

In der Übersicht des TinyMCE ist der Knopf mit einem Stempel als Symbol rot eingerahmt. Dieser ist für die Vorlagen zuständig.
Hinter dem Stempelsymbol verstecken sich die Vorlagen.

Als erstes wählen wir die „card“-Vorlage:

Im Dropdownfeld der Vorlagen des TinyMCE sind nun zwei Auswahlmöglichkeiten abgebildet. Eine davon ist bild-links und die andere lautet card. Card wird vom Mauszeiger ausgewählt.
Wähle Card aus den Vorlagen für dieses Beispiel.

Die Vorlage wird in den Beitrag geladen:

Die Vorlage wurde in den TinyMCE geladen und dort im Editorfeld abgebildet.
Die Vorlage landet im Editorfenster des TinyMCE.

Wir können hier die Inhalte der Tabelle ändern und den Introtext ersetzen.
Darunter laden wir die Vorlage für Bild und Text:

Im Dropdownfeld der Vorlagen des TinyMCE sind nun zwei Auswahlmöglichkeiten abgebildet. Eine davon ist bild-links und die andere lautet card. Bild-Links wird vom Mauszeiger ausgewählt.
Jetzt wählen wir Bild-Links für das Beispiel aus.

Wir markieren den Text „Hier Bild einfügen“ und ersetzen ihn mit einem Bild (CMS Inhalt -> Medien). Auch den Text können wir markieren und ersetzen.
Wenn wir den Editor ausschalten, sehen wir, dass der Code der Vorlage automatisch eingefügt wurde. So können wir viele Beiträge mit der gleichen Formatierung anlegen, ohne jedes Mal den Code neu schreiben zu müssen.

Bild von Jan auf Pixabay

Mastodon