WYSIWYG Content Options | Whitworth University

Using the WYSIWYG Editor

Several content types include HTML fields that use the TinyMCE WYSIWYG editor. This editor allows you to format text, add links, insert images, and more without writing HTML directly. For full documentation on TinyMCE within T4, refer to the T4 documentation.

Pasting Content

When pasting content from an external source such as a Word document, PDF, or another web page, use the Paste as text option from the Edit menu. This strips any hidden formatting or code from the source that could interfere with how the content displays on the published page.

Headings

Use headings hierarchically. Each page has one H1, which is always provided by the hero content type — do not add an H1 inside the editor. Structure your content starting from H2 for main sections, H3 for subsections within those, and so on. Do not skip heading levels going down (e.g. H2 to H5), though skipping upward is acceptable. Do not use bold text as a substitute for a heading — while it may look similar visually, it is not recognised as a heading by screen readers and other assistive technologies.

Links

Link text should clearly describe the destination. Avoid generic text like "Click here" or "Read more" — if this is unavoidable, use the title attribute in the link modal to provide additional context. To link to a PDF or media file, use the Insert from Media icon in the toolbar rather than highlighting text and adding a link manually — the link text is generated from the file name and can be edited by double-clicking it.

adding-title-attribute

Buttons

Button styles can be applied to any link in the editor using the button style dropdown in the toolbar. Select the link text, then choose one of the following styles from the dropdown:

Style	Description
Button	Solid filled button
Button Outline	Button with an outline and red background
Button Underline	Button with an underline style

To remove a button style from a link, select it and choose Remove Button Style from the same dropdown.

Images

To insert an image into the editor, click the Insert from Media icon in the toolbar and locate the image in the Media Library. Rather than clicking the image directly, choose Select with layout to control how the image is positioned within the content. Three layouts are available:

Layout	Description	Caption
Whitworth Image Full Width	Image displays at full width of the content area	Yes
Whitworth Image Floating Left	Image floats left, text flows around the right	Yes
Whitworth Image Floating Right	Image floats right, text flows around the left	Yes

To add a caption, double-click the image in the editor and enter the caption text. It will appear below the image on the published page.

Note that images inserted via the WYSIWYG editor do not use responsive image sourcesets — a single image at a fixed size is output for all screen sizes, so upload images at an appropriate resolution for their intended use.

Lists

Both unordered and ordered lists can be added using the toolbar. Lists can be nested, and links within lists will be styled appropriately. An unstyled list variant is also available for cases where the default bullet styling is not appropriate.

Tables

Tables can be inserted and edited directly in the editor. Keep tables simple and use them only for tabular data — not for layout purposes. A table header row should always be set to help screen readers interpret the data correctly.

Blockquotes

To highlight a paragraph as a pull quote or blockquote, select the text and apply Format > Formats > Blocks > Blockquote from the toolbar.

Examples using General Content

Find examples using the General Content content type of content options available when using the WYSIWYG editor (elements of type HTML).

Please note that for some content types that use a WYSIWYG editor not all the content options will be suitable e.g., there are content types where only basic text formatting and adding links is suitable.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, pri id wisi ullum assentior, eum ne saepe discere, vim suas appareat ut. Usu fugit ornatus eu, suavitate sadipscing interpretaris ut mei, ut duo mollis nusquam. Rationibus reprehendunt definitionem eam in, id iriure quaestio scribentur nec, simul complectitur mel eu. Ne nec quas nullam nominati, ad tritani quaestio expetenda eum, ne vix dicit quodsi. Ullum augue nostrud te vix. An per salutatus forensibus, modo reque epicuri ne mei. Ut eum molestie tincidunt. Sea omnes democritum interpretaris ut. Sea et nibh timeam. Qui eros sonet solet in, ut libris pericula eam.

