Rich-Text-Editor Widget

Das Rich Text Editor (RTE) Widget ist ein benutzerfreundliches Tool, das auf dem Froala Editor basiert und es dir ermöglicht, Text- und HTML-Inhalte zu erstellen, zu bearbeiten und zu formatieren. Mit dem RTE-Widget kannst du optisch ansprechenden Text erstellen, ohne fortgeschrittene technische Fähigkeiten zu benötigen.

Einrichten des Widgets

Das RTE-Widget hat keine Konfigurationseinstellungen, wenn es hinzugefügt wird. Es fügt einfach ein Textfeld mit verschiedenen Optionen zur Textformatierung und zum Hinzufügen zusätzlicher Elemente hinzu.

Das RTE-Widget ist automatisch in Wiki- und Blog-Artikeln verfügbar.

Rich Text Editor Widget in einer Content App.png

Den Rich-Text-Editor verwenden

In dem Editor kannst du:

  • Text formatieren: Du kannst deinen Text ganz einfach fett, kursiv oder unterstrichen machen. Außerdem kannst du unter anderem die Schriftgröße, Textfarbe oder Hintergrundfarbe ändern. Du kannst die Farbe entweder aus den verfügbaren Farben auswählen oder einen Hex-Code eingeben. Wenn etwas schiefgeht, kannst du auch die Formatierung zurücksetzen.
  • Struktur und Layout definieren: Du kannst deinen Text ausrichten, Aufzählungs- oder nummerierte Listen mit verschiedenen Stilen hinzufügen, Absatzformate und -stile definieren, Einzüge verkleinern oder vergrößern und Zitate einfügen.
  • Inhalt hinzufügen: Du kannst deinen Text mit Inhalten füllen, indem du Bilder, Tabellen, Dateien und Videos hinzufügst und Nutzer mit Hyperlinks zu anderen Orten weiterleitest. Um ein Inhaltsverzeichnis zu erstellen, kannst du Ankerlinks verwenden.
  • Verwende erweiterte Funktionen: Du kannst den Vollbildmodus aktivieren, den gesamten Text markieren, um ihn zu kopieren oder zu entfernen, und den Quellcode anzeigen. Mit der Code-Ansicht können Personen, die mit HTML vertraut sind, Inhalte im Code hinzufügen und bearbeiten.
    • In der Quellcode-Ansicht sind folgende Code-Befehle 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");

War dieser Beitrag hilfreich?