Unser Rich-Text-Editor (RTE) basiert auf dem Froala Editor, einem JavaScript basierten WYSIWYG HTML-Editor (What You See Is What You Get). Das heißt konkret, ihr seht direkt welche Eingaben ihr vornehmt und im Hintergrund werden diese in das übliche HTML-Format umgewandelt.
Nutzung
Der Rich-Text-Editor (RTE) ist standardmäßig in einem Wiki- und Blog Artikel vorhanden. Zusätzlich könnt ihr diesen als Widget z. B. einer Inhalts App oder Startseite hinzufügen.
Optionen
Im Rich-Text-Editor (RTE) steht euch immer ein Textfeld mit verschiedenen Möglichkeiten zur Verfügung, um eingegebenen Text zu formatieren und ergänzende Inhalte hinzuzufügen:
- Standard (fetter, kursiver und unterstrichener Text)
- Erweitert (durchgestrichener Text, tief- und hochgestellter Text, Schriftgröße, Text Farbe, Hintergrundfarbe und Formatierung löschen)
- Strukturierungen (links-, rechtsbündig oder zentriert ausrichten, Blocksatz, nummerierte oder unnummerierte Liste, Formatierung, Absatzformatierung, Einsatz vergrößern oder verkleinern und Zitieren)
- Inhalte (Links, Bilder, Anker, Tabellen, Dateien, Videos und horizontale Linie einfügen)
Anker
Anker 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.
Erstellt eine Gliederung, in dem ihr das entsprechende Wort markiert und einen Link hinzufügt - wählt aus der Liste der Anker die richtige Option aus und fügt den Link hinzu.
Anker funktionieren auf diese Art und Weise nur innerhalb des gleichen Rich-Text-Editors oder innerhalb einer URL zwischen mehreren Rich-Text-Editoren. Wenn ihr gerne einen Anker aus einem Rich-Text-Editor in einem anderen Editor benutzen möchtet, oder generell darauf verlinken wollt, müsst ihr diesen einmal anklicken und euch dann die geöffnete URL kopieren.
Text Farbe
Die Farbe des Texts könnt ihr entweder mit den verfügbaren Farben anpassen oder ihr gebt einen Standard Hex Code für eine eigene Farbe ein.
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.
Tabellen
Für die Tabelle stehen euch verschiedene Formatierungsoptionen zusammen.
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");