Editing Content Using the WYSIWYG Editor in dotCMS

The WYSIWYG Editor allows you to enter/format text, images, and videos in a way that resembles how the content will appear on the website. Many content types, such as Events or Articles, contain a WYSIWYG Editor for entering the bulk of the information.

The 34 tools available in the WYSIWYG Editor are broken into eight categories including:

  1. Basic Commands: Undo, Redo, Cut, Copy, Paste, Paste as Text
  2. Text Styles: Bold, Italic, Underline, Strike-through
  3. Alignment: Align Left, Align Center, Align Right, Justify
  4. Lists and Indents: Bulleted List, Numbered List, Increase Indent, Decrease Indent
  5. Text Formatting: Headings/Paragraph, Font Size, Text Color, Clear Formatting
  6. Tables and Characters: Horizontal Line, Tables, Special Characters
  7. Links and Multimedia:
    1. Create/Edit Link
    2. Remove Link
    3. Anchor Link
    4. Insert/Edit Image
    5. Insert YouTube Video
  8. Resource Commands: Find/Replace, Spell Check, Source Code, Full Screen

''

Basic Commands

''

  1. Undo: Erases the last change applied to the document. (Control/Command + Z)
  2. Redo: Reverses the undo command and re-applies the last change to the document. (Control/Command + Shift + Z)
  3. Cut: Removes any selected text/images while placing the removed content on the clipboard to be pasted in another location. (Control/Command + X)
  4. Copy: Places the selected text/images on the clipboard to be pasted in another location. (Control/Command + C)
  5. Paste: Allows you to insert information from the clipboard into the editor. (Control/Command + V)
  6. Paste as Text: Allows you to insert text from the clipboard into the editor while also removing any formatting.
    NOTE: This option is enabled by default and should not be disabled.

 

 

Text Styles

''

The following four text styles are available in the WYSIWYG Editor to add basic formatting to your text:

  1. Bold (Control/Command + B)
  2. Italic (Control/Command + I)
  3. Underline (Control/Command + U)
  4. Strike-through

Accessibility Quick Tip: It is recommended that you use more than only color to denote emphasis in text content such as using a text style or including a symbol like an asterisk.

NOTE: Holding the Shift key while pressing the Enter key will move the cursor directly to the next line without skipping lines/creating a new paragraph.

 

Alignment

 ''

  1. Left Align: Aligns the left side of the text evenly, leaving the right side ragged.
  2. Center Align: Aligns the text along a center line, leaving both right and left sides ragged.
  3. Right Align: Aligns the right side of the text evenly, leaving the left side ragged.
  4. Justify: Aligns text evenly on both the right and left sides by adjusting the spacing between words on each line of text.

 

 

Lists and Indents

''

  1. Bulleted List: Creates an unordered list.
  2. Numbered List: Creates an ordered list.
  3. Increase Indent: Increases the indentation of lists or text.
  4. Decrease Indent: Decreases the indentation of lists or text.

Accessibility Quick Tip: It is recommended that groups of similar information be formatted using the bulleted or numbered list features whenever possible as this allows assistive technologies to recognize list structure.

 

Text Formatting:

''

  1. Headings/Paragraph

    Changes the text to the selected Heading Level. Formatting for each Heading Level is determined by the site design. Common usages include:
    • Body Text: Paragraph
    • Page Title: Heading 1 (Automatic)
    • Content Type Title: Heading 2 (Automatic)
    • Sub-Titles: Heading 3 (Determined by User)

      Accessibility Quick Tip: Heading Levels should be nested in a similar manner as the levels of an outline. It is highly recommended that you use the Heading Levels available in the drop-down menu as opposed to using text styles like Bold or Color as assistive technologies will not recognize text styles as Headings.

  2. Font Size

    Changes the text to the size selected in the drop-down menu.

    Accessibility Quick Tip: It is not recommended that you change text size unless absolutely necessary as this may affect how text is able to be resized on a device.

  3. Text Color

    Changes the text to the color selected. Pre-determined color options are available as well as the ability to select a custom color option.

    Accessibility Quick Tip: All text color needs to have a strong contrast against the page background in order to be accessible.

  4. Clear Formatting

    Removes ALL formatting from the selected text including bold, italic, and underline.

    NOTE: This option is ideal for text pasted from another program which may transfer undesirable colors, sizes, fonts, etc. All text styles, such as bold or italic, should be added only AFTER using this tool.

 

Tables and Characters

''

Horizontal Line and Special Characters

  • Horizontal Line: Creates a horizontal line in the text.
  • Special Characters: Opens a menu allowing you to select from the available special characters such as a letter with an accent or a copyright symbol.

 

Tables

Creates a data table with the number of columns and rows selected.

Accessibility Quick Tip: Tables should be used for displaying data only. Tables should never be used for page layout purposes.

To enter a data table using the WYSIWYG Editor:

  1. Select the Table Icon from the toolbar.
  2. Select Insert Table.
  3. Using the Grid, select the number of Columns and Rows.
    ''

  4. Highlight the Header Row of the Table.
  5. Select the Table Icon from the toolbar.
  6. Select Row.
  7. Select Row Properties.
    ''

  8. Select Header from the Row Type drop-down menu.
  9. Select Ok.
    ''

  10. Enter content into the appropriate cells.

 

Links and Multimedia: Create/Edit Link

