Mit der Rich-Text-Editor-Symbolleiste arbeiten

Der Rich-Text-Editor ist ein einfaches und benutzerfreundliches Tool, das auf dem Froala-Editor basiert. Er ermöglicht es Dir, Text- und HTML-Inhalte einfach zu erstellen, zu bearbeiten und zu formatieren, ohne fortgeschrittene technische Fähigkeiten zu benötigen. Dieser Editor ermöglicht es Dir, optisch ansprechenden Text zu erstellen und ist standardmäßig in Blog- und Wiki-Artikeln sowie in einem Widget verfügbar, das in anderen Elementen platziert werden kann.

Du kannst Text aus externen Quellen in den Rich-Text-Editor einfügen. Für die beste Erfahrung empfehlen wir, ohne Formatierung einzufügen. Das kannst Du tun, indem Du die Tastenkombination Strg + Alt + V auf Windows oder Cmd + Umschalt + V auf dem Mac verwendest.

Die Symbolleiste im Rich-Text-Editor bietet Formatierungs-, Styling-, Bearbeitungs- und erweiterte Optionen. Sie ist in diese Abschnitte unterteilt:

  1. Formatierung: Du kannst Deinen Text einfach fett, kursiv oder unterstrichen ändern. Darüber hinaus kannst Du unter anderem die Schriftgröße, die Textfarbe oder die Hintergrundfarbe ändern. Du kannst die Farbe mit verfügbaren Farben anpassen oder einen Hex-Code eingeben. Du kannst auch die Formatierung löschen, wenn etwas schief geht.
  2. Layout: Du kannst Deinen Text ausrichten, Listen mit verschiedenen Stiloptionen hinzufügen, Absatzformate und -stile definieren, Einzüge verringern oder erhöhen und Zitate hinzufügen.
  3. Inhalt: Du kannst Deinen Text mit Inhalten füllen, indem Du Bilder, Tabellen, Dateien und Videos hinzufügst und Nutzer mit Hyperlinks an andere Orte weiterleitest. Um ein Inhaltsverzeichnis zu erstellen, kannst Du Ankerlinks erstellen.
  4. Erweitert: Du kannst den Vollbildmodus aktivieren, den gesamten Text auswählen, wenn Du ihn kopieren oder entfernen musst, und in die Quellcodeansicht wechseln. Mit der Codeansicht können Personen, die mit HTML vertraut sind, Inhalte im Code hinzufügen und bearbeiten.

RTE overview.png

Formatierung

  • Fett: Mache Deinen Text fett. Du kannst den Text auch fett mit den Tastenkombinationen Strg + B unter Windows oder Cmd + B auf dem Mac machen.
  • Kursiv: Mache Deinen Text kursiv oder schräg. Du kannst den Text auch kursiv mit den Tastenkombinationen Strg + I unter Windows oder Cmd + I auf dem Mac machen.
  • Unterstreichen: Unterstreiche Deinen Text. Du kannst den Text auch unterstreichen mit den Tastenkombinationen Strg + U unter Windows oder Cmd + U auf dem Mac.
  • Durchgestrichen: Durchstreiche Deinen Text. Du kannst den Text auch durchstreichen mit den Tastenkombinationen Strg + S unter Windows oder Cmd + S auf dem Mac.
  • Tiefgestellt: Mache Deinen Text tiefgestellt, was bedeutet, dass er kleiner ist und leicht unterhalb der regulären Linie liegt.
  • Hochgestellt: Mache Deinen Text hochgestellt, was bedeutet, dass er kleiner ist und leicht über der regulären Linie liegt.
  • Schriftgröße: Wähle eine Größe aus einer Liste von Standard-Schriftgrößen. Alternativ kannst Du in der Codeansicht eine benutzerdefinierte Schriftgröße definieren. Wenn Du eine Überschrift erstellen möchtest, empfehlen wir die Verwendung der Option Formatierung anstelle der Änderung der Schriftgröße.
  • Textfarbe: Wähle eine Farbe aus einer Liste von Standardfarben. Alternativ kannst Du eine benutzerdefinierte Farbe definieren, indem Du einen HEX-Code eingibst. Wenn Du einen Satz hervorheben möchtest, um ihn hervorzuheben, empfehlen wir die Verwendung der Option Absatzformatierung anstelle der Änderung der Textfarbe.
  • Hintergrundfarbe: Wähle eine Hintergrundfarbe aus einer Liste von Standardfarben. Alternativ kannst Du eine benutzerdefinierte Farbe definieren, indem Du einen HEX-Code eingibst.
  • Formatierung löschen: Lösche alle Formatierungen und ändere Deinen Text zurück zum Standard.

