RECENT UPDATES:
01-Oct-2025 | v7.5.5 | All new article

Contributors:

Admin Editor (WYSIWYG/Code View)

The main content editing interface throughout the admin uses a visual editor coupled with a code view for 100% control over your added content.

Code View

Using the Code View provides full access to your content's underlying code and allows you to add additional code directly to the page, including Javascript, Liquid, SVGs, embed code, and any other text-based code.

The code editing environment utilises the Monaco Editor (the same editor used in VS Code), providing professional, familiar, developer-friendly editing experience.

Features of the Monaco Editor include Syntax highlighting for multiple code languages and IntelliSense support.

When in Code View, additional tools are available in the toolbar which are described below:

Format Code

Formats all the code in the code editor window into a neatly indented code structure with appropriate line breaks.

Fullscreen

Toggles the editor to take up the full screen area for better focus.

WYSIWYG Visual Editor

Text Formatting

These tools allow you to change the appearance of selected text, managing style, font, and color.

Bold

Ctrl+B (or ⌘B)

Makes the selected text bold.

Italic

Ctrl+I (or ⌘I)

Makes the selected text italic.

Underline

Ctrl+U (or ⌘U)

Adds a line beneath the selected text.

MORE TEXT:

Strikethrough

Ctrl+S (or ⌘S)

Draws a line through the selected ~~text~~.

Subscript

N/A

Creates subscript text (eg; H₂O).

Superscript

N/A

Creates superscript text (eg; x²).

Font Family

N/A

Selects the typeface for the selected text from a subset of websafe fonts (eg; Arial, Times New Roman).

Font Size

N/A

Sets the size of the selected text in pixels.

Text Color

N/A

Changes the color of the selected text via preset color swatches or HEX code input.

Background Color

N/A

Changes the background highlight color of the selected text via preset color swatches or HEX code input.

Paragraph and Alignment

These tools control the structure, layout, and indentation of text blocks and lists.

Align Left

N/A

Aligns the paragraph content to the left margin.

Align Center

N/A

Centers the paragraph content.

Align Right

N/A

Aligns the paragraph content to the right margin.

MORE PARAGRAPH:

Align Justify

N/A

Fills the paragraph text to align with both left and right margins.

Ordered List

N/A

Creates a numbered list (1., 2., 3., etc.) with options for different styled markers (eg; Lower Alpha, Upper Roman).

Unordered List

N/A

Creates a bulleted list with market style options (eg; Default, Circle, Disc, Square).

Paragraph Format

N/A

Applies block-level formatting, such as Normal text or Heading styles (H1 through H6). Also includes a Code block format.

Paragraph Style

N/A

Applies preset styles to the paragraph (eg; Gray, Bordered, Spaced, Uppercase).

Decrease Indent

Ctrl+[ (or ⌘[)

Moves the paragraph left towards the margin (Outdent).

Increase Indent

Ctrl+] (or ⌘])

Moves the paragraph right, away from the margin (Indent).

Quote

Increase: Ctrl+' (or ⌘')
Decrease: Ctrl+Shift+' (or ⌘⇧')

Creates a blockquote or applies indentation for quotations.

Media and Elements

Use these features to insert objects other media into your content.

Insert Link

Ctrl+K (or ⌘K)

Creates a hyperlink on the selected text or inserts a link at the cursor position.

OPTIONS:
Source: Select from the File Manager or site Modules to source the linked item.
URL: The file path (or external web address) to the linked item.
Text: The visible content that displays the link.
Title: The value of the `title` attribute added to the anchor element.
Open in new tab: Informs the link to open in a new browser tab instead of replacing the current page. This is ideal for external links.

Selecting the inserted link will display options for changing/managing the link further.

Insert Image

Ctrl+P (or ⌘P)

Inserts an image into the content at the cursor position.

OPTIONS:
Upload: Drag an image file form your computer into the upload area, or click to browse for an image file from your device.
URL: Add the file path (or external web address) to yoru image file.
Browse: Browse the site's File Manager to select an existing image file.

Selecting the inserted image will display additional styling options, such as alignment, sizing, alt text, linking, and various styles and effects.

Insert Custom Widget

N/A

Inserts a custom element from the site's pre-defined Custom Widgets.

MORE ELEMENTS:

Insert Video

N/A

Inserts a video element or embed code.

URL: Add an external web address for the video from Youtube or Vimeo. An iFrame element will be inserted to dsiplay the video.
Embedded Code: Add the embed code supplied by the video hosting service.

Selecting the inserted video will display additional options, such as sizing, alignment, and video settings.

Insert Table

N/A

Inserts a HTML table with customizable rows and columns (move your cursor over the grid to define the initial table size and click to insert).

From the inserted table, clicking within a tabel cell will display additional table controls for adding rows, columns and various styling options.

Emoticons

N/A

Inserts graphical smileys or emojis into the content.

Special Characters

N/A

Inserts characters not easily accessible on a standard keyboard, such as copyright and trademark symbols (eg; ©™), arrows (eg; →↗), alternative currency symbols (eg; £¥), math symbols (eg; ∑√), and more.

Insert Horizontal Line

N/A

Inserts a horizontal dividing line <hr> (thematic break).

Editor Controls

These actions control the state of the editor and modify the viewing mode.

Undo

Ctrl+Z (or ⌘Z)

Reverts the last action performed in the editor.

Redo

Ctrl+Shift+Z (or ⌘⇧Z)

Reapplies the last undone action.

Fullscreen

N/A

Toggles the editor to take up the full screen area for better focus.

MORE OPTIONS:

N/A

Opens the system's print dialog to print the document content.

Select All

N/A

Selects all content within the editor area.