Heading 2 H2 Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque et posuere massa, non mattis sem. Maecenas dui augue, consectetur ut consectetur et, tempor sed erat. Nunc condimentum diam vel tortor bibendum mollis. Donec vel tincidunt nisl. Donec mattis, quam et gravida suscipit, dui elit suscipit ex, a pretium ligula ex vel libero. Fusce vitae luctus est.

Heading 3 H3 Lorem ipsum dolor sit amet

H4 Heading 4 Lorem ipsum dolor sit amet

Heading 5 H5 Lorem ipsum dolor sit amet

Heading 6 H6 Lorem ipsum dolor sit amet

I am the a tag example

I am the abbr tag example

I am the strong tag example

I am the cite tag example

I am the code tag example

I am ~~the del tag~~ example

I am the dfn tag example

I am the em tag example

I am the ins tag example

I am the kbd tag example

I am the q tag example

I am the samp tag example

I am the small tag example

I am the span tag example

I am _{the sub tag} example

I am ^{the sup tag} example

I am the var tag example

I am the small tag example

Lists

Different types of lists can be added using the Toolbar.

List item that wraps around itself. At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.

A list item
- A nested list item
- A nested list item
- A nested list item
  - A nested list item
  - A nested list item
  - A nested list item
A list item
A list item
A list item
A list item

Ordered list

A list item
1. A nested list item
2. A nested list item
3. A nested list item
  1. A nested list item
  2. A nested list item
  3. A nested list item
A list item
A list item
A list item
A list item

Standard list of links:

An unstyled list of links:

A numbered list of links:

A list of long items:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Cras adipiscing enim eu turpis egestas.
Tortor pretium viverra suspendisse potenti nullam ac tortor vitae. Id leo in vitae turpis massa. Neque convallis a cras semper auctor neque vitae. Justo nec ultrices dui sapien eget mi proin sed libero. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim.
Netus et malesuada fames ac turpis egestas integer. Neque volutpat ac tincidunt vitae semper quis lectus nulla at. Aliquet sagittis id consectetur purus ut faucibus pulvinar. Odio euismod lacinia at quis. Amet est placerat in egestas erat imperdiet sed euismod nisi. Id volutpat lacus laoreet non curabitur gravida arcu ac. Sit amet consectetur adipiscing elit. Purus in mollis nunc sed id.

PDF Links

To add a link to a PDF, you cannot highlight text and add a link to the media item. Instead, the PDF must be selected from the Media Library (like an Image).

The text is automatically generated from the name of the PDF file, you can double-click the text to change it.

test.pdf

Styling as a button

Button styles can be applied to any link in the editor using the button style dropdown in the toolbar. Select the link text, then choose one of the following styles from the dropdown: See further examples of buttons below.

Default Button

Inverted Button

Underline Button

Tables

Tables can be added and edited in the WYSIWYG editor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec lectus massa. Fusce quis tincidunt neque, in laoreet justo. Nulla diam metus, iaculis et vestibulum non, facilisis eget nibh. Praesent aliquet augue in fermentum efficitur. In hac habitasse platea dictumst. Nulla congue dui dignissim erat rutrum ultricies. Suspendisse at faucibus mi.

#	First	Last	Handle
1	Mark	Otto	@mdo
2	Jacob	Thornton	@jthorn
3	Larry the Bird		@larry
1	Mark	Otto	@mdo
2	Jacob	Thornton	@jthorn
3	Larry the Bird		@larry

Larger Table

#	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading	Heading
1	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
2	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell
3	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell	Cell

Images

To add an image select the “Insert from Media” icon in the toolbar:

inline-image-1-insert-media

Find the image in the Media Library and either click it to add it with the default layout - which will display the image full-width or select the “Select with layout” option:

image-layout-select

Layout	Description	Caption
Whitworth Image Full Width	Image displays at full width of the content area	Yes
Whitworth Image Floating Left	Image floats left, text flows around the right	Yes
Whitworth Image Floating Right	Image floats right, text flows around the left	Yes

Captions

For layouts with an optional caption double-click the image in the WYSIWYG editor to add a caption that will display below the image.

