The rich text editor

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

All common and known format templates can be found in the upper bar: 
  • 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

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

A module appears when you copy text from Word and paste it into Haiilo. This asks whether you would like to paste the text with or without formatting.

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("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("details", "open");
            addAttributes("dialog", "open");
            addAttributes("meter", "form", "high", "low", "max", "min", "optimum", "value");
            addAttributes("progress", "max", "value");
            addAttributes("time", "datetime");

            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");

Was this article helpful?