The rich text editor (RTE) is based on Froala Editor, a JavaScript-based WYSIWYG* HTML editor.
Specifically, this means you can see your inputs straight away and they are converted into the usual HTML format in the background.
*WYSIWYG = "What You See Is What You Get" – also known as real-time display.
In the rich text editor, you have a text box with various options for formatting input text and adding supplementary elements.
Standard formats
-
Standard format for texts: Functions for formatting text (bold, italics, underlined text sections)
-
Advanced formatting: Struck-through sections of text, text size, format templates, style templates, and color formatting
-
Structuring of text elements: Orientation of paragraphs and indented sections of text
- Advanced structuring: Lists, paragraphs and quotations
Additional formats
-
Links: internal or external
-
Anchor links: to structure very long texts
-
Attachments: you can attach various types of documents and get a short and concise URL including file abbreviation
-
Images: directly in the text and easy to change
-
Videos: via link or as direct uploads
-
Tables: including format options
What actually are anchor links?
Anchor links make it possible to create a kind of digital table of contents, like in a book. Our recommendation: First write the text and then add the anchors.
Mark the corresponding heading and add an anchor, select a sensible and recognizable name for the section.
Create a structure by marking the corresponding word and adding a link – choose the right option in the list of anchors and add the link.
Anchors only function in this way within the same rich text editor or in multiple rich text editors on the same URL. If you would like to use an anchor from one rich text editor in another editor or as link elsewhere, you need to click on the anchor and copy the opened URL.
Intelligent recognition for Word
Options for images
It’s very easy to edit images. You can easily change the size and orientation by clicking on the image. In addition, you can customize the shape, add a description to the image, link to other elements using the image, or even add an anchor for images.
Options for tables
Various formatting options are available to you for tables. You can make them larger or smaller, change formats, and customize elements.
Source Code View
The rich text editor also gives you the option to switch directly to the source code view and add HTML-based content there. This can be useful if you want to add external content outside of the existing widgets. To prevent malicious code, only the most common commands can be used. All commands not mentioned here are not permitted and will therefore be cleaned up automatically.
Allowed code commands for the source code view are:
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");