Da der Mensch an sich doch sehr bequem ist oder manche auch etwas faul sind, macht man´s sich so einfach wie möglich. Das geht natürlich auch beim tiny MCE. Hier mal ein Beispiel für eine Tabelle, die eigentlich keine ist, in Form eines <div> Containers mit <p> Elementen. Das wäre zum Beispiel eine Eingabemaske, um immer die gleiche Form in einem Beitrag zu wahren.


Als Erstes wird eine eigene Vorlage benötigt. Also wird eine neue Datei mit dem Namen nottable.html, erstellt. In diese Datei kommt der folgende Code:

<div class="headsplit"><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div> <div class="split"><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p></div> 

Dann wird diese Datei per FTP verschoben nach:

Joomlaroot/media/editors/tinymce/templates/nottable.html

Da unsere Vorlage auch immer gleich aussehen soll, benötigen wir nun noch ein wenig CSS. Diese muss 2 mal vergeben werden. Ein Mal für das Editorfenster und ein Mal für das letztendliche Erscheinungsbild auf der HP. Dazu wird nun folgende Datei geöffnet:

Joomlaroot/media/editors/tinymce/skins/lightgray/content.min.css

und

Joomlaroot/templates/DeinTemplate/CSS/custom.css(Der Name und Ort kann variieren von Template zu Template)


Dort kommt ganz unten folgendes hinein, was natürlich von jedem individuell angepasst werden kann:

.headsplit p {
border: 0.1em solid #515151;/*Ein 0.1em breiter solider Rahmen mit Farbe #515151*/
width:25%;/*Eine Breite von 25% x3 Spalten ergibt 75% oder halt breiter*/
float:left;/*links umfliessend damit die p nebeneinander sind*/
text-align:center;/*Schrift mittig*/
margin:0;/*umlaufender Aussenabstand 0*/
padding:0.3em;/*umlaufender Innenabstand, damit der border nicht an der Schrift angeklebt ist*/
background-color: #cccccc;/*Ein leichtes grau für den Hintergrund*/
}
.split p {
border: 0.1em solid #515151;/*Ein 0.1em breiter solider Rahmen mit Farbe #515151*/
width:25%;/*Eine Breite von 25% x3 Spalten ergibt 75% oder halt breiter*/
float:left;/*links umfliessend damit die p nebeneinander sind*/
text-align:center;/*Schrift mittig*/
margin:0;/*umlaufender Aussenabstand 0*/
padding:0.3em;/*umlaufender Innenabstand, damit der border nicht an der Schrift angeklebt ist*/
}

In Zeiten von bootstrap empfehle ich jedoch eher die bootstrap ID und class zu verwenden, das spart zusätzliches css. Um die Vorlage zu testen, öffnen Sie bitte den tinymce und Sie finden relativ weit Rechts unten den Button für die Vorlagen.

 

Vorlagen im tiny MCE einstellen und nutzen

Darin findet sich die eben angelegte Vorlage mit dem Namen Not Table. Einfach auswählen und einfügen. Dasselbe funktioniert natürlich auch im Frontend. Das Aussehen(Bild) kann abweichen. Je nach gewähltem Skin für den tiny. Die Redakteure können nun ihre Werte einsetzen und es gibt immer dieselbe Formatierung per CSS.

 

Tiny MCE Vorlagen zum Ausfuellen

 

Bei Interesse fertige ich gerne weitere Vorlagen für den tiny MCE an.