An OpenCities site uses many different content types and templates to cater to all the needs of a city or council site. For most of those pages, the main body content of the page will come from a WYSIWYG Editor. 'WYSIWYG' stands for 'What You See Is What You Get,' and it works a bit 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 content types 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, you need to click on the blue text area. In some content types (including those you've made yourself), you need to open the WYSIWYG Editor by selecting it from the WYSIWYG Editor dropdown 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:
- Go to the admin of the page you want to work on and select Update if it's been published.
- 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 dropdown menu.
- 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.
- 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.
- 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 of our 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
- Links and content tools
- Images and media tools
- Interactive elements tools
- Text formatting tools
General tools
| Tool | Function |
|
Undo (CTRL+Z) and Redo (CTRL+Y)
|
Undo: reverse your previous action. Redo: repeat a step you reversed. |
|
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. |
|
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 which contain that sequence of letters. Using the Replace option in this instance would divide the word, introducing more errors into your text. |
|
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. |
Links and content tools
| Tool | Function |
|
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. |
|
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. |
|
Remove Link (CTRL+SHIFT+K)
|
Place your cursor in the link in your body content and select the Remove Link tool to remove a hyperlink from your text. |
|
Insert featured links
|
Use this tool to insert styled links to your text. Learn more about featured links. |
Images and media tools
| Tool | Function |
|
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. |
|
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. |
|
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. |
|
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. |
Interactive elements tools
| Tool | Function |
|
Insert Table
|
Use the Table Wizard to insert or edit an accessible table. Learn more about accessible tables. |
|
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. |
|
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. |
|
InsertPlugins
|
Use this tool to insert an existing plugin. These plugins will either be pre-existing in our system (such as specific content lists, like the sitemap plugin) or be added from the Embed code section of your Site Management settings. Learn more about embed codes. |
|
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. |
|
InsertOpenForms
|
Use this tool to insert an existing OpenForm. You can only use this option if you have connected OpenCities with OpenForms. Learn more about using OpenForms with OpenCities. |
|
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. |
|
Insert Maps
|
Use this tool to insert existing maps. Learn more about maps. |
|
Insert Calendar
|
Use this tool to insert existing calendars. Learn more about calendars. |
|
Insert accordions or tabs
|
Use this tool to create and insert accordions or tab containers. Learn more about accordions and tabs. |
|
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. |
Text formatting tools
| Tool | Function |
|
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. |
|
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. |
|
Format Stripper
|
Use this tool to select what formatting you want to strip from the text. You can choose to:
|
|
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. |
|
Paragraph Style
|
Use this tool to apply paragraph styling, including your heading levels. 'Normal' refers to regular paragraph styling. |
|
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. |
|
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. |
|
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. |
|
Bold (CTRL+B)
|
Use this tool to bold selected text. |
|
Italic (CTRL+I)
|
Use this tool to italicize the selected text. |
|
Underline (CTRL+U)
|
Use this tool to underline the selected text. |
|
Numbered List
|
Add an ordered numbered list. |
|
Bullet List
|
Add an unordered bulleted list. |
|
Align Left (CTRL+L)
|
Use this tool to align content to the left. |
|
Align Center (CTRL+E)
|
Use this tool to align content in the center. |
|
Align Right (CTRL+R)
|
Use this tool to align content to the right. |
|
Indent (CTRL+M)
|
Use this tool to indent some text. |
|
Outdent (CTRL+T)
|
Use this tool to outdent some text. |
|
Horizontal Rule
|
Use this tool to add a horizontal line that will separate one section of content from another. |
|
Strikethrough
|
Use this tool to create a line crossing out some text. |
|
SuperScript
|
Use this tool to format text as a superscript. |
|
Subscript
|
Use this tool to format text as a subscript. |
|
Insert Symbol
|
Use the dropdown menu to insert a symbol or special character. |
Remember to save!
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.