Welcome to the OpenCities help centre. Search for what you're after, or browse the categories.
Can't find what you're looking for? Submit a support ticket and we'll be in touch.

Follow

The WYSIWYG Editor

avatar of OpenCities Product Team

OpenCities Product Team

Last updated

Our platform uses many different content types and templates to cater to all the needs of a city or council site. The main body content for most of those pages will come from a WYSIWYG Editor. "WYSIWYG" stands for "What You See Is What You Get," and it works like other major editing tools. The WYSIWYG Editor includes the main text area, a toolbar, and a tab to switch to HTML view.

Most content types will have at least one WYSIWYG Editor, but some will have more. A blue area will indicate the WYSIWYG Editor of a page in the template on the right-hand side of the page, which will also show where the text will appear. To open the WYSIWYG Editor, click on the blue text area. In some content types (including those you've made yourself), you must open the WYSIWYG Editor by selecting it from the WYSIWYG Editor drop-down menu.

Some content types, such as OC Folder and OC Featured Background, will not have a WYSIWYG Editor as they do not have body content.

Start Working in the WYSIWYG Editor

To start entering content into a page's WYSIWYG Editor:

  1. Go to the admin of the page you want to work on and select Update if it's been published.
  2. Open the WYSIWYG Editor by selecting the blue content area you need on the template of the page. If there is no template on the page, open the WYSIWYG Editor by selecting it from the WYSIWYG Editor drop-down menu.
    The blue WYSIWYG area in a page template
  3. Place your cursor into the text area and start typing to create your content. If you're pasting content into this area from another site or document, use the Paste from Word, strip font tool from the WYSIWYG Toolbar.
    The paste from Word, strip font icon
  4. Use the options in the WYSIWYG Toolbar to change the content you've entered into the content area. You can also use the HTML tab to edit directly in the content area's HTML.
    The design and HTML tabs in the text editor
  5. Use the Save Content button to save as you go and the Save Content and Close button to save and exit the WYSIWYG Editor.

The WYSIWYG Toolbar

You can edit and format the content you've entered into the text area using the options in the WYSIWYG Toolbar.

Please note that some options in the toolbar do not appear for specific roles. Roles such as OC Editor and OC Publisher only have basic editing permissions and cannot access most of our interactive content tools.

Please note that some toolbar options are part of our legacy product and will not be updated in future releases. For this article, the tools available have been split into the following categories:

General Tools

  • Undo (CTRL+Z): Reverse your previous action.
  • Redo(CTRL+Y): Repeat a step you reversed.
    The undo and redo icons in the text editor
  • AJAX Spellchecker (F7): Check the spelling of your content. You can also add words to your custom dictionary with this tool. This is a legacy feature and will not be updated in future releases.
    The spellcheck icon in the text editor
  • Find And Replace (CTRL+F): Use the Find tab to find all instances of a piece of text, and use the Replace tab to find all examples of a text and change that text. 
    Note: the Find and Replace option is very specific in that it will look for the exact phrase. If you search for the word "hold," for example, it will return the word "placeholder" and any other words that contain that sequence of letters. Using the Replace option would divide the word, introducing more errors into your text. 
    The find and replace icon in the text editor
  • AccessibilityChecker (CTRL+SHIFT+X): Check that your content is compliant with WCAG accessibility standards. This standard can be set by going to More > Site Management > your site > Settings > Content Standards. Learn more about checking content for accessibility and offensive words. 
    The accessibility checker icon in the text editor

Links and Content Tools

  • Document Manager (CTRL+SHIFT+D): Use this tool to insert a link to a document in your Files Library. Once you select the Document Manager tool, a window to your Files Library will open, allowing you to navigate to your file or Upload a new one. To insert a link, navigate to it and select it, then choose Insert. Learn more about files and the Files Library.
    The document manager icon in the text editor
  • Insert Fees: Insert a fees and charges content block into your page. This will auto-update when the information is updated in More > Fees and Charges. The Fees and Charges module is only available in ANZ.
    the insert fees icon is a price tag
  • Hyperlink Manager (CTRL+K): Use this tool to insert hyperlinks to your text. This link can be an internal, external, anchor, email, or phone link. Learn more about hyperlinks.
    The hyperlink manager icon in the text editor
  • Remove Link (CTRL+SHIFT+K): Place your cursor on the link in your body content and select the Remove Link tool to remove a hyperlink from your text.
    The remove link icon in the text editor
  • Insert featured links: Use this tool to insert styled links to your text. Learn more about featured links.
    The insert featured link icon in the text editor

Images and Media Tools

  • Image Manager (CTRL+SHIFT+I): Use this tool to insert an image from your Files Library. Once you select the Image Manager tool, a window to your Files Library will open, allowing you to navigate to your file or Upload a new one. To insert an image, navigate to it and select it, then choose Insert. Learn more about files and the Files Library.
    The image manager icon in the text editor
  • Insert Image Gallery: Use this tool to insert an Image Gallery. All Image Galleries will need to be created before they can be inserted into your page. Learn more about Image Galleries.
    The insert image gallery icon in the text editor
  • Insert rotating banner: Use this tool to insert a Rotating Banner. All Rotating Banners will need to be created before they can be inserted into your page. Learn more about Rotating Banners.
    The insert rotating banner icon in the text editor
  • Media Manager (CTRL+SHIFT+M): Use this tool to insert a video or audio file from your Files Library. Once you select the Media Manager tool, a window to your Files Library will open, allowing you to navigate to your file or Upload a new one. To insert a video or audio file, navigate to it and select it, then choose Insert. Learn more about files and the Files Library.
    The media manager icon in the text editor

Interactive Elements Tools

  • Insert Table: Use the Table Wizard to insert or edit an accessible table. Learn more about accessible tables.
    The insert table icon in the text editor
  • ContentSelector: Insert shared content from another page. Learn more about the Content Selector or shared pages. This is a legacy feature and will not be updated in future releases.
    The content selector icon in the text editor
  • InsertGlossary: Use this tool to link a glossary item to a word or phrase in your text. These links need to be created separately and will be visible as a definition upon hover on your live site. Learn more about the Glossary module.
    The insert glossary icon in the text editor
  • InsertPlugins: Use this tool to insert an existing plugin. These plugins will either pre-exist in our system (such as specific content lists, like the sitemap plugin) or be added from your admin's Embed codes section. Learn more about embed codes.
    The insert plugins icon in the text editor
  • Insert form: Use this tool to insert an existing form. Learn more about forms. This is a legacy feature and will not be updated in future releases.
    The insert form icon in the text editor
  • InsertOpenForms: Use this tool to insert an existing Forms & Workflow (OpenForms) form. You can only use this option if you have connected with Forms & Workflow.
    The insert open forms icon in the text editor
  • Insert Content List: Use this tool to create and insert content lists. You can use content lists for many reasons, including listing related pages and content. Learn more about content lists.
    The insert content list icon in the text editor
  • Insert Document Library: Use this tool to insert a dynamic content list of documents sourced from your Files Library. Document libraries can be displayed as a list or within the folder hierarchy.
    The insert document library icon is an open book
  • Insert Maps: Use this tool to insert existing maps. Learn more about maps.
    The insert maps icon in the text editor
  • Insert Calendar: Use this tool to insert existing calendars. Learn more about calendars.
    The insert calendar icon in the text editor
  • Insert accordions or tabs: Use this tool to create and insert accordions or tab containers. Learn more about accordions and tabs.
    The insert accordions or tabs icon in the text editor
  • UserInfo: Insert information about yourself as a user and content author for this page. This is a legacy feature and will not be updated in future releases.
    The user info icon in the text editor

Text Formatting Tools

  • Paste HTML: Embed HTML code in the WYSIWYG without it being stripped or amended. Use this tool to embed a video or form code. Using this tool, you can paste an embed code directly into the text area.
    The paste HTML icon in the text editor
  • Paste from Word, strip font (CTRL+V): Use this tool to paste content from Microsoft Word or other text editors. This tool automatically strips fonts and styling to ensure you get clean text to work with for your page.
    The paste from word, strip font icon in the text editor
  • Format Stripper: Use this tool to select what formatting you want to strip from the text. You can choose to:
    • Strip All Formatting
    • Strip CSS Formatting
    • Strip Font Elements
    • Strip Span Elements
    • Strip Word Formatting
      The format stripper icon in the text editor
  • Apply CSS Class: Use this tool to apply a CSS class to your text, including emphasis boxes and styled buttons. These CSS classes are specific styling that comes from your theme.
    The apply CSS class icon in the text editor
  • Paragraph Style: Use this tool to apply paragraph styling, including your heading levels. Normal refers to regular paragraph styling.
    The paragraph style icon in the text editor
  • Real font size: Use this tool to set font size by percentage. 
    Note: this tool is only available for OC Site Managers and OC System Administrators.
    The font size icon in the text editor
  • Foreground Color: Use this tool to change the color of your text. You can add a custom color by selecting Add Custom Color... and entering a hex color code.
    Note: this tool is only available for OC Site Managers and OC System Administrators.
    The foreground color icon in the text editor
  • Background Color: Use this tool to change the background color of some text. To use the tool, highlight the text you want to change and select a background color from the dropdown menu. You can add a custom color by selecting Add Custom Color... and entering a hex color code.
    Note: this tool is only available for OC Site Managers and OC System Administrators.
    The background color icon in the text editor
  • Bold (CTRL+B): Use this tool to bold selected text.
    The bold icon in the text editor
  • Italic (CTRL+I): Use this tool to italicize the selected text.
    The italics icon in the text editor
  • Underline (CTRL+U): Use this tool to underline the selected text.
    The underline icon in the text editor
  • Numbered List: Add an ordered numbered list.
    The numbered list icon in the text editor
  • Bullet List: Add an unordered bulleted list.
    The bullet list icon in the text editor
  • Align Left (CTRL+L): Use this tool to align content to the left.
    The align left icon in the text editor
  • Align Center (CTRL+E): Use this tool to align content in the center.
    The align center icon in the text editor
  • Align Right (CTRL+R): Use this tool to align content to the right.
    The align right icon in the text editor
  • Indent (CTRL+M): Use this tool to indent some text.
    The indent icon in the text editor
  • Outdent (CTRL+T): Use this tool to outdent some text.
    The outdent icon in the text editor
  • Horizontal Rule: Use this tool to add a horizontal line that will separate one section of content from another.
    The horizontal rule icon in the text editor
  • Strikethrough: Use this tool to create a line crossing out some text.
    The strikethrough icon in the text editor
  • SuperScript: Use this tool to format text as a superscript.
    The superscript icon in the text editor
  • Subscript: Use this tool to format text as a subscript.
    The subscript icon in the text editor
  • Insert Symbol: Use the drop-down menu to insert a symbol or special character.
    The insert symbol icon in the text editor

Save Your Content

When you're finished editing content in the WYSIWYG Editor, remember to save it by selecting Save Content and Close. You can also use the Save Content option to save as you work. After closing the WYSIWYG Editor, you can use the Preview button to see how your content looks. Publish your page when you're satisfied with it.

What Else?

Was this article helpful?
1 out of 3 found this helpful