The rich text editor (RTE) is based on the Froala editor, a JavaScript-based WYSIWYG HTML editor (What You See Is What You Get). This means you can see your inputs straight away and they are converted into the usual HTML format in the background.
Usage
The rich text editor (RTE) is available by default in a wiki and blog article. Additionally, you can add it as a widget to a content app or homepage, for example.
Options
In the rich text editor (RTE), you have a text box with various options for formatting input text and adding additional elements:
- Standard (bold, italic und underlined text)
- Extended (strikethrough text, sub- and superscript text, font size, text color, background color and clear formatting)
- Structure (align left, right, center or justify, ordered or unordered list, paragraph format and style, decrease or increase indent and quote)
- Content (links, images, anchors, tables, files, videos and horizontal line)
Anchor
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.
Text color
You can either customize the color of the text with the available colors or enter a standard hex code for your own color.
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.Tables
Various formatting options are available to you for tables. You can make them larger or smaller, change formats, and customize elements.
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");