Documentation Index

Fetch the complete documentation index at: https://www.civicplus.help/llms.txt

Use this file to discover all available pages before exploring further.

Editor Widget Overview

Prev Next

The Editor widget has ADA compliance tools and is responsive, including tables. It also 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 underline tags (<u></u>) 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 available in the drop-down. To turn this feature on, please view our Enable Font Options article.


Editor Features

The features toolbar of the Editor widget with various icons and drop-down menus displayed.

  • The Editor widget Fullscreen icon. Fullscreen: Expand your editing window to your whole screen

  • The Editor widget's Bold Text icon. Bold: Bold text

  • The Editor widget Italics icon. Italics: Italicize your text

  • The Editor widget Strikethrough icon. Strikethrough: Show your text with a line through it

  • The Editor widet Subscript icon. Subscript: Allows you to have text smaller than your normal text and on the bottom, similar to subtext

  • The Editor widget Superscript icon. Superscript: Allows you to make text smaller and align it above the normal text, similar to "x squared"

  • The Editor widget Font Family icon. Font Family: Choose the font for your text

  • The Editor widget Font Size icon. Font Size: Change the size of the font

  • The Editor widget Font Color icon. Font Color: Allows you to edit the color of the text

  • The Editor widget Background Color icon. Background Color: Modify the background of the text

  • The Editor widget Paragraph Format drop-down list icon.  Paragraph Format: Select a style made for your site, such as Headline, Subhead1, or Subhead2. Additional font options are available

  • The Editor widget 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

  • The Editor widget Quote icon. Quote: Wraps your text in a <q> tag, which adds quotation marks and tells screen readers and other devices the content is a quote

  • The Editor widget Block Quote icon. Block Quote: Aligns a block of text differently from the rest of the text

    Note:

    This will indent and italicize your chosen text.

  • The Editor widget Abbreviation icon. Abbreviation: Informs screen readers that the text is an abbreviation. This helps users better understand the content.

  • The Editor widget Language icon. Language: Tells screen readers that the selected text is in a different language. This improves understanding and translation for users

  • The Editor widget 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 suggestionsThe Editor widget Spell Check notification icon.

  • The Editor widget Align icon. Align: Center, left, right, or justify your text alignment

  • The Editor widget Increase Indent icon.  Increase Indent: Increase the indentation of text

  • The Editor widget Decrease Indent icon. Decrease Indent: Decrease the indentation of text

  • The Editor widget Unordered List 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.

  • The Editor widget Ordered List 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.

  • The Editor widget Insert Image icon. Insert Image: Insert and format images into your content area

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

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

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

  • The Editor widget Undo icon. Undo: Undo recent changes

    Note:

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

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

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

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

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

  • The Editor widget 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.

  • The Editor widget Insert Video icon.

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

  • The Editor widget Find and Replace icon.

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

  • The Editor widget AI Editing Assistant icon.

    AI Editing Assistant: Helps users create, rewrite, and improve website content. If the feature has been disabled for your site, contact Support to have it re-enabled.

Note:

The Editor automatically removes inappropriate code from the system to prevent contradictions. 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 you paste. It displays a pop-up message asking whether you want to clear the original formatting before pasting 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

  • Paragraph (P) and heading tags are the correct semantic tags to use in the Editor. They also support SEO and Accessibility.