A text, or WYSIWYG editor (or just ‘WYSIWYG’) is where you create the body content for a page. 'WYSIWYG' stands for 'What You See Is What You Get', and it works a bit like Microsoft Word.
When you’re editing a page, you’ll see the WYSIWYG selector on the right of the page details area. Open a WYSIWYG by clicking on an area of the page where it will appear. Most pages will only have 1 WYSIWYG area, but some pages will have more.
Get Started
Click on the the blue area, as indicated in the image above, to open the text editor. It will open as a popup.
Get started by simply typing into the WYSIWYG's text box. You can add as much or as little content as you want.
You can change what you've typed into the WYSIWYG by using the toolbar, or you can switch to the HTML view to edit the HTML directly.
The Toolbar
The toolbar at the top is very similar to Microsoft Word. You can edit your text by:
- making it bold, italic, or underlined (for accessibility reasons, do not use the underline feature if you can help it)
- adding bulleted or numbered lists
- left, center, or right-aligning your text
- indenting your text
- adding a horizontal rule, strikeout, sub- and super-script, or special characters
You can use the paragraph style drop-down to select the type of text - paragraph or header. The page title is shown as a Heading level 1, so any headers you use should start at Heading 2, 3, etc.
Add a link
If you want to link to another web page, select the text you want to create the link out of, and click the hyperlink button (looks like a globe with a chain). This will bring up the Hyperlink Manager.
From here, you can do the following:
- click Internal Link to link to a page on THIS website. Click through the folders until you find the page you want to link to. Click on that page, then click Insert.
- click Hyperlink to link to a page on ANOTHER website. You can copy/paste the URL, or type it in directly.
- You can also link to an email address by clicking Email, or a phone number (for mobile devices) by clicking Phone.
Add an Image
Click on the Image Manager button (the icon of a photograph) to insert an image from your files library.
If the image you want to insert hasn’t been uploaded to your files library yet, you can upload it here and insert it straight away.
Open the Image Manager and choose a folder:
- for departments, this will be Shared Files > Public > Departments > [your department] > Images
- for Administration/Communications & Digital Media functions (such as overall county financial documents), Shared Files > Public > Main Site > Images
Then click the Upload Files icon in the top right - this looks like an arrow.
Select Upload a File, choose an image from your computer, then press Upload.
To insert an image, select it, add Alt text to improve accessibility, choose the image's Appearance, then press Insert.
Add a Document
Adding a document is very similar to adding an image. Instead of clicking on the Image Manager button, click on the Document Manager button (this looks like a piece of paper with a paper clip).
If the document you want to insert hasn’t been uploaded to your files library yet, you can upload it here and insert it straight away.
Open the Document Manager and choose a folder:
- for departments, this will be Shared Files > Public > Departments > [your department]. Depending on the type of file, you should look for a subfolder, such as "Minutes" or "Bill Lists," if available
- for Administration/Communications & Digital Media functions (such as overall county financial documents), Shared Files > Public > Main Site. Depending on the type of file, you should look for a subfolder, such as "Minutes" or "Bill Lists," if available
Then click the Upload Files icon in the top right.
Select Upload a File, choose a document from your computer, then press Upload.
To insert a link to a document, select it, then press Insert.
Save!
When you're done editing, click "Save" to preserve your work in the text editor, or "Save and Close" to return to the main OpenCities backend page.
Make sure to save on the main page too! If you don't save, OpenCities won't remember your changes! So when working with the text editor, you're going to save twice: in the editor itself, and on the page.
Troubleshooting and Tips
Strip Formatting
Is your text looking strange when you preview it? Highlight it, then click the Format Stripper button (on the left side - looks like a paintbrush). This should remove formatting from your text, and you can re-format.
Copy and Paste from Word
You can copy and paste directly from Word! Select your text in Word, copy it, then hit Ctrl V on your keyboard while in the text editor to paste it in. Re-format the text as needed.
Stick to Our Styles
We have a very specific set of colors, fonts, and font sizes that are built-in to the site to make things consistent. While the text editor allows you to manually increase the text size or text color, we ask you to refrain from using these tools. Sticking to our styles will make the site easier to use for everyone!
Tables
Tables should only be used for tabular data, not layout/formatting. Use the justification tools (center, left, right) to align images and paragraphs, not tables.
If you do need to insert a table, please read these instructions first: Customize a table(PDF, 140KB)
Plugins and Content Lists
When working in the text editor, you may see what looks like a green-outlined box, such as this:
Do not edit these unless you are an administrator. These boxes are used to pull in pieces of content from other parts of the site, such as:
- a list of upcoming events with a specific content label
- a list of services with a specific content label
- a code snippet
If you see one of these boxes, simply ignore it, and don't delete it. :)
If you're a site administrator - learn more about content lists(PDF, 162KB).