Editor Widget Overview

Prev Next

The Editor widget has ADA compliance tools, is responsive (including tables), and includes additional tools and features such as font options and full-screen mode.

Important Notes

  • Line breaks in the Editor Widget automatically double-space. To get a single line break, press Shift + Enter on your keyboard.

  • The Froala Editor Widget removed the ability to apply underline styling. Only hyperlinks should be underlined. We recommend removing any tags from your editor content.

Font Options

The Editor has the option to expand the font options that are available to you. This includes more font types, sizes, and colors to be available in the drop-down. To turn this feature on, please view our Enable Font Options article.


Editor Features

Toolbar displaying various text formatting options for document editing and design.

  • full screen icon. Fullscreen: Expand your editing window to your whole screen

  • bold icon. Bold: Bold text

  • italic icon. Italics: Italicize your text

  • strikethrough icon. Strikethrough: Show your text with a line through it

  • subscript icon. Subscript: Allows you to have text smaller than your normal text and on the bottom, similar to a sub-text

  • superscript icon. Superscript: Allows you to have text smaller than your normal text and aligned to the top, similar to saying "x squared"

  • font family icon. Font Family: Choose the font for your text

  • font size icon. Font Size: Change the size of the font

  • font color icon. Font Color: Allows you to edit the color of the text

  • background color icon. Background Color: Modify the background of the text

  • paragraph format icon.  Paragraph Format: Select a style that is made for your site, such as Headline, Subhead1, and Subhead2. Further font options are available.

  • clear formatting icon. Clear Formatting: Quickly remove extra formatting on your page. This is helpful if you paste content onto the site and it does not appear correctly.

  • quote icon. Quote: Wraps your text in a q tag, which inserts quotation marks and informs screen readers and other devices that the content is a quote

  • block quote icon. Block Quote: Align a region (block) of your text differently from the rest of your text

    Note:

    This will indent and italicsize your chosen text

  • abbreviation icon. Abbreviation: Informs the screen reader that there is an abbreviation; enhances comprehension of the text for the end-user

  • language icon. Language: Tells screen readers if the specific text is a different language; enhances comprehension and translation for the end-user

  • Spell Check icon. Spell Check: Checks spelling and grammar within the editor widget

    Note:

    Select the number in the bottom right corner to view any errors and receive correction suggestionsExpand Proof Reading icon.

  • align icon. Align: Center, left, right, or justify your text alignment

  • increase indent icon.  Increase Indent: Increase the indentation of text

  • decrease indent icon. Decrease Indent: Decrease the indentation of text

  • bullets icon. Unordered List: Add bulleted lists to your content area. You can either select existing text to make a bulleted list or you can start a new line and begin a new bulleted list.

  • numbers icon. Ordered List: Add numbered lists to your content area. You can either select existing text to make a numbered list or you can start a new line and begin a new numbered list.

  • image icon. Insert Image: Insert and format images into your content area

  • folder icon. Insert Document Link: Opens up the Document Center so you can select a document to link to

  • link icon. Insert Link: Add any link to the page

  • table icon. Insert Table: Insert a table into your content area

  • undo icon. Undo: Undo recent changes

    Note:

    The undo option will only go back to the most recently saved.

  • redo icon. Redo: Redo recent changes; only recognizes active edits, as soon as the page saves it will not be available

  • special characters icon. Special Characters: Insert special characters onto your page

  • select all icon. Select All: Quickly and easily select all content that is in the editor

  • code view icon. Code View: This option gives you the opportunity to work on the HTML side of the editor. The code is color-coded to best keep track of action items.

  • ADA checker icon. ADA Checker: CivicPlus provides an ADA checker for the content located in the Editor Widget, FAQs, and News Flash. Learn more about this tool in our ADA Checker article.

  • Insert Video icon in the Froala Editor.

    Insert Video: Insert videos by URL or by embedded code from any source, including YouTube, Vimeo, Yahoo, and DailyMotion.

  • Two curved arrows in a magnifying shape, signifying the find and replace icon within the editor widget

    Find and Replace: Search for specific text and change it with something else.

  • Stylized sparkles representing AI Editing Assistant feature within the editor widget

    AI Editing Assistant: Helps users create, rewrite, and improve website content. Customers can add this to their editor widgets by contacting their Account Manager.

Note: The Editor automatically removes inappropriate code from the system so that it does not contradict. If you would like custom coding that the Editor does not allow, please consider the Custom HTML widget.

Short Cuts

  • Ctrl + Shift + Enter: Allows you to type directly below a paragraph of text with no space between

  • Ctrl + K: Shortcut to insert a link

  • Ctrl + V: Paste

  • Ctrl + C: Copy

  • Ctrl + X: Cut

  • Ctrl + Z: Undo

  • Ctrl + Shift + V: Plain Paste (Not all browsers will allow this.)

  • Ctrl + B: Bold

  • Ctrl + I: Italics

  • Ctrl + U: Underline

  • Ctrl + S: Strikethrough

  • Ctrl + ]: Increase Indent

  • Ctrl + [: Decrease Indent


Rich Formatting

The Editor Widget recognizes rich formatting that a user pastes and will alert the user with a pop-up message to ask if they would like to clear the original formatting before they paste it into the Editor.

Word Paste Detected pop-up asking the user if they would like to keep the format or clean it up.

Note: If pop-ups are disabled, the message will not be seen.


Tags

  • P and Header tags are the proper semantic tags to use in the cases of the Editor and provide some value for SEO and Accessibility.