How do I format content?

This article provides information on how to format content primarily using the WYSIWYG editor, which stands for What You See Is What You Get. A WYSIWYG editor makes it easy to format content, including:

  • Changing alignment;
  • Inserting images;
  • Adding bullets or numbered lists;
  • Adding pages;
  • Creating tables;
  • Adding links;
  • Changing the color of text;
  • and more.

You can also access the html source through the WYSIWYG.

The WYSIWYG editor is available throughout the ePublishing system.

You may also format content using html, including adding paragraph tags (<p>), line breaks (<br>), formatting (<b>, <i>, <u>) and other more advanced html.

To format content in the WYSIWYG editor, follow these steps:

1. Open the WYSIWYG editor in the section you wish to format.

In this example, we will edit the body of an article.

2. This will open the WYSIWYG editor.

2.1. You may type your content directly into the editor.

2.2. To paste your content from Microsoft Word, click on the Word icon at the top of the editor.

To paste your content from Microsoft Word, click on the Word icon at the top of the editor.

For best results, use this icon instead of pasting directly from Word into the body of the WYSIWYG. This will ensure that any formatting translates from Word. When you click the Word icon, a pop-up box will appear with further direction.

2.3. You may also copy and paste your content using the Paste as Plain Text tool in the editor.

You may also copy and paste your content using the Paste as Plain Text tool in the editor.

When pasting as plain text, the content will default to your website style. All hyperlinks or other formatting may be lost.

3. For the most commonly used formatting, use the below circled buttons in the WYSIWYG toolbar.

Highlight the text you want to apply formatting to, and click the icon. For example, if you'd like to make a word bold, highlight that word and click the B icon in the tool.

4. To cut, copy or paste within the content:

5. To add a hyperlink, highlight text and click on the link icon.

  1. Highlight your text or click on an image that you want linked.
  2. Select the link icon.
  3. In the Link window, paste your URL.

5.1. Click on Target to set where you'd like the link to open.

Click on Target to set where you'd like the link to open.
  • If you'd like the link to open in the same window as the content, choose <not set>, which is the default, or Same Window (_self).
  • If you'd like the link to open in a new window, select New Window (_blank).
  • If you'd like it to open in a window that pops up, select <popup window>.

Click OK.

6. Add an image by clicking on the Image icon in the WYSIWYG.

Add an image by clicking on the Image icon in the WYSIWYG.

For more details on adding images or other media to your content, view our article on How to Use the Media Manager or How to Use the WYSIWYG.

6.1. Select Browse Server.

Select Browse Server.

6.2. Select the image.

To import a new image into your Media Manager, click New File in the top right of the Media Manager. If you'd like your New File in a specific folder, click on that folder first or select New Folder in the top right of the Media Manager to create a new directory.

6.3. Scroll to the bottom of the image properties, and click on Select.

6.4. Adjust the settings for your image and click OK.

Adjust the settings for your image and click OK.

You may adjust the alignment, the padding around the image (hspace/vspace) or add a border. Add alternative text (alt text) to improve SEO. If the photo is aligned left or right, text will wrap around it.

7. To create a table, click the table icon.

To create a table, click the table icon.
  1. Set the number of rows and columns in your table.
  2. Adjust the width and height by pixels or percent.
  3. Determine if you'd like the first row or column to be considered a "header."
  4. Determine the preferred alignment for the table. If you set it as left or right, text will wrap around it. If alignment is not set, it will default left with no text wrap.
  5. Set cell spacing and padding.
  6. If desired, add a caption or summary for your table. The caption will appear at the top of your table.

 

8. To change the color of your text, highlight it and click on the text color icon.

To change the color of your text, highlight it and click on the text color icon.

8.1. To highlight your text, click on the neighboring icon.

To highlight your text, click on the neighboring icon.

9. Additional frequently-used formatting you can perform using the WYSIWYG:

Additional frequently-used formatting you can perform using the WYSIWYG:
  1. Remove all formatting.
  2. Indent the highlighted text.
  3. Add a quote (will be indented).
  4. Add an anchor link within the same content.
  5. Add a horizontal line.
  6. Add a special character. For example, copyright, trademark or an accented letter.
  7. Add pagination to your article. Click where you'd like the second page to start and select this icon. You may also add pagination after you exit the WYSIWYG edior.

10. To edit the html source, click the source icon.

To edit the html source, click the source icon.

You may also edit html directly in the body of the content after exiting the WYSIWYG editor.

11. When you have completed formatting in the WYSIWYG, click Commit Changes.