WYSIWYG Content Area

Text can be formatted using the options in the toolbar.

Paragraph format

The paragraph format options can be used to change the formatting of selected blocks of text.

Text formatted using <pre> tags

Link style

Hyperlinks are formatted as underlined text by default. There are also four preset button and Call-to-Action styles [Button (fill); Button (outline); Call to action (fill); Call to action (outline)], which can be applied using the option in the Link style dropdown list.

Color and font settings for the button and Call-to-Action styles can be configured in:

• Colour Management > Advanced > Widgets > Main WYSIWYG and Alternative WYSIWYG
• Font Management > Advanced > Widgets > Main WYSIWYG and Alternative WYSIWYG

Output on a Mosaic site: Link styled as a Button

To style a link as a button:

• highlight the link text
• select the 'Button' option from the Styles dropdown list

List style

Numbered and bulleted lists can be created using the List options in the toolbar.

Numbered and bullet list options in the WYSIWYG toolbar

Standard and additional styles exist for numbered and bullet lists.

Numbered list styles

Standard numbered list

Spacing between list items is the same as the spacing in the 'Single-spaced list' style:

1. Item one
2. Item two
3. Item three

Double-spaced list

Increased vertical space between list items:

1. Item one
2. Item two
3. Item three

One-column circle numbered list

1. Item one
2. Item two
3. Item three

Two-column circle numbered list

1. Item one
2. Item two
3. Item three
4. Item four

Bullet list styles

Standard bullet list

Spacing between list items is the same as the spacing in the 'Single-spaced list' style:

• List item
• List item
• List item

Horizontal bulletless list

List items are displayed horizontally on desktop viewport sizes, and displayed in a vertical list on mobile viewport sizes:

• List item
• List item
• List item

Double-spaced list

Increased vertical space between list items:

• List item
• List item
• List item

Link list styles

Intended for displaying a list of links. There are four variations of this list style (one-column; two-column; three-column; four-column). Each list item includes a right-pointing chevron, e.g.:

• List item
• List item
• List item
• List item
• List item

Bulletless list styles

There are four variations of this list style (1-column; 2-column; 3-column; 4-column). By default, each list item does not have a bullet-point, e.g.:

• List item
• List item
• List item
• List item

It is possible to add Font Awesome Icons to the list items in this list style, e.g: 

•  List item
•  List item
•  List item

Font and paragraph style

Font and paragraph styles can be applied using the options in the toolbar or shortcuts.

• Bold (Shortcut: Ctrl + B)
• Italic (Ctrl + I)
• Underline (Ctrl + U)
• Strikethrough
• Subscript
• Superscript
• Numbered list (see List style section above)
• Bullet-pointed list (see List style section above)
• Decrease indent
• Increase indent
• Blockquote
• Text alignment (Left; Centre; Right; Justify)

Links and anchors can be created, edited and removed using the link options in the toolbar.

The Remove Format option in the toolbar removes font styling from selected text.

Shortcut: Ctrl + space

The following formatting is removed when Remove Format is used:

• Bold
• Italic
• Underline
• Strikethrough
• Subscript
• Superscript
• Decrease indent
• Increase indent
• Text alignment (Centre; Right; Justify)
• style attributes applied to HTML elements
• classes applied to HTML elements
• inline styles applied using <span> tags
• Button style applied to hyperlinks

Select All

To remove formatting from all text content in the WYSIWYG, first click the Select All option in the toolbar, then click Remove Format.

Shortcut: Ctrl + A

Copy and Cut content

Use either the Copy and Cut tools in the WYSIWYG or use keyboard shortcuts:

• Copy (Shortcut: Ctrl + C)
• Cut (Ctrl + X)

Paste content

Pasting content into the WYSIWYG text editor requires keyboard shortcuts to be used:

• Paste (Ctrl + V)
• Paste as plain text (Ctrl + Shift + V)

Remove source styling from copied text

When text content is copied from a webpage or document, the text styles and formatting of the source content are also copied to the clipboard. If Paste (Ctrl + V) is used transfer copied text, the source styles and formatting are transferred to the WYSIWYG text editor. When this happens, these styles take precendence over the site's font settings (Font Management).

It is considered best practice to remove source styles from copied text when it is pasted into the text editor.

There are two methods to achieve this:

Paste as plain text

• Copy the text from the source webpage or document
• Go to the WYSIWYG text editor
• Paste the text into the text editor using Ctrl + Shift + V

The text content will be pasted into in the WYSIWYG text editor but all styling and HTML markup will be removed (i.e. all text will be formatted as Normal text).

Paste, then remove styling and maintain document structure

• Copy the text from the source webpage or document
• Go to the WYSIWYG text editor
• Paste the text into the text editor using Ctrl + V
• Highlight all of the text content using the Select All option in the toolbar or Ctrl + A
• Click the Remove Format option in the toolbar

This will remove all text styling but maintain the document's structure, i.e. the following document features will be maintained:

• headings
• body text
• bullet lists
• numbered lists
• anchor tags (e.g. hyperlinks)

Images and files can be embedded on pages using the WYSIWYG text editor.

Embed an image or link to a file

