Using the Rich Text Editor

What is the Rich Text Editor?

The Rich Text Editor is a WYSIWYG (What You See Is What You Get) editor that works much like a word processor. When editing a Rich Text/HTML content item, it will allow you to easily add and format text, images, and tables. To make advanced customizations, you can even switch to the Source mode to view the underlying HTML code.

Example of the rich text editor


Rich Text Editor features

Click on a feature in the list below to learn more about it.


Styles

The Styles menu allows you to apply several different built-in styles to your text, such as Computer Code or Keyboard Phrase.

  1. Highlight the text you want to format, then select the style you want from the Styles dropdown. Each option in the list will appear using that style, so you can preview how it looks.

Styles are grouped into two main categories:

  • Block Styles: if you select one of these, they will be applied to the entire paragraph.
  • Inline Styles: these can be applied to individual words within a line of text.

Styles menu

 Back to top


Paragraph formats

The Paragraph Format menu allows you to format selected paragraphs as headings, normal text, or formatted text.

  1. Select the paragraph(s) you want to format, then select the format you want from the Paragraph Format dropdown (this will display "Normal" by default). Each option in the list will appear using that format, so you can preview how it looks.

In most cases, "Normal" is the best format for general rich text, while "Formatted" is best when you need to present multiple lines of plain text (such as a block of code, for example).

Paragraph formats menu

 Headings and accessibility

Although headings do have their own styles, which can help visually organize content on the page, they also play a critical role in helping users of screen readers navigate the content on your page.

When using the default page templates in LibGuides, the page heading will be set to <h1> and box headings set to <h2>. To help ensure headings used in Rich Text/HTML content follow the correct hierarchy, Admins of CMS systems have the ability to hide the Heading 1 and Heading 2 options from the Paragraph Formats menu.

As a general rule, don't use headings just to make text appear bigger. Instead, increase the font size and/or apply other formatting. For more detailed info on using headings, check out WebAIM and the WAI Web Accessibility Tutorials.

 Back to top


Fonts

The Font menu allows you to change the font style of your text, while the Font Size menu allows you to resize your text. Several of the most common fonts are available, including Arial, Courier New, Tahoma, and Times New Roman.

  1. Select the text you want to format, then select the font style you want to apply from the Font menu. The default font style in LibGuides is Arial.
  2. Use the Font Size menu to select the size of your text (this menu will display the current font size). The default font size in LibGuides is 12px.

Fonts menu

 Back to top


Text colors

The Rich Text Editor allows you to customize both the text color and background color of selected text. 

  1. To change the color of your text, select the text you want to format. Then, click on the Text Color button and choose the color to apply.
  2. To change the background color of your text (to make it look highlighted), select the text you want to format. Then, click on the Background Color button and choose the color to apply.

Text Color menu

 Colors and accessibility

When customizing text colors, always be mindful of the contrast ratio of the foreground and background colors. If the contrast between two colors is too small, then it may be hard for some users to read. 

For help selecting accessible colors, check out the free WebAIM Color Contrast Checker. This tool allows you to check if your colors are accessible and, if they're not, adjust the colors until you achieve an optimal contrast ratio.

 Back to top


Bold, italic, and strikethrough formatting

  1. To make text bold, select the text and click on the Bold button (it appears as the letter B).
  2. To italicize text, select it and click on the Italic button (it appears as an italic letter I).
  3. To strike through text, select it and click on the Strikethrough button (it appears as a struckthrough letter S).
Bold, Italic, and Strikethrough options

 

 Back to top


Remove text formatting

  1. If you ever need to return text to its default formatting, click on the Remove Format button (it appears as an italic letter T followed by a subscript letter X). This is especially helpful if you pasted text into the Rich Text Editor and are having difficulty changing its styles. When you click this button, it will clear the following formats:
    • Font style
    • Font size
    • Text and background colors
    • Bold, italic, and strikethrough formats
    • Paragraph alignment and indentation

Remove Format option

 Back to top


