Rich Text Editor Last Updated May 2025 Last Updated May 2025 On the Content Types and most of the Blocks types in Layout Builder you will find a “Body” field for using a Rich Text editor similar to the “What you see is what you get” (WYSIWYG) editor interface in Microsoft Word. Some text only fields do not have a Rich Text Editor but do allow a few HTML tags. The Title field of the page in the “Edit” tab can accept <sub> <sup> <cite> <em> <strong> and <abbr> tags. A common use case for adding HTML is for the title of a work of art or performance which should be tagged as a citation, E.g. Andrew Hinderaker’s <cite>Colossal</cite>. HTML tags <strong> and <em> may be used in some of the text only fields in Layout Builder Blocks. On this page: Tips Rich Text Editor Buttons Styles Drop-Down Additional tips can be found for Using any Rich Text Editor. Tips To avoid pasting in unnecessary or improper code, whenever possible compose your content directly in Drupal, using the Rich Text editor buttons to format. You can copy content from another program but it’s best to paste it as plain text. Use Title/Sentence case when entering text in the editor, even if it appears as all caps on the website. Designers decide when content should be all caps or styled differently. Once you enter text in all caps, the website cannot revert it to sentence case should we chose to change the design. Rich Text Editor Buttons Hover your mouse over the buttons to see a tool-tip text in a pop up describing the button. Lines and paragraphs are automatically recognized. The <br /> line break, <p> paragraph and </p> close paragraph tags are inserted automatically. Use the keyboard keys shift+return for a line break (single space) or return to create a paragraph break. Web page addresses and e-mail addresses, typed on the page, turn into links automatically. Formatting Format drop-down From the Format drop-down, you can turn your text into Headings. Headings need to be hierarchical and accurately represent the outline of the page, (Heading 2 should always precede heading 3 and so on. Never skip from heading 2 to heading 4.) Use lots of keywords in your headings to optimize for search engines. The page Title field is Heading 1, but may be replaced by the Hero 1 Heading Block on Layout Builder pages. Fields in Layout Builder Blocks may also display as headings. You can apply emphasis, strong, smaller, bigger and cite to headings. However, you also have a set of variation styles to apply in headings, which can be found in the Styles drop-down, learn more below. Styles drop-down Read more below about the variety of different styles and formatting options. Basic Functions Text Alignment – Left, Center or Right justify Ordered list (numbered), Unordered list (bulleted) Link – Tips for using the Link Button Media and URL embed. Use the Media button to upload media (images, documents, YouTube or Vimeo video links) to the Media Library or use the URL embed button to embed multimedia and other kinds of content from external websites, like YouTube, Vimeo, Spotify and SoundCloud. Learn more about Media (Images, Documents & Videos) Management. Horizontal rule Block quote . Superscript Subscript Editing Tools Remove formatting If anything ever goes wrong try selecting the area and removing the formatting. . Insert Table Read more about adding tabular data. Undo and Redo Source – View and edit the HTML code There are some features of the site that will require you to edit the source code. Check out the HTML page to learn about these features. If something is displaying odd, you may try reviewing the code to troubleshoot. Pasting sometimes cause issues with code. If so see how to paste as plain text to avoid pasting in unnecessary or improper code. Special characters drop-down Allows you to include characters such as umlauts and ampersands. If the language of your content changes please provide the proper language encoding. In most fields, including first and last name fields, it’s safe to simply type the keyboard command to insert common special characters but always check in numerous browsers. Choose Language drop-down The default language of our websites is English. If you need to include content in a foreign language, this wraps that content in an HTML lang tag to inform the browser and screen readers that the content is to be read and interpreted as a language other than English. Styles Drop-Down The drop-down has small demo boxes for each option. Variations for P (paragraphs) and H2-H6 (headings) – Each site is different. The Variation option may allow you to change the color, size or case. The goal is that you have enough options to expresses the desired prominence, grouping and hierarchy while accurately representing the outline of the page. Big Paragraph & Bigger Text –Makes the text between 125-140% bigger. Bigger Text is inline within a paragraph or on a heading. Big paragraph increases both the text size and the leading / line-spacing, to be used on a multi-line paragraph. Making the text bigger is visual only and has no semantic meaning. Smaller Text & Small Paragraph – Is the same as the Big options above but makes the text between 70-80% smaller. Side Comment – visually does the same thing as the Small options but has a semantic meaning indicating that the text is fine print, like a copyright or legal text. Cited work – Indicates semantically that the text is the title of a work, publication or performance. Eg.Hamlet. On most sites, it is visually represented as italic. Strong & Emphasis – To indicate importance, insert text with emphasis or strong, which will visually appear italic or bold. Emphasis and strong provide semantic guidance for the device displaying the content. For example, a screen reader will verbalize strength or emphasis. Learn the semantic differences that create italic and bold styled text. Visually Bold & Visually Italic – Use cases for these options are very uncommon. Only use these options if you really don’t want the text to have a semantic mean. Visually Hidden – Hide content from the visual display to provide more context to Google, screen readers, and other non-visual displays. There are a few uncommon uses cases. The most common is to help add Non-Visible Link Context. Span Clear Float – Whenever you have inserted an image that has Left or Right Image Alignment you should tell the text where to clear the floating or the image alignment may not always look correct on different size screens. Manual Hyphens – If you are not happy with the hyphenation of your text you may try this option. It requires 2 steps: First, selected the text which you would like to manipulate the hyphenation and apply this style from the Styles drop-down. Second, use the Source button to add the code entity for either of the following: a soft hyphen which will insert a visible hyphen if it falls at the line end, ­ or, ideal for email addresses, you can use a a zero width space which indicates where the word boundaries are, without actually displaying a visible space in the rendered text, ​ For example, in the text of an email: <a href=”mailto:admissions@austin.utexas.edu”> admissions@​austin.​utexas.​edu</a>
