BASIC FORMATTING

The What-You-See-Is-What-You-Get (WYSIWYG) text editor gives you the ability to format your content and add links/media. This text editor is available on most text areas around the site.

Basic Site Images

With the WYSIWYG text editor, it is easy to style your text with the bold, italic, strike-through, superscript, subscript options.

Special Characters and Horizontal Rules

Additionally, you can insert special characters, and horizontal rules.

In most cases, the easiest way to change the text style is to select the text first and then to select one or more of the buttons on the editor toolbar. These can be used in conjunction with each other or other buttons on the toolbar.

Remove Format

You can quickly remove all formatting from highlighted text using the “Remove Format” button.

LISTS

Lists

There are two types of lists you can create. Unordered (bullet points) and ordered (numbered).

To create a list, click on one of the list buttons. This will insert the first list item and you can start typing. For each additional item, press Return/Enter on your keyboard.

If you want to add another line to the same list item, press Shift+Return/Enter.

Indent

Additionally you can increase and decrease the indentation of the list.

To break out of the list and continue with other content, press Return/Enter twice.

LINKS

Link

Links to internal or external paths can be added with the link button. A separate configuration window will load.

You can edit an existing link by placing the cursor on the link and clicking the link button.

Unlink

Links can also be removed easily with the “Unlink” button. 

URL: Add the link’s connecting URL. Start typing to find content

Title: Add a name that populates the title attribute of the link, usually shown as a small tooltip on hover

Upload a file: Allows you to add a file that doesn’t already exist on the site. Insert a name and browse to find a file from your computer

Advanced: Provides additional, though optional, configuration for the link. Configurations such as, CSS classes, ID, open in a new window button, and Relation (rel)

CHECKING FOR BROKEN LINKS

Free online tools that can check your website for broken links and links that redirect:

validator.w3.org (to check more than one page, check the box “Check linked documents recursively” and enter a number in the “recursion depth” field)

brokenlinkcheck.com

TABLES

table

A table is a structured set of data made up of of rows and columns (tabular data). A separate configuration window will load.

You can set initial row and column counts, designate the headers for the table and provide a table caption.

Note: Though not required, a caption is strongly recommended to provide an overall description of the data found in the table.

After initializing the table, you can enter data and/or right-click on the table to add additional rows/columns or edit table properties.

STYLES

Styles

Using the “Block Styles” drop-down, you can add paragraph styles within your content. The paragraph style will be applied to the current line/paragraph. Hit Enter/Return to break out and return to to the normal format.

HEADINGS

Using the “Paragraph Format” drop-down, you can add headings within your content. The heading will be applied to the current line/paragraph. Hit Enter/Return to break out and return to the normal format.

Format

It is important for accessibility and usability that headings are used sequentially and not for style purposes.

ALIGNMENT

Alignment

There are three options for text alignment. Left, center and right. Text is left-aligned by default. The alignment will continue until the next line break similar to headings.

BLOCKQUOTES

blockquote

A blockquote element defines a section of the webpage that is quoted from another source. The blockquote visually indicates that the text is a quote. 

MEDIA

Media

The “Media Entity Embed” button allows you to add new or existing images, audio files, social media or videos from a URL to your content. A separate configuration window will load.

You can configure the size, alignment of the media object as well as provide a caption. At anytime, to change configuration for a media object. Click the media object to select it followed by the media button up on the toolbar.

Note: Alignment does not always appear correct in the WYSIWYG editor, but the Preview button down at the bottom the page should render the object accurately.

View more on our Media Documentation

SHOW BORDERS

Show borders

This button will display borders around container HTML elements like paragraphs and divisions.

SOURCE

You can look under the hood at anytime to see the markup for the content. If you know your stuff you can write your own HTML staying within the restrictions of the filtered_html format.

Source

You can see the available HTML tags/options on your site at /filter/tips.

HTML that is not allowed will be stripped out before rendering to site visitors.

MAXIMIZE

Maximize

This button will expand the text editor to use the full screen. This is helpful for distraction free writing, or working with a lot of content at once.

ALLOWED CLASSES

To extend formatting of content within the WYSIWYG, certain HTML classes are allowed on the following elements: a, blockquote, p (text-align-* only), div, table, thead, tbody, tfoot, th, tr and td.

Some of those allowed classes are:

  • w-25, w-50, w-75, w-100: Element widths of 25%, 50%, 75% and 100%.
  • align-baseline, align-top, align-middle, align-bottom: Vertical alignment of inline and table cell elements.