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.
This resource covers each tool in the rich text editor. In the image, each tool is numbered from 1 to 16. Refer to the list below to learn what each does.
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.
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.
Important: Don’t use this to link to documents. If you need to link to documents, use the “Insert link to document” tool (#6).
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). Good example: Learn more about wild turkeys. Bad example: Click here.
Remove an inline link. Does not delete the text itself.
Use this tool to link to a file. Need help? Here’s a resource on using the "Insert link to document" tool.
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.
Important: 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.
Create a list in which each item is marked with a number. After you hit “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):
Important: Copying and pasting numbered 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 numbered list in the Mass.gov rich text editor.
Use the Block Quote tool if you need to include a direct quotation from another source that is longer than 40 words. Block quotes will have narrower (indented) margins than the rest of the content on the page. Use block quotes sparingly.
Add an image to your content. Read a step-by-step resource about how to embed images.
Create a table. After you create an empty table, use “tab” to navigate between cells. Read a resource on creating clear, accessible tables.
Important: 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.
This tool allows you to add headings 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: Heading formatting isn’t just about about how text looks. They also imply connections between content. For example, titling a section with Heading 3 will imply that it is a subsection of an earlier Heading 2.
For this reason, take care not to “bounce around” with your heading levels: Don’t go from heading 2 to 5 to 3 to 4. This will be especially confusing for users who use screen readers to access your content, since when users cycle through headings, screen readers actually “read aloud” heading levels. Imagine how confusing the user experience would be if headings didn’t follow in logical, numerical order.
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.
Maximize the 'Overview' box for a full screen view. Click the tool again to revert back to the original size.
Allows you to insert characters you might not find on your keyboard, including letters with accents, fractions, and arrows.
Gets rid of any formatting that’s been applied to your text. This is useful for cutting out formatting that’s hitched a ride when you copy/paste, or changing formatted text that’s giving you trouble.
Allows you to see your content’s formatting source code.