Using the rich text editor toolbar

The Rich Text Editor is a simple and user-friendly tool that is based on the Froala editor. It enables you to easily create, edit, and format text-based and HTML content without requiring advanced technical skills. This editor allows you to create visually appealing text and is available by default in blog and wiki articles, as well as in a widget that can be placed in other elements.

You can paste text from external sources into the rich text editor. For the best experience, we recommend pasting without formatting. You can do this by using the shortcut Ctrl + Alt + V on Windows or Cmd + Shift + V on Mac.

The toolbar in the rich text editor offers formatting, styling, editing, and advanced options. It is divided into these sections:

  1. Formatting: 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.
  2. Layout: You can align your text, add lists with various style options, define paragraph formats and styles, decrease or increase indentations, and add quotes.
  3. Content: You can populate your text with content by adding images, tables, files, and videos and direct users to other locations using hyperlinks. You can also create anchor links to create a table of contents.
  4. Advanced: You can enter fullscreen mode, select all text if you need to copy or remove it, and enter the source code view. Using the code view, those familiar with HTML can add and edit content in code.

RTE overview.png

Formatting

  • Bold: Make your text bold. You can also bold text using the keyboard shortcuts Ctrl + B on Windows or Cmd + B on Mac.
  • Italic: Make your text italic or cursive. You can also italic text using the keyboard shortcuts Ctrl + I on Windows or Cmd + I on Mac.
  • Underline: Underline your text. You can also underline text using the keyboard shortcuts Ctrl + U on Windows or Cmd + U on Mac.
  • Strikethrough: Strikethrough your text. You can also strikethrough text using the keyboard shortcuts Ctrl + S on Windows or Cmd + S on Mac.
  • Subscript: Make your text subscript, meaning it's smaller and set slightly below the regular line.
  • Superscript: Make your text superscript, meaning it's smaller and set slightly above the regular line.
  • Font size: Choose a size from a list of default font sizes. Alternatively, in the code view, you can define a custom font size. If you want to create a heading, we recommend using the Paragraph format option instead of changing the font size.
  • Text color: Choose a color from a list of default colors. Alternatively, you can define a custom color by inputting a HEX code. If you want to emphasize a sentence to make it stand out, we recommend using the Paragraph style option instead of changing the text color.
  • Background color: Choose a background color from a list of default colors. Alternatively, you can define a custom color by inputting a HEX code.
  • Clear formatting: Clear all formatting and change your text back to default. 

RTE style your text.png

Layout

  • Align (left, center, right, justify): Change the alignment of your text and content. 
  • Number list: Add a numbered or ordered list. A sub-list can be added by indenting the following line. You can change the style of the numbering icon. The options include default (1,2,3), Alpha (a,b,c), Greek (α,β,γ), or Roman (i,ii,iii) numerals in lower- or uppercase.
  • Bullet list: Add a bullet or unordered list. A sub-list can be added by indenting the following line. You can change the style of the bullet icon.
  • Paragraph format: Format text by changing its type. By default, your text is a standard paragraph, but you can change it to different headlines or a code snippet. Formatting changes at least the font size, weight, and margin.
  • Paragraph style: Apply a style to your text to emphasize or make it more visible. A style changes, for example, the font color, background color, and margin.

    styles RTE.png

  • Indent: Push your text or content inwards or bring it back to align with the rest of the text. You can also indent text using the Tab key on your keyboard.
  • Quote: Add a quote box. A quote box is distinguished by a grey line and italic text. A quote can be used to set specific text apart from the rest of the content.

RTE define layout and structure.png

Content

  • Mention: Mention a user. A user mentioned in the rich text editor won't be notified of the mention, but they will be hyperlinked. You can hover over the link to view a pop-up of the user and select it to visit the user's profile.
  • Link: Insert a link to guide users to another location. You can decide if the link opens in the current browser window or a new tab.
  • Image: Insert an image. Learn more in Adding images in the rich text editor.
  • Video: Insert a video. Learn more in Adding videos in the rich text editor
  • Table: Insert a table. Learn more in Adding tables in the rich text editor.
  • File: Insert a file. An inserted file is displayed as a hyperlink with the file name as the clickable text. Users can select the file to open it in the file library.
  • Horizontal line: Insert a grey divider line that spans the entire editor. A divider serves as a visual cue and can help you organize your content to ensure its readability.
  • Anchor link: Create an anchor link. Anchor links can be used to create a digital table of contents. To ensure a clear and easy-to-understand text, it is recommended to use anchor links sparingly. If you need to provide detailed information in a structured way, consider creating wiki articles and folders.

RTE add content.png

Advanced

  • Undo: Undo your recent change. You can also use the keyboard shortcuts Ctrl + Z on Windows or Cmd + Z on Mac.
  • Redo: Redo your recently undone action. You can also use the keyboard shortcuts Ctrl + Shift + Z on Windows or Cmd + Shift + Z on Mac.
  • Fullscreen: Enlarge the rich text editor to fill the screen for a better view of your content.
  • Select all: Select all the content in the editor. You can also use the keyboard shortcuts Ctrl + A on Windows or Cmd + A on Mac.
  • Code view: View the HTML code of the text and content in the rich text editor. You can edit the text and content in the code. The below 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");

RTE advanced.png

Shortcuts

Under the rich text editor, you'll see two shortcut examples that aim to help users with impaired vision navigate the Froala rich text editor properly. These highlighted shortcuts are:

  • Alt + F10 on Windows or fn + Option + F10 on Mac: This shortcut moves the selector to the rich text editor toolbar
  • Ctrl + Alt + Space on Windows or Ctrl + Option + Space on Mac: When the cursor is placed in a table cell, this shortcut opens the cell options.

You can find additional shortcuts for the rich text editor in Froala's documentation.

Was this article helpful?