Text editing

This tool helps web authors format content without knowing a lot about HTML.

Introduction to rich text editor

This resource will help you get the most out of the rich text editor — a tool that appears across Mass.gov content types.

Rich text means text that includes formatting. The rich text editor helps web authors format content without knowing a lot about HTML. Sometimes, you’ll hear rich text editors called WYSIWYG editors — What You See Is What You Get — because you’ll be able to see what your content will look like as you’re working on it.

Note: Due to security reasons, custom HTML is not allowed on Mass.gov in rich text or other fields.

This resource covers each tool in the rich text editor. In the image, each tool is numbered from 1 to 17. Refer to the list below to learn what each does.

1. Bold

Bolds text. Use bold formatting sparingly.

2. Italic

Italicizes text. Use italics formatting sparingly.

3. Superscript

Formats characters to display only in the top half of a line, e.g. for abbreviations or powers.

4. Subscript

Formats characters to display only in the bottom half of a line.

Creates an inline link to another web address. To use, highlight the text you want to link and click this button. Then, in the box that opens, paste in the URL that you want users to go to when they click your link. If you’re linking to a Mass.gov page, begin typing the title of the page you’d like to link to. Click on the corresponding page when it appears in the dropdown.

Note: Using the link hotkey (Ctrl+K on Windows machines, Cmd+K on Macs) will not open the box with an autocomplete field. This box will still work if you copy and paste your link, but we suggest using the above method for all Mass.gov pages.

On occasion, rich text might render on the public facing page with what appear to be hyperlinks that you did not create. These fake links can occur when text is copied and pasted from a document, especially one that has been heavily revised. We recommend in cases like this that you first paste the text into NotePad or TextEditor to clean all formatting or code. Then, copy it from there and paste into the rich text field.

Important: Don’t use this to link to documents. If you need to link to documents, use the “Insert link to document” tool (#7).

Also important: A good inline link includes enough text that users know where they’re going just by reading the link (without the text around it).

Remove an inline link. Does not delete the text itself.

Use this tool to link to a file. Need help? Learn more about linking to documents and content.

8. Bulleted list

Create a list in which each item is marked with a bullet point. After you hit “enter” to start a new bulleted item, you can use the “tab” key to indent to a new level, or “shift-tab” to outdent (jump back to a higher level).

Although there’s no technical limit on how many levels you can include in a bulleted list, it’s nearly impossible to imagine a scenario in which you need more than 3 or 4.

Copying and pasting bulleted lists from elsewhere — word processing programs, for example — can create some formatting hiccups. It’s a good idea to use the “Remove Formatting” tool (#16) on copy/pasted text, and then re-create the bulleted list using the Mass.gov rich text editor.

9. Numbered list

Create a list in which each item is marked with a number. After you press “enter” to start a new numbered item, you can use the “tab” key to indent to a new level, or “shift-tab” to outdent (jump back to a higher level). To users, the second (and above) levels of a numbered list will appear as lower case letters (while authoring, all levels will be marked with numbers):

Copying and pasting numbered lists from elsewhere — word processing programs, for example — can create formatting hiccups. Use the “Remove Formatting” tool (#16) on copy/pasted text, and then re-create the numbered list in the Mass.gov rich text editor.

To more accurately convert paper documents to HTML in Mass.gov content, you may require a list that instead of decimals features uppercase or lowercase Roman numerals or letters. Here’s how to do that:

  • Create a numbered list by entering a series of items in text and then clicking the numbered list icon from the toolbar. By default, your list will be ordered using decimals, such as 1, 2, 3.

  • To organize your list instead with Roman numerals or letters in addition to or rather than decimals, click on a line in your list and right mouse click.

  • This will display a pop-up box from which you should choose “Numbered List Properties.”

  • That will result in a new pop-up box. Under "Type," choose between Lower or Upper Roman, Lower or Upper Alpha (letters), or Decimal, and click OK. This will renumber each item on the list at the same level of item that you initially clicked.

  • To renumber items on a different level of the list, repeat the above process after clicking a line at that next level.

10. Block quote

Use the Block Quote tool if you need to include a direct quotation from another source that is longer than 40 words. Block quotes have narrower (indented) margins than the rest of the content on the page. Use block quotes sparingly.

11. Insert an image

Add an image to your content. Read a step-by-step resource about how to embed images.

12. Table

Create a table. After you create an empty table, use “tab” to navigate between cells. Read a resource on creating clear, accessible tables.

Copying and pasting tables from elsewhere — word processing programs, for example — can create some formatting hiccups. It’s a good idea to create tables from scratch in the Mass.gov rich text editor.

13. Paragraph format

This tool allows you to add headings and subheadings to your content. It’s important to use headings in numerical order to ensure your content makes sense to search engines and screen readers.

Heading formatting and accessibility: Headings and subheadings imply connections between content. For example, titling a section with Heading 3 will imply that it is a subsection of an earlier Heading 2.

Do not “bounce around” with your heading levels: Don’t go from heading 2 to 5 to 3 to 4. Not only does this confuse users trying to make connections to content on the page, but it negative impacts users who rely on screen readers. Screen readers read the heading levels, and if they're not used appropriately, it won't make logical sense to the user.

In general, Mass.gov built-in headings — the headings that appear automatically — follow these rules:

  • Titles are Heading 1

  • Sections are Heading 2

  • Subsections (such as the “Additional Resources” where downloads live) are Heading 3

Tip: As the image shows, some headings include extra space. One cause of undesired line breaks is when your Paragraph Format tool is set to a high-level heading instead of normal formatting.

14. Maximize

Maximize the 'Overview' box for a full-screen view. Click the tool again to revert back to the original size.

15. Insert special character

Allows you to insert characters you might not find on your keyboard, including letters with accents, fractions, and arrows.

16. Remove formatting

Removes any formatting that’s been applied to your text. This is useful for taking out formatting that's come with copied text from something like a word processor. It can also be helpful to clear formatting that's cumbersome, allowing you to start fresh.

17. Source

Allows you to see your content’s formatting source code (HTML).

Was this article helpful?

Last updated