WYSIWYG Editor

The “What You See is What You Get” (WYSIWYG) editor allows the content of the HTML Snippet component to be edited as rendered HTML content (with text, images, tables, styles, etc.), rather than HTML code. The WYSIWYG editor displays the HTML content as it will appear to the end user, potentially simplifying the editing process.

Character Formatting

Character formatting options apply to the selected character or characters.

Icon	Name	Details
	Formats	Select the type of formatting for the characters, such as paragraph, header, code block, normal (DIV), quotation, etc.
	Size	Font size in pixels.
	Font	Select font from several options.
	Font Color	Select font color from the color palette, or specify an exact HEX color value.
	Highlight Color	Select background color from the color palette, or specify an exact HEX color value.
	Text Style	Toggle text drop-shadow.
	Bold	Set text in bold.
	Underline	Underline text.
	Italics	Set text in italics.
	Strike-through	Add strike-through effect to text.
	Subscript	Set text as subscript.
	Superscript	Set text as superscript.
	Remove Format	Remove formatting from selected text.

Paragraph Formatting

Tools to specify the layout of content blocks.

Icon	Name	Details
	Outdent	Decrease indentation level by one tab.
	Indent	Increase indentation level by one tab.
	Align	Set paragraph alignment.
	Line Height	Set distance between lines.
	Quote	Format paragraph as a quotation.
	Horizontal Line	Add horizontal line at cursor location.

Embedding

Insert links, lists, tables, images, audio, and video into component content.

Icon	Name	Details
	Link	Opens the Insert Link dialogue box, allowing the link URL to be specified.
	List	Insert a number or unnumbered list into the content.
	Table	Insert a table into the content.
	Image	Allows images to be inserted into the content. Opens the Insert Image dialogue box, with options to: Select an image from file Indicate Image URL, which supports links to the Media Content Library. Specify Alternative Text. Choose Width, Height, and Alignment. Indicate Link URL, to add a link to the image.
	Audio	Allows an audio player to be inserted into the content. Opens the Insert Audio dialogue box, where a URL to audio content can be specified. Supports links to the Media Content Library.
	Video	Allows a video player to be inserted into the content. Opens the Insert Video dialogue box, with options to: Select Media Embed URL, including YouTube, Vimeo, or links to the Media Content Library. Choose Width, Height, and Alignment for the video player box.

Context Operations for Images and Video

Selecting an image or video container opens the context menu to edit how the container is displayed.

Icon	Name	Details
	Resize	Scale a container relative to the original media in the indicated proportion.
	Autosize	Automatically scale the media container to fit into the HTML snippet component.
	Rotate Left	Rotate the media container 90 degrees to the left.
	Rotate Right	Rotate the media container 90 degrees to the right.
	Mirror, Horizontal	Flip the media container over the horizontal axis.
	Mirror, Vertical	Flip the media container over the vertical axis.
	Align	Align the media container alignment.
	Insert Description	Allows a description to be added below the image.
	Revert	Revert all settings to default.
	Edit	Open the Insert Image or Insert Video dialogue box to edit media details.
	Remove	Delete the selected media container.

Context Operations for Tables

Select any cell in a table to open the table and cell context menus.

Context options affecting the entire table.

Icon	Name	Details
	Min Size	Sets the table width to occupy the minimum width possible while still displaying the content of each cell.
	Max Size	Sets the table width to occupy the full viewscreen.
	Fixed Column Width	Toggles between dynamic column width, based on column content, and fixed column width, which maintains the same width for each column.
	Table Header	Toggles an additional row at the top of the table, with distinct styling from the rest of the table.
	Remove	Removes the table and all its content.

Context operations affecting a single row,

Icon	Name	Details
	Insert Row Above	Insert a row above the selected cell.
	Insert Row Below	Insert a row below the selected cell.
	Delete Row	Deletes the row containing the selected cell.
	Insert Column Before	Inserts a column to the left of the selected cell.
	Insert Column After	Inserts a column to the right of the selected cell.
	Delete Column	Deletes the column containing the selected cell.
	Split Cell	Splits the selected cell horizontally or vertically.
	Merge Cells	Merges all selected cells into a single cell. The new cell will contain only content from the top-left cell of the selected cells.

Editor Actions

Control the display of the editor.

Icon	Name	Details
	Undo	Undo the last action.
	Redo	Redo the last undone action.
	Code View	Open an editor to view the underlying HTML code generated while editing.
	Show blocks	Adds an overlay to the editor, indicating the type of HTML tag containing each block of content.
	Full screen	Toggle the editor between full screen mode and compact mode.