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.
Rich text editor actions, buttons, and controls
Bolds text. Use bold formatting sparingly.
Italicizes text. Use italics formatting sparingly.
Formats characters to display only in the top half of a line, e.g. for abbreviations or powers.
Formats characters to display only in the bottom half of a line.
5. Add link
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.
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).
Bulleted list example
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 (#14) 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):
Numbered list example
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.
Animation of changing between numbered vs. filtered list
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.
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
Heading and subheading examples
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.
Heading formatting and spacing
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.
Special character selection tool
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.
Allows you to see your content’s formatting source code (HTML).