Editor Widget Overview


CivicPlus now has two editors available to use: Legacy Editor and Editor. The Editor is our new editor and the Legacy Editor is our older version available for existing content. 

We recommend that you use the Editor widget instead of the Legacy Editor. This is because the Editor widget has more ADA tools, is responsive (including tables), and includes additional tools and features that were not available in the Legacy Editor, such as font options and full-screen mode.

Important Note

  • Line breaks in the Editor widget automatically double space; to get a single line break, press shift+enter on your keyboard.

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

  • fullscreen.png Fullscreen: Expand your editing window to your whole screen
    • Note: This feature is not available in the Legacy Editor.
  • bold.png Bold: Bold text
  • italics.png Italics: Italicize your text
  • underline.png Underline: Underline your text
  • strikethrough.png Strikethrough: Show your text with a line through it
  • subscript.png Subscript: Allows you to have text smaller than your normal text and on the bottom, similar to a sub-text
  • superscript.png Superscript: Allows you to have text smaller than your normal text and aligned to the top, similar to saying "x squared"
  • blockquote.png Block Quote: Align a region (block) of your text differently than the rest of your text
    • Note: This will indent and italicize your chosen text.
  • quote.png 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
  • abbreviation.png Abbreviation: Informs the screen reader that there is an abbreviation; enhances comprehension of the text for the end-user
    • Note: This feature is not available in the Legacy Editor.
  • language.png Language: Tells screen readers if specific text is a different language; enhances comprehension and translation for the end-user
    • Note: This feature is not available in the Legacy Editor.
  • align.png Align: Center, left, right, or justify your text alignment
  • increaseindent.png Increase Indent: Increase the indentation of text
  • decreaseindent.png Decrease IndentDecrease the indentation of text
  • bulletedlist.png Bulleted List: Add bulleted lists to your content area
    • Note: You can either select existing text to make a bulleted list or you can start a new line and begin a new bulleted list.
  • numberedlist.png Numbered List: Add numbered lists to your content area
    • Note: 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.png Image: Insert and format images into your content area
  • slideshowmanager.png Slideshow Manager: Insert and format slideshows into your content area
  • insertdocument.png Insert Document Link: Opens up the Document Center so you can select a document to link to
  • table.png Table: Insert a table into your content area
    • Note: This option is also available in the Legacy Editor but it is not responsive, in the Editor it is responsive.
  • link.png Insert Link: Add any link to the page
  • CSSClass.png CSS Class: Select a style that is made for your site, such as Headline, Subhead1, Subhead2, etc
  • undo.png Undo: Undo recent changes
    • Note: The undo option will only go back to the most recently saved. 
  • redo.pngRedo: Redo recent changes; only recognizes active edits, as soon as the page saves it will not be available
  • clearformatting.png Clear Formatting: Quickly remove extra formatting on your page
    • Note: This is helpful if you paste content onto the site and it does not appear correctly.
  • specialcharacters.png Special Characters: Insert special characters onto your page
  • selectall.png Select All: Quickly and easily select all content that is in the editor
  • codeview.png Code View: This option gives you the opportunity to work in the HTML side of the editor; can add custom styles, colors, or other coding
    • Note: The code is color-coded to best keep track of action items.
  • ADA_Checker_Icon.PNG ADA Checker: CivicPlus provides an ADA checker for the content located in the Editor Widget, FAQs, and News Flash.
    • Note: Learn more about this tool on our ADA Checker article.

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
    • Note: Not all browsers will allow this.
  • Ctrl + B: Bold
  • Ctrl + I: Italics
  • Ctrl + U: Underline
  • Ctrl + S: Strikethrough
  • Ctrl + ]: Increase Indent
  • Ctrl + [: Decrease Indent
  • 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 into the Editor. 
    • Note: If pop-ups are disabled, the message will not be seen.


  • The Legacy Editor does not use P tags, however, P tags are the inherent functionality that comes with most editors, so the Editor does utilize P 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. 

I'd Like to Request an Enhancement

3 out of 3 found this helpful


Article Feedback

  • Avatar
    Trisa Parker

    Great article. Can we add a reference to the ADA Checker tool in here?


  • Avatar
    Morgan King

    Absolutely! We have added the reference. Thank you for your feedback!

  • Avatar
    Michael Tjoelker

    Great overview!

    Would it be possible to have additions or a separate article on how to make posts most accessible within the Editor? (e.g. nesting headings properly using "CSS Class", adding images and making sure they have appropriate alt text, using bulleted/numbered lists, and best practices for adding links and tables?)

    This would be incredibly beneficial, especially since so many other modules make use of the editor (eg News Flash, Info Advanced, Archive Center, ...).