WYSIWYG component

The editor provides efficient and accessible content revision through inline editing. Clicking and selecting text within the content of a WYSIWYG will display the editing toolbars directly below the selected content, providing editing tools specific to that content-type:

These inline toolbars allow you to edit the content of your assets within their immediate context, mitigating the need for constant referral back to the full WYSIWYG toolbar.

Inline toolbars also provide breadcrumb style navigation of the elements of your selected content, allowing you to specify precisely the content you are editing.

You can use the navigation tools to edit only selected content, all content within the bold tags of the selection, or all content within the paragraph of the selection.

The tools available on the inline toolbar allow you to add comments to your content, aiding in content collaboration on pages with multiple authors.

To add a new inline comment:

You can edit and delete your own comment through the options menu in each comment.

The %asset_attribute_comments% keyword can also print all of the comment data from a Standard Page or component in a JSON array.

The WYSIWYG editor provides the basic formatting tools to allow you to make your content bold or italicized, as well as strikethrough text.

To use these basic formatting tools, make a content selection, then click either the Bold, Italic, or Strikethrough buttons.

To remove this formatting, highlight the relevant content and click the highlighted button of the formatting you want to remove. Alternatively, you can use the Remove formatting tool.

<strong>Bold</strong>

<em>Italic</em>

<del>Strikethrough</del>

The subscript and superscript tools allow you to format your content selections as both subscript and superscript.

To use these formatting tools, make a content selection, then click either the Subscript or Superscript buttons; this will format the selected content as specified. To remove this formatting, highlight the relevant content and click the highlighted button of the formatting you want to remove. Alternatively, you can use the remove formatting tool.

The Code tool lets you highlight some text as code and wrap it in a <code> tag.

This tag is useful when writing technical documentation to highlight words or snippets that represent computer code.

More information about using the <code> tag is available in Mozilla’s HTML developer documentation.

The class tool in the WYSIWYG toolbar lets you apply a class attribute within your content.

To apply a class:

To delete a class:

The class is applied to the content as described in this example:

<h1 class="intro">Heading</h1>

The remove format tool lets you remove any text formatting (bold, italic, etc.) within your content while maintaining the text itself. This action includes clearing any style attributes, classes, and justifications within your content.

To remove formatting, make a content selection, and click the Remove format button.

The following HTML tags are not allowed within WYSIWYG containers and are always removed:

The formats tool lets you control your content formats, whether they be paragraphs, divisions, quotes, or preformatted content.

To specify the formats of your content, make a content selection, and click Formats to invoke the formats popover:

The current format type of content will be selected. In this case, the P option indicates that this content is using paragraph tags.

In the Formats popover, select the format to which you want to switch:

<p>Content</p>

<div>Content</div>

<blockquote>Content</blockquote>

<pre>Content</pre>

The insert table tool lets you insert a table into your asset’s content.

Click on the Insert Table button to invoke the insert table popover:

In the insert table popover, specify the table’s size and indicate the position of the table Headers.

Once you have done this, click the Insert Table button; the table will be inserted into the content

You can modify a table’s settings by selecting it within the component and clicking the Insert Table button. You will be able to change either the entire table or the selected row, column, or cell.

The settings in these tools allow you to:

The insert image tool lets you insert an image into the content of your asset, either as an image asset within your site or through the URL of the image.

For more information on creating and editing image assets, refer to the Asset Creation Wizard and Editing an Image chapters.

Click on the Toggle image options button to insert an image.

In the insert image popover, enter a URL to the image that you want to insert. Alternatively, you can insert an image asset from elsewhere in your site or upload an image from your computer.

To insert an image asset, click the Pick asset button. You can use the asset finder to navigate to and select the image to add.

If you want to upload a new image, click Upload and select the image you want to insert. You can use the additional Location field to specify where you want to upload your image. The Use current asset as upload location option is selected, by default.

You can select whether to display this new image asset within your site’s navigation menus using the Show in menu option. By default, this field will be disabled, meaning that the image will be uploaded as a hidden link asset and not displayed in the menus of your site.

Once you have specified an image to insert, the insert image popover will display the chosen image.

The insert image popover also lets you indicate whether the image is decorative and provide a title and alternate text.

For more information on the settings of an image, refer to the Editing an image chapter in this manual.

Once you have selected and configured the image, click the Apply changes button to insert the image into your content.

You can resize your image by selecting the component and using the handles to drag your image to the desired size.

To modify the settings of an image once inserted, select the image within the component and click the Toggle image options button; the insert image popover will be displayed, listing the current settings of the image. Once you have reconfigured these settings, click the Apply changes button to update the image.

The horizontal rule tool lets you create a horizontal line within your content, used to define a thematic break.

Click Horizontal rule to insert a <hr /> element into your page.

The insert link and remove link tools allow you to manage links to external sites or internal assets within your content.

To add a link:

To remove a link:

If you are linking to a link or redirect page asset, there will be another option available called Use link destination, which is on by default. When enabled, the URL produced on the frontend is the URL those asset types are pointing to rather than the URL of the link or redirect page asset themselves.

The anchor ID tool lets you insert an anchor or destination point within the content of a page. These anchors can then be linked to, enabling quick navigation to the content within your site. For example, you could create links at the top of a page to each separate section of content within that page.

To insert an anchor ID, make a content selection and click the Anchor ID button.

In the ID field, enter an ID or name for the anchor and click the Insert anchor button.

To delete an anchor ID:

The insert character tool lets you add special characters into the content of your page.

Click the Insert character button to open the insert character options.

The insert character popover groups available characters under Symbol, Latin, Mathematics, Currency, and Greek categories. Click on a character to insert it into the content of your page.

The search and replace tool lets you search all content within the component and, optionally, replace it with another specified string. For example, you could search for all uses of the phrase "Matrix" in your content, replacing those instances found with "Editor".

To search and replace content:

If you want to replace this string within your content, enter the replacement string in the Replace field.

The language tools allow you to insert acronym, abbreviation, and language tags within your content.

Use these tools by making a content selection and click the Language tools button.

To add an acronym tag:

To add an abbreviation tag:

To add a language tag:

The accessibility auditor tool evaluates and reports on the accessibility of your asset’s content, highlighting any known or potential issues for review and resolution.

For more information on this tool and its use, refer to the Accessibility Auditor.

The source editor tool in the Editor lets you view the HTML source code of your content.

Clicking the Toggle source view button invokes the source editor popover, allowing you to view the content source code.

You can use the source editor to modify the HTML code of your content. Once you are satisfied with your work, click the Apply changes button to return to the WYSIWYG view.

The insert matrix keyword tool lets you add a keyword replacement within the content of your page.

To insert a keyword, click the Insert Matrix keyword button to display the keyword popover.

This popover will display a list of keyword replacements available for use on the asset.

Select the keyword that you want to use and click Insert to add the keyword to the page content.

Read Keyword replacements and modifiers for more information on the keyword replacements available within the Matrix system.

The insert matrix snippet tool lets you insert snippets of content within your page, in a similar manner to linking a division or nesting another asset.

To insert a snippet, click the Insert Matrix snippet button to display the insert matrix snippet popover.

This popover will provide a list of the bodycopy assets available to use as snippets.

Select the snippet you want to use an click Insert to add the snippet keyword to the page content.

By default, no snippets will be available for use on this tool.

To make snippets available, enable the Snippet Keyword Replace setting on the Global Preferences screen and configure a snippet location.

For more information, refer to the Global Preferences chapter in the System Configuration manual.