Whitworth Image Full Width

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et mattis urna. Integer maximus dolor id sem tempus, non ultrices metus sagittis. Sed efficitur mi eget nulla faucibus gravida sit amet non erat. Integer in sem libero. Suspendisse ullamcorper massa tellus, tincidunt ultricies ex elementum a. Donec blandit diam sed nibh congue eleifend. Aliquam congue pharetra auctor. Curabitur dictum eleifend tellus a porta.

placeholder — Whitworth Image Full Width Caption

Aliquam erat volutpat. Aliquam placerat porttitor massa, non finibus enim rhoncus congue. Nam viverra tincidunt molestie. Donec vel tempor ante, ut posuere nisl. Proin et risus et arcu tincidunt vehicula. Aenean vitae dolor ut nibh tincidunt pretium. Vivamus venenatis diam semper, scelerisque tellus in, blandit est. Pellentesque varius sed tellus a sodales.

Nam vel vulputate arcu, at laoreet augue. In hac habitasse platea dictumst. Pellentesque hendrerit rutrum sem a varius. Vivamus condimentum orci non fermentum dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam cursus ullamcorper lacus, in vestibulum nisl fermentum quis. Vivamus a risus lorem. Quisque posuere vestibulum bibendum. Donec id mauris blandit, commodo erat eu, accumsan massa. Vivamus accumsan dolor non efficitur sodales. Nulla urna eros, imperdiet sed faucibus nec, lobortis faucibus sapien. Curabitur lobortis interdum libero, non imperdiet tortor tincidunt id. Cras nec ex sit amet felis fermentum laoreet eget iaculis felis. Integer non massa fermentum, rutrum elit sed, scelerisque purus. In eros ex, varius a cursus ut, venenatis quis massa.

Whitworth Image Floating Left

nicolas-caballero — Whitworth Image Floating Left Caption

Proin mollis quis elit id tincidunt. Duis diam nunc, tempor vitae velit luctus, scelerisque placerat odio. In hac habitasse platea dictumst. Pellentesque vitae magna a erat scelerisque consequat. Nullam ac ipsum gravida, gravida mi et, posuere enim. Etiam vitae arcu massa. Pellentesque a porta mauris. Sed velit sem, viverra nec facilisis non, pulvinar vitae neque. Phasellus malesuada venenatis aliquet.

Nunc et ligula lacinia massa varius commodo id ut neque. Sed molestie tortor odio, ut fermentum ligula ornare id. Donec sed turpis vel lacus hendrerit varius. Phasellus malesuada arcu eget risus viverra finibus. Donec maximus purus quis dignissim semper. Suspendisse enim erat, posuere nec massa elementum, pellentesque congue turpis. Praesent ullamcorper condimentum orci, in pellentesque quam placerat et. Maecenas a lacus non nulla gravida viverra maximus eget dui. Pellentesque nec odio fringilla, ultrices elit a, tincidunt lacus. Fusce lacinia, diam a lobortis molestie, quam risus tempor nunc, et convallis mi massa non dolor.

Suspendisse interdum metus velit, egestas rutrum eros commodo ac. Curabitur non odio iaculis, consequat ante viverra, gravida tortor. Aenean eleifend ultricies turpis non condimentum. Donec blandit purus id ligula convallis varius. Maecenas mi massa, ultrices ac quam eget, pulvinar commodo turpis. Nam mattis finibus lacus eget dapibus. Proin sed dolor feugiat, auctor nisi sed, egestas sem. Etiam vel erat et lorem laoreet lacinia iaculis ac libero. Vestibulum congue lorem eu risus ullamcorper varius. Nam hendrerit faucibus velit et eleifend. Sed ac consectetur lacus. Sed nunc erat, posuere vitae dapibus sollicitudin, lobortis ac enim. Morbi in quam vel nulla faucibus dignissim id varius nulla. Fusce nec nulla elit.

Whitworth Image Floating Right

grid3 — Whitworth Image Floating Right Caption