Creates a link to a URL or a document uploaded to the CMS.

Accessibility Quick Tip: All links should have descriptive link text such as “Michigan State University” to link to the MSU home page.

Accessibility Quick Tip: Avoid using language such as “Click Here” or references to shape, size, or position as these may change in a responsive website or for someone using an assistive technology.

To create a link to a document using the WYSIWYG Editor:

  1. Highlight the descriptive text you would like to make into a link.
  2. Select the Link Icon from the toolbar.
  3. Select the Search Folder icon.
    NOTE: If you are linking to a website, paste the URL into the URL box and select Ok.
    ''

  4. Select the Plus Sign next to www.canr.msu.edu.
  5. Select the Plus Sign next to the name of the site you are working in.
  6. Select the Plus Sign next to the Uploads Folder.
  7. Select the Files Folder within the Uploads Folder.
  8. Select the Upload New File button.
    ''

  9. Click the Select file(s) to Upload button.
  10. Navigate to the file and select it.
  11. Select Save and Publish.
    NOTE: It is important to ALWAYS select Save and Publish. If you only select Save, you will have a broken link.
    ''

  12. Select the File Name you uploaded.
    NOTE: It is recommended that you DO NOT use the “open in new window” option from the Target drop-down menu as this is not accessible.
  13. Select Ok.
    ''

 

 

Links and Multimedia: Remove Link

''Removes the link to a URL or document leaving only the text.

 

 

 

Links and Multimedia: Anchor Link

Creates a link to a specified place within an existing page on your website.

To create an anchor link using the WYSIWYG Editor:

  1. Place your Cursor at the beginning of a line of text you wish to link to.
  2. Select the Anchor Link Icon from the toolbar.
  3. Enter a Unique Title for the anchor.
  4. Select Ok.
    ''

  5. Highlight the text you wish to link to the anchor.
  6. Select the Link Icon.
  7. Select the Anchor Title from the Anchor drop-down menu.
  8. Select Ok.
    ''

 

Links and Multimedia: Insert Image

Inserts an uploaded image into the text within the WYSIWYG Editor.

Accessibility Quick Tip: Images of text are generally not considered accessible unless the image is a logo. If you cannot remove the text from the image, it is recommended that you include the text from the image in the body text as well.

To insert an image using the WYSIWYG Editor:

  1. Select the Insert Image icon from the toolbar.
    NOTE: It is recommended that images are placed on a separate line rather than next to text as this may affect how content displays on mobile devices.

  2. Select the Search Folder icon.
    ''

  3. Select the Plus Sign next to www.canr.msu.edu.
  4. Select the Plus Sign next to the name of the site you are working in.
  5. Select the Plus Sign next to the Uploads Folder.
  6. Select the Images Folder within the Uploads Folder.
  7. Select the Upload New File button.
    ''

  8. Click the Select file(s) to Upload button.
  9. Navigate to the file and select it.
  10. Select Save and Publish.
    ''

  11. Select the Image you uploaded.
  12. Enter a Short Text Description of the image in the Image Description field.
    Accessibility Quick Tip: The Image Description field must be completed for all images within the WYSIWYG Editor. You do not need to include “Image of” as the assistive technology will notify the user that the content is an image.

  13. Select Ok.
    ''

 

Links and Multimedia: Insert YouTube Video

Inserts a YouTube video into the text within the WYSIWYG Editor.

Accessibility Quick Tip: A text alternative is required for all multimedia content such as a transcript for audio content or closed captioning for video content.

NOTE: This only works for videos on YouTube. If your video is on another platform (Vimeo, MediaSpace, etc.) you will need to use the Source Code icon to page the embed code for the video into the correct location in the HTML code.

To insert a YouTube video using the WYSIWYG Editor:

  1. Select the YouTube icon from the toolbar.
  2. Paste the URL or Embed Code of the YouTube video into the text box.
  3. Select Ok.
    ''

 

Resource Commands

''

  1. Find/Replace: Finds and/or replaces text entered into the search box.
  2. Spell Check: Checks for misspelled words within the entered text.
  3. Source Code: Opens a window with the HTML code for the content entered.
  4. Full Screen: Makes the WYSIWYG Editor take up the full window of the browser.

 

 

 

Did you find this article useful?

You Might Also Be Interested In

Tag List
  • all content types,
  • dotcms,
  • pages browser,
  • profile folders,
  • web team
Michigan State University
  • Spartans Will.
  • © Michigan State University

MSU is an affirmative-action, equal-opportunity employer, committed to achieving excellence through a diverse workforce and inclusive culture that encourages all people to reach their full potential.

Michigan State University Extension programs and materials are open to all without regard to race, color, national origin, gender, gender identity, religion, age, height, weight, disability, political beliefs, sexual orientation, marital status, family status or veteran status. Issued in furtherance of MSU Extension work, acts of May 8 and June 30, 1914, in cooperation with the U.S. Department of Agriculture. Quentin Tyler, Director, MSU Extension, East Lansing, MI 48824. This information is for educational purposes only. Reference to commercial products or trade names does not imply endorsement by MSU Extension or bias against those not mentioned.

The 4-H Name and Emblem have special protections from Congress, protected by code 18 USC 707.

We comply with the Federal Trade Commission 1998 Children’s Online Privacy Protection Act (COPPA).