RTE style your text.png

Layout

  • Ausrichten (links, zentriert, rechtsbündig, Blocksatz): Ändere die Ausrichtung deines Textes und Inhalts.
  • Nummerierte Liste: Füge eine nummerierte oder geordnete Liste hinzu. Eine Unterkategorie kann hinzugefügt werden, indem die folgende Zeile eingerückt wird. Du kannst den Stil des Nummerierungssymbols ändern. Die Optionen umfassen Standard (1,2,3), Alpha (a,b,c), Griechisch (α,β,γ) oder Römisch (i,ii,iii) in Klein- oder Großbuchstaben.
  • Aufzählungsliste: Füge eine Aufzählungs- oder unnummerierte Liste hinzu. Eine Unterkategorie kann hinzugefügt werden, indem die folgende Zeile eingerückt wird. Du kannst den Stil des Aufzählungssymbols ändern.
  • Formatierung: Du kannst Text formatieren, indem du seinen Typ änderst. Standardmäßig handelt es sich um einen Standardabsatz, aber du kannst ihn in verschiedene Überschriften oder einen Code-Schnipsel ändern. Die Formatierung ändert mindestens die Schriftgröße, -stärke und den Rand.
  • Absatzformatierung: Wende einen Stil auf deinen Text an, um ihn hervorzuheben oder sichtbarer zu machen. Ein Stil ändert beispielsweise die Schriftfarbe, Hintergrundfarbe und den Rand.

    Formate RTE.png

  • Einzug: Rücke deinen Text oder Inhalt nach innen oder bringe ihn wieder in Einklang mit dem restlichen Text. Du kannst auch Text mit der Tab-Taste auf deiner Tastatur einrücken.
  • Zitat: Füge eine Zitatbox hinzu. Eine Zitatbox ist durch eine graue Linie und kursiven Text gekennzeichnet. Ein Zitat kann verwendet werden, um bestimmten Text von anderen Inhalten abzuheben.

RTE define layout and structure.png

Inhalt

  • Erwähnen: Erwähne einen Benutzer. Ein Benutzer, der im Rich-Text-Editor erwähnt wird, wird nicht über die Erwähnung benachrichtigt, aber es wird ein. Wenn du mit der Maus über den Link fährst, wird ein Pop-up-Fenster des Benutzers angezeigt. Wenn du dieses auswählst, gelangst du zum Profil des Benutzers.
  • Link: Füge einen Link ein, um Nutzer an einen anderen Ort zu leiten. Du kannst entscheiden, ob der Link im aktuellen Browserfenster oder in einem neuen Tab geöffnet wird.
  • Bild: Füge ein Bild ein. Erfahre mehr unter Bilder im Rich-Text-Editor einfügen.
  • Video: Füge ein Video ein. Erfahre mehr unter Videos im Rich-Text-Editor einfügen.
  • Tabelle: Füge eine Tabelle ein. Erfahre mehr unter Tabellen im Rich-Text-Editor einfügen.
  • Datei: Füge eine Datei ein. Eine eingefügte Datei wird als Hyperlink mit dem Dateinamen als anklickbarem Text angezeigt. Nutzer können die Datei auswählen, um sie in der Datei-Bibliothek zu öffnen.
  • Horizontale Linie: Füge eine graue Trennlinie ein, die den gesamten Editor überspannt. Eine Trennlinie dient als visueller Hinweis und kann dir helfen, deinen Inhalt zu organisieren, um seine Lesbarkeit sicherzustellen.
  • Ankerlink: Erstelle einen Ankerlink. Ankerlinks können verwendet werden, um ein digitales Inhaltsverzeichnis zu erstellen. Um einen klaren und leicht verständlichen Text zu gewährleisten, wird empfohlen, Ankerlinks sparsam zu verwenden. Wenn du detaillierte Informationen strukturiert bereitstellen musst, erwäge die Erstellung von Wiki-Artikeln und Ordnern.

RTE add content.png

