Anleitung eLeDia Tiny Styles für Admins

Installation & Konfiguration (für Admins)

tiny/elediastyles:use

Hinweise zur Style-Konfiguration (für Admins)

1.  Style-Definitionen (JSON)

Einstellung:

Website-Administration → Plugins → Texteditoren → EleDia Styles → Style-Definitionen (JSON)

Intern: tiny_elediastyles | styleslist

Beschreibung:

Hier legst Du fest, welche Stile im Editor zur Auswahl angeboten werden und welche CSS-Klassen sie anwenden. Die Eingabe erfolgt in einer JSON-Struktur (ein Array aus Stil-Objekten). 

Ein Beispiel für blockorientierte Styles sieht so aus und besteht aus einem Array mit Objekten mit folgenden Feldern:

• title: Der Name, der im Dropdown-Menü angezeigt wird (z.B. "Arbeitsauftrag oder Green Box").
• type: Legt fest, ob der Stil blockweise („block“) oder inline („inline“) angewendet wird
• classes: Die CSS-Klassen, die dem Text/Absatz hin-zugefügt werden (z.B. "as-task"). Mehrere Klassen werden durch ein Leerzeichen getrennt.
• preview: (optional) Gibt an, ob eine Vorschau angezeigt werden soll

 Beispiel (JSON):

[
{
        "title": "Arbeitsauftrag",
        "type": "block",
        "classes": "as-task",
        "preview": true
    },
   {
        "title": "Bearbeitungszeit",
        "type": "inline",
        "classes": "as-workload",
        "preview": true
    },
] 

2.   CSS-Definitionen

Einstellung:

Website-Administration → Plugins → Texteditoren → EleDia Styles → CSS-Definitionen

Intern: tiny_elediastyles | csslist

Beschreibung:

In diesem Feld hinterlegen Sie die eigentlichen CSS-Regeln, die das Aussehen der oben definierten Klassen bestimmen. Das Plugin verfügt über einen integrierten SCSS-Compiler. Sie können hier also modernen SCSS-Code verwenden, inklusive Variablen ($meine-farbe: #ff0000;) und Verschachte-lungen, um Ihre Styles effizient zu verwalten.

Beispiel(SCSS): 

.as-task {
  background-color: #FFFFFF !important;
  color: #1f3d7a !important;
  box-shadow: 5px 5px 0px #CEDAF3;
  border: 1px solid #CEDAF3;
  margin: 1.5rem 0rem 2rem 0rem;

  &::before {
    font-family: "Font Awesome 6 Free";
    font-size: 1.875rem;
    font-weight: 900;
    color: #244890;
    content: '\e4bb';
    position: absolute;
    left: 20px;
    top: 14px;
  }
}
.as-workload {
    text-align: right;
    background-color: #074c89 !important;
    padding: 1px 10px 4px 10px;
    border-radius: 1rem;
    color: #fff !important;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2rem;
    margin-bottom: 10px;

    &::before {
        font-family: "Font Awesome 6 Free";
        content: '\f017';
        padding-right: 10px;
    }
}

Definiere hier alle Klassen, die in Deinen Style-Definitionen verwendet werden.

Besonderheit - Styling der Vorschau im Dropdown-Menü

Du wirst eventuell bemerken, dass Deine Styles im Editorinhalt korrekt angezeigt werden, aber in der Vorschau-Liste im Dropdown-Menü nicht (zum Beispiel fehlt die Hintergrundfarbe). Das liegt daran, dass TinyMCE eigene, starke Styles für seine Menüelemente hat, die Deine benutzerdefinierten Regeln überschreiben können.

Hierfür gibt es zwei Lösungsansätze:

Lösung A: Die pragmatische Methode mit !important

Dies ist der einfachste und oft zuverlässigste Weg, um sicherzustellen, dass Deine Vorschau-Styles im Dropdown sichtbar sind. Füge !important zu den CSS-Eigenschaften hinzu, die für die Vorschau entscheidend sind (üblicherweise background-color und color).

Beispiel (SCSS):

.as-task {
background-color: #E91E63 !important; /*!important erzwingt die Anwendung*/ 
color: #fff !important;
} 

Lösung B: Die fortgeschrittene Methode mit spezifischeren Selektoren

Diese Methode vermeidet !important, erfordert aber eine genauere Kenntnis der CSS-Struktur von TinyMCE. Die Idee ist, CSS-Regeln zu schreiben, die "stärker" sind als die von TinyMCE, indem sie spezifischer sind.

Prinzip: Du kombinierst die TinyMCE-Klassen für Menü-Elemente (z.B. .tox-collection  item) mit Deinen eigenen Klassen

Beispiel (SCSS):

// Basis-Style für den Inhalt im Editor
.as-task {
  background-color: #FFFFFF;
  color: #1f3d7a;
}
// Spezieller Override NUR für die Dropdown-Vorschau
// Dies zielt nur auf Elemente mit der Klasse .as-task, die auch ein TinyMCE-Menü-Item sind.
.tox-collection item.as-task {
  background-color: #FFFFFF;
  color: #1f3d7a;
   // Zusätzlich den Zustand überschreiben, wenn das Element ausgewählt ist 
   &.tox-collection, &:hover {
     background-color: #E91E63; // Erzwingt die Pink-Farbe auch im Hover Aktiv Zustand
   }
}

Hinweis: Dieser Ansatz erfordert eventuell eine Analyse mit den Entwicklertools des Browsers, um die genauen TinyMCE-Klassen zu finden, und kann bei Updates von TinyMCE Anpassungen erfordern.

Empfehlung: Für die meisten Anwendungsfälle empfehlen wir, mit Lösung A (!important) für die Dropdown-Vorschau zu beginnen, da sie schnell zum gewünschten visuellen Ergebnis führt.