• Click the Insert Image or File tool
• Insert Image or File modal opens:
  
  
• Click on the 'Browse' link
• The Media browser opens:
  
  
• Choose image source:
  • Site Library: the site's image and file store
  • Upload: upload an image or file from a local source (e.g. from your computer's hard drive). Once uploaded, the image or file will be in the site's file store
  • Upload from Web: enter a URL to a file or media resource. Images and files will be copied to your site, embedded media will be embedded and pointed to on the source server. NB This method currently supports the embedding of content from the following media providers: Youtube, Deviantart, Facebook Post, Facebook Video, Flickr, Hulu, IFTTT, Instagram, Podbean, Revision3, Scribd, SlideShare, SmugMug, SoundCloud, Spotify, TED, Twitter, Ustream, Viddler, Vimeo.
• Select image or file, or upload one
• The Insert Image or File modal reloads, displaying the image or file preview:
  
  
• Click 'Next'
• The display options load:
  
  
• Add Link to URL as required (note not possible for images used for decoration only)
• For images, select a size option and alignment within the WYSIWYG, click 'Embed'
• For files, click 'Embed'

Remove an image or file link from a page

• In the WYSIWYG, double-click on the image or file link
• The a modal opens displaying options to edit or remove the item:
  
  
• Click 'Remove'

Update an image or file

The images and files in the site's file store can be updated independently to the embedded image or file link items in the text editor.

To update an image or file:

• Go to the file store (Manage Content > Files)
• Locate the image/file to be updated
• Enter the image/file's edit mode
• Use the 'Replace file' option to select a new file (from local storage) to replace the current file with
• After saving this change, embedded items referencing this image or file will now display the new image/file

To update the file preview text (i.e. the link text for a document):

• Go to the file store (Manage Content > Files)
• Locate the file to be updated
• Enter the file's edit mode
• Update the Name field
• After saving this change, embedded file links referencing this file will now display the updated text

Third-party content can be embedded into a WYSIWYG using three methods:

Embed using the 'Upload from Web' option in the 'Media browser'

This is the recommended method and details are provided in the section on Inserting Images and Links to files.

Embed using the iframe tool

Content services which make media available for embedding in iframes typically provide URLs for embedding content within iframes. There is an iframe tool in the 'Full HTML' toolbar to embed iframes using these URLs into the text editor.

Note: an embed URL is not the URL for the page the content is currently embedded on; the embed URL refers directly to the piece of content. Embed URLs must use https in order for the content to display on the page; see the Oxford Mosaic website for more information about https use on Mosaic.

To use the iframe tool to embed content:

• Place the cursor where the iframe should be inserted
• Click on the iframe tool
• The iFrame Properties modal opens:
  
  
• In the URL field, enter the URL for the content being embedded. Note: this is not the URL for the page the content is currently embedded on; the embed URL refers directly to the piece of content. Content providers which make media available for embedding in iframes typically provide embed URLs. Embed URLs must use https in order for the content to display on the page; see the Oxford Mosaic website for more information about https use on Mosaic.
• Specify Width and Height parameters in pixels. 
• The remaining settings are optional
• Click 'OK'. The iframe will be represented in the WYSIWYG editing view by a blank panel labelled 'IFRAME'. When the edits are saved, the embedded content will be visible when viewing the page.

Embed using an iframe in the 'Source' view

If you have copied an embed code snippet (within <iframe> HTML tags) from a content provider, you can insert the snippet in your WYSIWYG using the text editor's Source view. For example, you can copy an embed code from a public post, reel or profile in Instagram. To use the code in your WYSIWYG, follow these steps:

• Click Source in the toolbar
  
  
• In Source view, locate the position in the document where the <iframe> snippet will be inserted
• Paste the snippet using (Ctrl + V)
• Either return to rich text view (by clicking Source), or save the page edits.

How do I change the size of embedded content?

• Go to the source view of the text content area containing the embedded content
• Locate the 'height' and 'width' attributes of the <iframe> HTML element 
• Edit the height and width of the iframe as necessary. (W3Schools provides guidance on responsive iframes.) 

Multi-column layouts can be inserted into the WYSIWYG editor. All content that can be inserted into the text editor can be displayed within a column. Column layouts utilise the Bootstrap Grid system, which ensures the columns behave responsively at different screen widths.

Insert a column layout

To insert a column layout into a WYSIWYG editor:

• Place the cursor where the columns should be positioned
• Click the Layouts option from the toolbar
  
  
• The Choose layout modal opens:
  
  
• Select the preferred layout
• The column structure will be visible in the text editor. Column layouts occupy the full width of the WYSIWYG widget. Because the structure is responsive, it may display as rows rather than columns depending on the breakpoint of your screen. Using the maximise button to view the structure full size will show side-by-side columns:
  
  

Add content to a column

To add content to a column within the layout:

• Place the cursor within the inner region of one of the columns
• Insert content as usual

Edit a column layout

To edit a column layout:

• Click 'edit' in the options above the inserted layout
• The Choose layout modal opens
• Select a new preferred layout

Remove a column layout

To remove a column layout:

• Click 'remove' in the options above the inserted layout
• The layout and all content within it will be removed from the text editor

WYSIWYG text can be set to one of three width settings on the rendered page:

• Full width
• Standard
• Narrow

See WYSIWYG examples in the Mosaic Pattern Book for more information.

The toolbar can exist in four different configurations, ranging from all editing tools being visible to a restricted number of editing tools; and a plain text version of the editor with no toolbar. The toolbar configuration that is visible to a user depends on the HTML settings of the WYSIWYG.

Full HTML*

All editing tools are available to the user.

Filtered HTML

A subset of the editing tools is available to the user. A number of options are not displayed to the user, including the HTML source view.

Listing item text

The listing item text setting provides the editing options available to users in some of the content editing text input areas, for example, the lising text input and banner text input fields.

Plain text*

Plain text formatting removes the toolbar and provides the option of inputting HTML as plain text.

*SSO profile editors are unable to edit WYSIWYGs whose HTML settings have been set to 'Full HTML' or 'Plain text'. A Site Owner or Site Administrator will need to edit the SSO editor's profile page to change the WYSIWYG HTML settings to 'Filtered HTML' or 'Listing item text' before the SSO editor can edit text in the WYSIWYGs on their page.