Jump to content

Hinzufügen von benutzerdefinierten Editor-Schaltflächen

Wenn es kein passendes CKEditor-Plugin gibt, das Du brauchst, dann gibt es ist eine Alternative, eine benutzerdefinierte Schaltfläche zu erstellen.

Was können benutzerdefinierte Schaltflächen tun?

Mit benutzerdefinierten Schaltflächen kannst Du HTML-Blöcke erstellen, die durch Anklicken einer Schaltfläche in der Symbolleiste des Editors in den Text eingefügt werden. Die von Dir erstellten Blöcke können so Inhalte einheitlich formatieren, die von den Benutzern eingegeben werden können.

Benutzerdefinierte Schaltflächen haben nicht die Fähigkeiten eines vollständigen CKEditor-Plugins - sie können beispielsweise nicht dynamisch sein oder Javascript verwenden. Aber für die Formatierung von Text, den der Benutzer eingibt, kann eine benutzerdefinierte Schaltfläche die beste Wahl sein.

Tipp
Hinweis: Obwohl benutzerdefinierte Schaltflächen in der Regel einfach sind, werden HTML-Kenntnisse dafür benötigt oder du versuchst Hilfe im Forum zu holen.

Erstellen einer benutzerdefinierten Schaltfläche

Um eine benutzerdefinierte Schaltfläche zu erstellen, navigierst Du zu Anpassung -> Editor -> Symbolleisten. Klicke auf Schaltfläche hinzufügen in der Kopfzeile und dann auf die Registerkarte Benutzerdefiniert. Das angezeigte Formular hat folgenden Felder:

  • Bezeichnung
    Der Bezeichnung, die die Benutzer sehen, wenn sie mit der Maus über die Schaltfläche im Editor fahren.
  • Symbol
    Eine kleine Bilddatei, die als Schaltflächensymbol im Editor angezeigt wird. Lade hier eine Datei hoch, das doppelt so groß ist, wie Du es gerne hättest; es wird dann vom Browser verkleinert und in hoher Auflösung angezeigt.
  • Art
    Es werden drei Arten unterstützt, die den drei Arten der Elementanzeige in HTML grob entsprechen:
    • Inline - wird verwendet, wenn das eingefügte HTML irgendwo in einer Textzeile vorhanden ist. Es wird keine neue Zeile für den Inhalt erstellt.
    • Single Line Block - für einzelne Zeilen (z.B. Überschriften), für den Block wird eine neue Zeile erstellt.
    • Block - wird für mehrere Zeilen verwendet und setzt den Block ebenfalls auf eine neue Zeile.
  • Wert verwenden?
    Eine benutzerdefinierte Schaltfläche kann optional einen Wert vom Benutzer akzeptieren (abgesehen von dem, was er wie üblich innerhalb des Blocks selbst eingeben kann). Diese Option erscheint als Popup-Dialog, wenn der Benutzer auf die Schaltfläche im Editor klickt, und der vom Benutzer eingegebene Wert wird beim Anzeigen in den Block übernommen. Wenn dieses Feld aktiviert ist, siehst Du eine zusätzliche Einstellung:
    • Bezeichnung des Wertes
      Der Text, der dem Benutzer angezeigt wird, der auf die Schaltfläche geklickt hat.
  • HTML
    Das eigentliche HTML, das die Schaltfläche bei der Verwendung im Editor darstellt. Im Allgemeinen wird jedes HTML unterstützt, aber es muss gültig sein. Innerhalb dieses HTML können ein paar spezielle Tags verwendet werden:
    • {option}
      Wenn ein Wert verwendet wird, wird dieser Tag durch den vom Benutzer eingegebenen Wert ersetzt, so wie er ist.
    • {content}
      Wenn die Schaltfläche es dem Benutzer erlaubt, innerhalb des generierten HTML zu tippen, fügst Du diesen Tag dort ein, wo der Benutzer tippen können soll.

Klicke auf Speichern, um die Schaltfläche zu erstellen. Das Symbol für die Schaltfläche wird in der Symbolleiste "Schaltflächen nicht im Editor" angezeigt, und von hier aus kannst Du es in Deine Symbolleiste ziehen und wie gewohnt konfigurieren.

Verwendung benutzerdefinierter Stile

Nutzer keine Inline-Stile in Deinem HTML, da es ast unmöglich sein wird, diese später schnell zu aktualisieren (die Beiträge werden mit den Formatierungen gespeichert, wenn Du also eine benutzerdefinierte Schaltfläche später änderst, werden alte Beiträge diese Änderungen nicht wiedergeben).

Verwende stattdessen die Klassennamen und das Hinzufügen von Stilen für diese Klassennamen in custom.css. Auf diese Weise kannst Du die Stile später aktualisieren, und alte Beiträge werden ebenfalls die Änderungen widerspiegeln.

Ein Beispiel

Innerhalb dieser Dokumentation werden solche Tipp-Boxen verwendet:

Tipp

Dies ist ein Tipp

Diese Formatierung wird mit einem Klick auf die benutzerdefinierte Editor-Schaltfläche im Editor erstellt. Hier ist die Konfiguration, die zur Erstellung dieser Schaltfläche benötigt wird:

  • Bezeichung
    Tipp
  • Symbol
    html-tipp.png.3d5eea6d5c46661aac0227388889ef9c.png
  • Typ
    Block
  • Wert verwenden
    Nein
  • HTML
    <div class='docsBox docsBox_tip'>
      <div class='docsBox_header'>Tipp</div>
      <div class='docsBox_body'>
        <div class='ipsType_richText ipsType_break ipsContained'>
            {Inhalt}
        </div>
      </div>
    </div>

     

Die Stile für die Box fügen wir dann in unserer CSS-Datei custom.css hinzu:

.docsBox_header {
  padding: 5px 10px;
  color: #fff;
  font-weight: 500;
  font-size: 15px;
}

.docsBox_body {
  padding: 10px;
  font-size: 13px;
  line-height: 1.4;
}

.docsBox_tip .docsBox_header {
  background: #2E7D32;
}

.docsBox_tip .docsBox_body {
  background: #E8F5E9;
}

	.docsBox_tip .docsBox_body .ipsType_richText {
	  color: #1B5E20;
    }

 


  Report Seite

×
×
  • Create New...

Important Information

Um unsere Webseite für Sie optimal zu gestalten und fortlaufend verbessern zu können, verwenden wir Cookies. Durch die weitere Nutzung der Webseite stimmen Sie der Verwendung von Cookies zu. Weitere Informationen zu Cookies erhalten Sie in unserer Privacy Policy.