A WYSIWYG (What You See Is What You Get) editor allows Content Management System (CMS) editors to create and edit content in a visual way. The content appears in the WYSIWYG as it will appear on the published page.
You can use the WYSIWYG editor for a variety of components set up on the CMS. You can also add a Text - WYSIWYG block of its own on a page. This provides flexibility in how you can present your content on nsw.gov.au.
Find out about features in the WYSIWYG block
Importing text
You should always clean your text using Notepad or other text editor before cutting and pasting it into the WYSIWYG.
Cutting and pasting from word documents or emails can import disruptive HTML like line heights and code which affects accessibility for the audience who use screen readers and other assistive technologies.
Basic WYSIWYG features
The WYSIWYG allows CMS editors to create and format their content similar to the way content is created and formatted in a Word document.
Features of the WYSIWYG editor include:
-
Text formatting: Editors can apply formatting to text, such as bold, italic, superscript, subscript and strikethrough. An underline will automatically show for all links and doesn't need to be added.
-
Align or indent text: Editors can:
- align text (right, centre, left, justify), or
- indent (increase or decrease)
-
Undo and Redo: The editor has an undo and redo feature to correct errors
-
Special characters: Editors can insert special characters from a menu, for example, en dash, em dash, registered sign, copyright sign and degree sign
-
Links: Editors can add hyperlinks to external and internal pages, email addresses and phone numbers. Learn more about links and managed links
Buttons: Links can be styled as buttons with a call to action. Learn more about buttons
Anchors: Editors can add an anchor by using the flag icon and then add a link that goes to the anchor -
Anchors: Editors can add an anchor by using the flag icon and then add a link that goes to the anchor
-
Lists: Editors can create ordered or unordered lists to organise content. Learn about list styles.
Horizontal line: The horizontal line should only be used within the WYSIWYG content to help the audience scan the page. To add a line between different content blocks use the Line separator. -
Tables: Editors can insert tables and apply different styles to the table. Styles available:
- Striped
- Bordered
- Full width
- Stacked
-
Media files: Editors can add media files into the content, for example, images, remote video, or PDF files from the media library. Editors can resize and adjust an image's placement. Learn more about images.
-
Small text styles – this should rarely be used and is reserved for disclaimers (or similar content). It uses a slightly smaller font size to the rest of the site.
-
Block quote with citation: Editors can insert a block quote that displays in a larger font. The citation field (delete if not required) displays in a smaller font. Both the quote and citation are indented and display with a vertical highlight line down the left side of the block.
-
Remove format: Editors can clean content that is copy and pasted into the CMS by selecting the text and clicking on the remove format icon.
-
Source: Editors can view and edit the HTML code of the content if required.
Style options
Excluded from In-page nav
- Used to exclude a H2 heading in your WYSIWYG from the In-page navigation.
- Highlight your H2 heading and then select Styles > Excluded from In-page nav.
Other styles
Adding a Text - WYSIWYG on a page
Landing page
You can add a Text - WYSIWYG on a landing page by selecting Text - WYSIWYG from the list of content blocks.
Enter in your content in the WYSIWYG editor. Optionally, select whether the block will have a Grey background, or whether the block is inside a Full-width section.
Standard page
You can add a WYSIWYG block on a standard page by clicking on the Add block button.
See this live on nsw.gov.au
Visit WYSIWYG Editor to see how this works on a live page.
Need any more help?
If you have any questions, or require assistance with anything mentioned on this article, submit a request via the webform.