Copy, cut, and paste text

  1. To cut text, select it and click on the Cut () button.
  2. To copy text, select it and click on the Copy () button.
  3. To paste the contents of your clipboard retaining its original formatting, select it and click on the Paste button ().
  4. To paste the contents of your clipboard as plain text (no formatting), click on the Paste as Plain Text button (it's the clipboard icon with a T in it).
  5. To paste the contents of your clipboard as rich text, click on the Paste from Word button (it's the clipboard icon with a W in it).

Options to cut, copy, and paste

 CAUTION: Pasting content from Word or other webpages
  1. Pasting from Microsoft Word or other websites: content copied from Word or other websites will almost always include a mix of extraneous HTML tags and inline CSS styles. This can conflict with the default page styles, while also making it difficult for you to style the text yourself. 
    • To avoid any issues, please use the Paste from Word button in the Rich Text Editor (it's the clipboard icon with a W in it).
    • This will paste the text using the Rich Text Editor's styles.
  2. Pasting only the copied text: if you only want to paste text without retaining any original formatting, then use the Paste as Plain Text button (it's the clipboard icon with a T in it).
    • This will strip out all of the copied formatting, leaving only the text.
    • Often times, this yields the best results, as you can then use the Rich Text Editor to apply formatting to the text yourself.
  3. Pasting images: we do not recommend pasting images into Rich Text/HTML content items.
    • If the content was copied from another webpage, the image will be added using its original URL. As a result, if the original image is taken down for any reason, you'll end up with a broken image in your guide.
    • Instead, please upload the image to your Image Manager library, then insert it using the Rich Text Editor.

Options for pasting text and inserting images

 Back to top


Undo and redo changes

  1. To revert your most recent changes, click on the Undo () button.
  2. Undo one too many times? You can undo your undo by clicking the Redo () button.

Undo and Redo options

 Back to top


Paragraph alignment

  1. To align text to the left margin, select the text and click on the Align Left () button. This is the default alignment.
  2. To center text, select the text and click on the Center () button.
  3. To align text to the right margin, select the text and click on the Align Right () button.
  4. To justify text, select the text and click on the Justify () button.

Left align, center, right align, and justify options

 Back to top


Numbered and bulleted lists

  1. To insert a numbered list, click on the Insert/Remove Numbered List () button.
    • To convert existing text to a numbered list, select the text and then click the Insert/Remove Numbered List button.
    • To remove items from a list, select the text and then click the Insert/Remove Numbered List button.
    • To configure a list's starting number and type, right click any of the list items and select Numbered List Properties.
  2. To insert a bulleted list, click on the Insert/Remove Bulleted List () button.
    • To convert existing text to a bulleted list, select the text and then click the Insert/Remove Bulleted List button.
    • To remove items from a list, select the text and then click the Insert/Remove Bulleted List button.
    • To configure a list's bullet type, right click any of the list items and select Bulleted List Properties.

Numbered and bulleted list options

 Back to top


Indenting paragraphs and list items

  1. To decrease the indentation of text or a list item (i.e. shift it left), select it and click on the Decrease Indent () button.
  2. To increase the indentation of text or a list item (i.e. shift it right), select it and click on the Increase Indent () button.

Decrease and increase indent options

 Hanging indentation

When adding citations to a guide, hanging indents are necessary to follow certain style manuals. Although hanging indents are not native to HTML and CSS styles, there is a workaround.

  1. Go to Admin > Look & Feel > Custom JS/CSS (note: only an Admin can do this step).
  2. Add the following CSS code:
    <style>
    .hangingindent {
      padding-left: 22px ;
      text-indent: -22px ;
    }
    </style>
  3. Next, edit your guide and locate the box with your citations in it.
  4. Edit that rich text content item, then click on the Source button in the Rich Text Editor. This will display the underlying HTML code.
  5. If each citation is in its own <p><p> (paragraph) element, add class="hangingindent" inside the first <p> tag, like so:
    ‚Äč<p class="hangingindent">
  6. If there is a style attribute inside of that <p> tag (e.g. style="margin-left: 5px"), you may want to remove it to ensure this displays well.
  7. Save your changes.

 Back to top


Quotations

If you want to include a quotation in your Rich Text/HTML content item, you can apply some special formatting to help it stand out from the rest of your text.

  1. Select the text you want to format, then click on the Block Quote () button. This will format the text in a <blockquote> element, which will make it appear indenting with a gray border along the left margin.

The following is an example of text in a block quote:

The block quote format applies to entire paragraphs, so you cannot use it for inline quotations.

You can apply this formatting to multiple paragraphs to format longer quotations.

Block quote option

 Back to top


You can easily turn text into clickable links using the Rich Text Editor. (Please note: links added to your Rich Text are not able to be tracked in your LibGuides Assets statistics. If you want to track click stats on a link, consider adding a link asset to your page instead.)

  1. To add or edit linked text, highlight the text and click on the Link button (you can also edit an existing link by right-clicking it and selecting Edit Link). There are three types of links you can create:
    • URL: enter the full URL of the webpage you want to link to. Use the options under the Target tab to if you want to customize the window target (e.g. current window or new window).
    • Link to anchor in the text: if you inserted anchors into your Rich Text/HTML content item (more about these below), you can select one to link to.
    • E-mail: enter the email address you want to link to. You can also add an optional subject line and body text for the new messages, as well.
  2. To remove a link, place the cursor anywhere in the link and click the Unlink button (or right-click on the link and select Unlink). This will leave the text, but remove the hyperlink.
  3. To insert an anchor, place the cursor where you want the anchor to go and click the Anchor (flag) button.
    • You will then be prompted to give your anchor a unique name, which will allow you to create a link to that anchor.
    • Once you save your anchor, a red flag icon will appear next to it when editing the Rich Text/HTML content item.
    • Why use anchors? An anchor is essentially a placeholder allowing you to create a direct link to a specific section of a page.

Options to add links and anchors

 Linking to anchors in other Rich Text/HTML content items
  • To link to that anchor within the same Rich Text item, add a link like you normally would. Then, change the Link Type to "Link to anchor in the text" and select your anchor from the list.
  • To link to that anchor from within a different Rich Text item, however, you need to do something a little different.
    1. Insert your anchor(s) where needed in your first Rich Text/HTML content item.
    2. When creating your link in the other rich text item, select "<other>" as the protocol.
    3. In the URL field, enter a # followed by the name of the anchor in your other box. For example, if you named your anchor "paragraph2", then you'd enter #paragraph2 as the URL.
    4. Save your changes.
  • To link to an anchor on a different page, enter the full URL of the page followed by a hash and the anchor's name. For example: https://yourlibrary.libguides.com/myguide/overview#anchorname

Linking to an anchor

 Back to top


Images

  1. To insert an image, place the cursor where you want the image to go and click on the Image () button.
  2. In the Image Properties window, click the Browse Server button.
  3. In the Image Manager window, select or upload a new image.
    1. To upload and insert a new image, click the Upload New Image. You can upload any JPG, JPEG, GIF, PNG, or ICO file up to 5MB in size.
    2. To insert an existing image, click on the Reuse this Image () icon under its thumbnail
  4. Back in the Image Properties window, you can customize the image using the options under the Image Info tab.
    1. URL: this contains the URL for your image from your Image Manager library.
    2. Alternative Text: we strongly recommend adding descriptive alternative text so that your image is accessible to users of screen readers.
    3. Width and Height: customize the dimensions of your image.
      • When the padlock icon is locked, entering a width or height will automatically calculate the other dimension so your image retains its aspect ratio.
      • You can click on the padlock icon to toggle the aspect ratio on/off.
      • To restore the default dimensions, click the Reset Size icon.
    4. Border: enter a value to apply a border around your image. The larger the value, the thicker the border.
    5. HSpace and VSpace: enter a value in these fields to apply a margin around the image.
      • Use the HSpace to apply a margin to the left and right sides.
      • Use the VSpace to apply a margin to the top and bottom.
    6. Alignment: use this to align the image to the left, right, or center of the Rich Text/HTML content item.
  5. If you would like your image to link to a URL, click on the Link tab.
    1. URL: enter the URL of the page you want to link to.
    2. Target: select whether to open the link in the current window or a new window.
  6. Click OK to insert the image.
  7. Save the changes to your Rich Text/HTML content item.
Editing an existing image

To edit an image you've already added to your Rich Text/HTML content item, simply right-click on it and select Image Properties.

Clicking the Image button in the rich text editor

Clicking the Browse Server button

Image Manager library

Customizing an image's properties

 Back to top


Tables

The Rich Text Editor includes a table builder, which makes it easy to create and manage tables in your guides. Tables are best used to organize and present data and information, rather than for laying out content. Try to avoid using tables as a way to create columns inside of a box. Instead, consider using the Bootstrap grid system or a CSS grid.  

  1. To insert a table, place the cursor where you want the table to go and click on the Table () button.
  2. In the Table Properties window, use the options under the Table Properties tab to customize your table.
    1. Rows: enter the number of rows you want to add (you can also add more rows later).
    2. Columns: enter the number of columns you want to add (you can also add more columns later).
    3. Headers: indicate whether the first row and/or first column of the table are headers. 
    4. Caption: enter an optional caption for your table. This will display above the table in a <caption> element and can assist with making your table accessible.
      • For more info on creating accessible tables, check out WebAIM.
    5. Summary: enter an optional summary for your table (this will be included in the <table> element's summary attribute).
    6. Class: select one of the many available CSS classes to apply to your table. Each class makes it easy to apply built-in styles to your table without any extra CSS code.
  3. Optionally, you can adjust the options under the Legacy Properties tab to fine-tune your table's styles. However, fore best results, we strongly recommend you use the available CSS classes instead.
  4. Click the OK button to insert the table.
  5. Save the changes to your Rich Text/HTML content item.

Clicking the Table button

Editing the Table Properties

 Editing an existing table
  1. To edit an existing table, right-click on a table cell and select from the available options.
    1. Cell: these options allow you to insert, delete, merge, and split cells. You can also select Cell Properties, which allows you to customize things such as the height, alignment, and background color.
    2. Row: these options allow you to insert and delete rows.
    3. Column: these options allow you to insert and delete columns.
    4. Delete Table: this will completely delete the table and its contents.
    5. Table Properties: this will allow you to adjust the initial table properties, such as the headers, caption, and class.

Right-clicking to view table options

 Back to top


Horizontal lines

Horizontal lines (aka horizontal rules) can help visually separate sections of text in your Rich Text/HTML content items.

  1. To insert a horizontal line, position the cursor where you want it to go and click the Insert Horizontal Line button. This will insert an <hr> element into your Rich Text/HTML content.

Inserting a horizontal line

 Back to top


Special characters

To insert special characters into your text, such as symbols or accented letters:

  1. Position your cursor where you want to place the character and click the Insert Special Character (Ω) button.
  2. Select the character you want to insert from the table.

Clicking the Insert Special Character button

Selecting a special character

 Back to top


Full screen mode

  1. To give yourself more screen space to work on your content, click on the Maximize () button.
    • This will expand the text editor to fill the entire browser window.
    • Click the button again to return the editor to its default size.

Clicking the Maximize button

 Back to top


Spell checker

The Rich Text Editor has a built-in spell checker, which checks for correct spelling as you type (referred to as SCAYT: Spell Check As You Type). Enabled by default, the spell checker will underline potentially misspelled words in red.

  1. Right-click on an underlined word to view suggestions, ignore the word, or add the word to the dictionary. (Note: added words are only remembered for the current session. Once you close the window, the dictionary will reset.)
  2. To disable or configure the spell checker, click on the Spell Checker button.
    1. Disable SCAYT: this will turn off the spell checker until you close the text editor window.
    2. Options: this will allow you to ignore certain words, such as those in all-caps or with numbers. These settings will only be applied until you close the text editor window.
    3. Languages: select which language dictionary to use. This will only apply until you close the text editor window.
    4. Dictionaries: this option is for creating personal dictionaries, but is not currently supported.
    5. Check Spelling: this allows you to manually check spelling in your text (for example, if you previously disabled SCAYT). It also provides you with a thesaurus you can use, as well.

Spell checker options

 Back to top


Source code view

In addition to using the WYSIWYG (What You See Is What You Get) functionality of the Rich Text Editor, you also have the ability to view and edit the underlying HTML code. This can be helpful for power-users who want to fine tune HTML attributes, add elements, or customize styles directly.

  1. To toggle between the WYSIWYG and HTML views, click on the Source button.

Clicking the Source button

 Be careful when adding and editing HTML code

The Source view of the Rich Text Editor is best used for modifying the layout and styles of your text. For example, you could add things like <div> elements or class attributes. As you can imagine, this is a very powerful tool.

However, editing the HTML code isn't without its risks. Before making any changes, please consider the following:

  • Proofread your code before saving. Unclosed elements (e.g. an <iframe> without a closing </iframe> tag) or attributes could prevent your guide from loading correctly. 
  • Avoid embedding widgets in Rich Text/HTML content items. We strongly recommend embedding things like YouTube videos, search boxes, or other widgets using Media/Widget assets. If something in the widget's code causes issues with your page, this will allow you to edit or remove the widget by going to Content > Assets. You do not have this luxury with Rich Text/HTML content items, since they are not added to your assets library.
  • Do not add jQuery calls. If you must embed code inside of a Rich Text/HTML content item, be on the lookout for widgets that include <script> elements loading some version of the jquery.min.js file. Because LibGuides already loads jQuery on every page, loading a duplicate version will create a conflict that causes jQuery-powered elements (like page menus and tabbed boxes) from working. Be sure to remove these from your code before saving.

If you encounter issues after saving HTML code, please contact Springy Support for help restoring your guide.

 Back to top

Related Articles