Der Rich-Text-Editor (RTE) basiert auf dem Froala Editor, einem JavaScript basierten WYSIWYG* HTML-Editor.
Das heißt konkret, ihr seht direkt welche Eingaben ihr vornehmt, im Hintergrund wird in das übliche HTML-Format umgewandelt.
*WYSIWYG = "What You See Is What You Get“ – auch als Echtzeitdarstellung bekannt.
Im Rich-Text-Editor steht euch ein Textfeld mit verschiedenen Möglichkeiten zur Verfügung, eingegebenen Text zu formatieren und ergänzende Elemente hinzuzufügen.
Standard-Formate
- Standard Format für Texte: Funktionen zum Formatieren von Text (Fettdruck, kursive Schrift, unterstrichene Textabschnitte)
- Erweiterte Formatierung: Durchgestrichene Textabschnitte, Textgröße, Formatvorlagen, Stilvorlagen sowie Farbformatierungen
- Strukturierung von Textelementen: Ausrichtung von Absätzen sowie eingerückte Textabschnitte
- Erweiterte Strukturierung: Listen, Absätze sowie Zitate
Zusätzlichen Formate
- Verlinkungen: intern oder extern
- Anker-Links: zur Strukturierung von sehr langen Texten
- Anhänge: ihr könnte verschiedene Typen von Dokumenten anhängen und bekommt eine kurze und prägnante URL samt Dateikürzel
- Bilder: direkt im Text und leicht veränderbar
- Videos: per Link oder als direkter Upload
- Tabellen: inklusive Formatoptionen
Was sind eigentlich Anker-Links?
Anker-Links ermöglichen es euch eine Art digitales Inhaltsverzeichnis, wie in einem Buch, anzulegen. Unsere Empfehlung: Schreibt zuerst den Text und fügt dann die Anker hinzu.
Markiert die entsprechende Überschrift und fügt einen Anker hinzu, wählt einen sinnvollen und wiedererkennbaren Namen für den Abschnitt.
Intelligente Erkennung für Word
Optionen für Bilder
Die Bearbeitung von Bildern ist sehr einfach. Mit Klick auf das Bild könnt ihr ganz einfach die Größe und Ausrichtung verändern. Zusätzlich könnt ihr die Form anpassen, dem Bild eine Beschreibung hinzufügen, anhand des Bildes auf andere Elemente verlinken oder auch für Bilder einen Anker setzen.
Optionen für Tabellen
Source Code-Ansicht
Der Rich-Text-Editor bietet euch auch die Möglichkeit, direkt in die Source Code-Ansicht zu wechseln und dort Inhalte auf HTML-Basis hinzuzufügen. Das kann nützlich sein, wenn ihr externe Inhalte abseits der vorhandenen Widgets einpflegen wollt. Um schadhafte Code-Inhalte zu verhindern, können nur die gängigsten Befehle verwendet werden. Alle hier nicht genannten Befehle sind nicht zulässig und werden daher automatisch bereinigt.
Erlaubte Code-Befehle für die HTML-Ansicht sind:
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");