Rich text editor widget

The Rich Text Editor (RTE) widget is a user-friendly tool based on the Froala editor, which lets you create, edit, and format text-based and HTML content. With the RTE widget, you can create visually appealing text without needing advanced technical skills.

Set up the widget

The RTE widget has no configuration settings when it's added; it simply adds a text box with various options for formatting text and adding additional elements.

The RTE widget is automatically available in wiki and blog articles.

rich text editor widget in a content app.png

Use the rich text editor

In the editor, you can:

  • Format text: You can easily change your text to bold, italic, or underlined. Additionally, you can, among other things, change the font size, text color, or text background color. You can customize the color using available colors or enter a hex code. You can also clear formatting if something goes wrong.
  • Define structure and layout: You can align your text, add bullet or numbered lists with various style options, define paragraph formats and styles, decrease or increase indentations, and add quotes.
  • Add content: You can populate your text with content by adding images, tables, files, and videos and direct users to other locations using hyperlinks. To create a table of contents, you can create anchor links.
  • Use advanced features: You can enter fullscreen mode, select all text if you need to copy or remove it, and enter source code view. Using the code view, those familiar with HTML can add and edit content in code.
    • The following code commands are allowed in the source code view. Any commands not mentioned here will be automatically removed.
      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");

Was this article helpful?