Fortgeschritten

  • Rückgängig: Du kannst auch deine letzte Änderung mit den Tastenkombinationen Strg + Z unter Windows oder Cmd + Z auf dem Mac rückgängig machen.
  • Wiederholen: Du kannst auch deine zuvor rückgängig gemachte Aktion mit den Tastenkombinationen Strg + Umschalt + Z unter Windows oder Cmd + Umschalt + Z auf dem Mac wiederholen.
  • Vollbild
  • Alles auswählen: Du kannst auch alles auswählen mit den Tastenkombinationen Strg + A unter Windows oder Cmd + A auf dem Mac.
  • Code-Ansicht: Zeige den HTML-Code des Textes und Inhalts im Rich-Text-Editor an. Du kannst den Text und Inhalt im Code bearbeiten. Die unten aufgeführten Code-Befehle sind in der Quellcode-Ansicht erlaubt. Alle hier nicht aufgeführten Befehle werden automatisch entfernt.
  • addTags("a", "b", "blockquote", "br", "caption", "cite", "code", "col", "colgroup", "dd", "div", "dl", "dt",
       "em", "font", "iframe", "hr", "h1", "h2", "h3", "h4", "h5", "h6", "i", "img", "li", "ol", "p",
       "pre", "q", "small", "span", "strike", "strong", "sub", "sup", "table", "tbody", "td", "tfoot",
       "th", "thead", "tr", "u", "ul", "video", "article", "aside", "bdi", "details", "dialog",
       "figcaption", "figure", "footer", "header", "main", "mark", "meter", "nav", "progress",
       "rp", "rt", "ruby", "section", "summary", "time", "wbr", "datalist", "option", "s");
    
         addAttributes("h1");
         addAttributes("h2");
         addAttributes("h3");
         addAttributes("h4");
         addAttributes("h5");
         addAttributes("h6");
    
         addAttributes("a", "href", "title", "target", "coyo-anchor");
         addAttributes("blockquote", "cite");
         addAttributes("col", "span", "width");
         addAttributes("colgroup", "span", "width");
         addAttributes("div", "align");
         addAttributes("font", "color", "face");
         addAttributes("iframe", "allowfullscreen", "allowtransparency", "frameborder", "height",
              "mozallowfullscreen", "scrolling", "src", "webkitallowfullscreen", "width");
         addAttributes("img", "align", "alt", "data-filename", "height", "src", "title", "width");
         addAttributes("ol", "start", "type");
         addAttributes("q", "cite");
         addAttributes("table", "summary", "width");
         addAttributes("td", "abbr", "axis", "colspan", "rowspan", "width");
         addAttributes("th", "abbr", "axis", "colspan", "rowspan", "scope", "width");
         addAttributes("ul", "type");
         addAttributes("p", "align");
         addAttributes("span", "coyo-download", "id", "title");
         addAttributes("i", "file", "title");
         addAttributes("video", "controls", "height", "width", "src", "disablepictureinpicture");
         addAttributes("article");
         addAttributes("aside");
         addAttributes("details", "open");
         addAttributes("dialog", "open");
         addAttributes("figcaption");
         addAttributes("figure");
         addAttributes("footer");
         addAttributes("header");
         addAttributes("main");
         addAttributes("meter", "form", "high", "low", "max", "min", "optimum", "value");
         addAttributes("nav");
         addAttributes("progress", "max", "value");
         addAttributes("section");
         addAttributes("summary");
         addAttributes("time", "datetime");
         addAttributes("datalist");
         addAttributes("option");
         addAttributes("li");
    
         addProtocols("a", "href", "#", "http", "https", "fax", "file", "ftp", "mailto", "ms-word", "ms-excel",
              "ms-powerpoint", "ms-visio", "notes", "skype", "tel", "webcal", "webcals");
         addProtocols("blockquote", "cite", "http", "https");
         addProtocols("cite", "cite", "http", "https");
         addProtocols("img", "src", "http", "https");
         addProtocols("q", "cite", "http", "https");
         addProtocols("iframe", "src", "http", "https");
    
         addEnforcedAttribute("a", "rel", "nofollow");

RTE advanced.png

Shortcuts

Unter dem Rich-Text-Editor findest Du zwei Beispiele für Shortcuts, die Nutzern mit eingeschränktem Sehvermögen helfen sollen, den Froala Rich-Text-Editor ordnungsgemäß zu navigieren. Diese hervorgehobenen Shortcuts sind:

  • Alt + F10 auf Windows oder fn + Option + F10 auf dem Mac: Dieser Shortcut verschiebt den Selektor in die Symbolleiste des Rich-Text-Editors
  • Strg + Alt + Leertaste auf Windows oder Strg + Option + Leertaste auf dem Mac: Wenn der Cursor in einer Tabellenzelle platziert ist, öffnet dieser Shortcut die Zellenoptionen.

Du findest zusätzliche Shortcuts für den Rich-Text-Editor in der Dokumentation von Froala.

War dieser Beitrag hilfreich?