The WYSIWYG Editor

What You See Is What You Get (usually!)

Note: the admin pages have been redesigned since the screenshots in this documentation, though the functionality is essentialy the same. The documentation will be updated to match.... soon.

The Voice CMS provides a powerful WYSIWYG editor for modifying the pages and content within your website.

It is easy and intuitive to use and provides all the standard functionality you find in most word processors, including formatting tools, tables, and spell checking.

Using the Editor

Most of the functionality of the editor is accessed via the pop-down menus, with the most commonly used features available on the button bar. To find out what a specific button does hover your mouse over it and a helpful tooltip will be displayed.

You can change the size of the editor by dragging its bottom right corner. Alternatively if you would like the maximum space for editing you can select Fullscreen in the View menu.

For authors with some HTML experience the bottom status bar of displays the HTML path of the element you are currently editing.

Much of the WYSIWYG is self explanatory - with simple buttons to alter text styles, such as bold and italic, creating lists, and checking spelling. The rest of this document explains some of the more advanced features of the editor.

The Menus

The features of the editor are arranged into five menus, with similar actions grouped together. Many of the options have keyboard shortcuts, which are shown in the menu. The menu actions are as follows:

Edit - general editing features.

Undo, Redo - undo the last change, or redo the last undone change. Also available as buttons in the toolbar.
Cut, Copy, Paste - standard cut and paste options. Note that in many browsers you can't cut and paste using the menu options, you need to use ctrl-x to cut, ctrl-c to copy, and ctrl-v to paste, which are standard in most/all editors.
Paste as text - this is a toggle on and off. When ticked all pasting is done as text only without any style elements. This is ideal if you're pasting from a formatted document but don't want to take the styles, just the content.
Select all - select all the text in the editor.
Find and replace - opens a popup to do search and optionally replace over the content.

View - change how you view the content, rather than the content itself.

Visual aids - on by default, show aids such as a dotted line around table cells so you can more easily see what you're doing. These are not visible in the published page.
Show invisible characters - show invisibles such as non-breaking spaces (which you can add in the Content menu).
Show blocks - outlines block content such as paragraphs, lists. Can make it easier to understand what you're editing!
Source code - opens up a window allowing you to view/edit the HTML source of the page.
Preview - opens a preview of the page, doesn't show aids/invisible characters/blocks.
Fullscreen - makes the editor the full size of the browser window, select it again to go back to the normal size.
Print - lets you print the page content without the full theme of the site.

Format - change the style of text.

Bold, Italic, Underline, Strikethrough, Superscript, Subscript - change the text style. Either turn this on before typing, or select some existing text in the editor and click the option to change it. Bold/Italic/Underline are also available as keyboard shortcuts ctrl-b, ctrl-i, ctrl-u.
Blocks - these are styles such as Headings and Blockquote which affect the entire paragraph, not just the selected text. Also available as a pop-down in the toolbar.
Fonts - change the font to one of a selection of typefaces. If none are selected uses what you have configured in the theme options.
Font sizes - change the size of the text.
Align - set the text alignment - left, right, justified. Same as the toolbar buttons.
Line height - probably don't want to touch this, but if you must you can use it to change the line spacing within paragraphs.
Text colour, Background colour - allows you to mess around with the foreground and background colour of the text. Be careful not to select something unreadable!
Clear formatting - select some text in the editor and click on this to remove all the styles.

Content - insert and edit content and media, such as images and links.

Image - insert and edit images from the Assets Library. Also on the toolbar.
Link - add links to other pages on your site, or to documents in the Assets Library. Also on the toobar.
Media - insert video/audio from the Assets Library, or embed third party code, such as content widgets. Also on the toobar.
Anchor - add an anchor to a page, which you can then use in links to jump straight to that bit of content.
Special character - insert characters that are otherwise hard to find on the keyboard. Such as € or ©.
Emoticons 😀 - standard set of emoticons that you'll be used to seeing if you use WhatsApp or other messengers.
Horizontal line - adds a line across the page, useful for separating chunks of content.
Nonbreaking space - adds a space that can't be seen, and doesn't allow breaking to a new line. Use it to join words together that you want to always stay together. You can see them in the editor if you turn on Show invisible characters in the View menu.

Table - add and insert tables.

This gets its own menu because there are quite a few table-related options. As standard tables are full width with no visible borders, though you can see the borders in the editor as dotted lines when Visual aids is turned on in the View menu.

Most of the table editing options are available in the popup menu bar when you click on an existing table, or via a popup menu if you right-click on a table.

Table - creates a new table with the number of rows/columns that you select.
Cell - select cell styles, or merge/split cells.
Row - select row styles, cut, copy, add, or delete rows.
Column - cut, copy, add, or delete columns.
Table properties - change the settings for the table, such configuring borders or stripes.
Delete table - self explanatory I hope!

Adding Media, and Links to Documents

Media such as images and documents must be added to you Assets Library before they can be added to a page. There are two ways to add content to the Assets Library. The first is documented on the Assets Library page, and the second is from within the WYSIWYG editor and is documented below.

There are three key ways to add media or links using the WYSIWYG editor:

If you want to add a link to an asset some existing text or image, select the text/image in the editor and click the Insert/edit Link button (chain links). In the dialogue box click the URL button to the right of the URL field, then select the asset you want to link to and the dialogue will close and fill in the fields on the original dialogue box. Change any settings as required, and click Insert. The selected text/image will be converted into a link to the asset.
You can change the link to a button by selecting Button in the Class selector in the Insert/edit Link dialogue box.
The Insert/edit image button is used to add images to the page. Once you click this button a dialogue box opens showing the basic image options. Click the URL button next to the Source field and a second dialogue box opens showing the Images in the Assets Library. Pick the image from the Assets library, or add a new one. Once the image is selected the Insert/edit image dialoge will be filled in for you.
From here you can also select some image styles, such as adding a drop shadow, using the Class selector.
Insert/edit media is used to add media such as mp3 files or videos from the Assets Library.
If you're adding videos, note that Voice has a 100MB limit on files, and that it doesn't re-compress your video into different resolutions like YouTube/Vimeo do. We just host the video file exactly as you upload it. You should use MP4/H.264 or WebM videos, at a suitable resolution. Keep them as small as you can!

Adding Media From Within the WYSIWYG Editor

If you have an image or document on your computer that you want to add to a page, you can add it into the Assets Library as documented on the Assets Library page, then insert it as described above. Or, as a shortcut, you can add the asset directly from within the WYSIWYG, like this...

First, click on the Insert/edit image button. A dialogue box will pop up from which you can select an existing asset from the Assets Library, or you can use the Or add a new asset section of this dialogue box to upload a new asset.
Choose the type of asset you are adding - document/image/etc, which will select the appropriate part of the Assets Library to store your file.
A form will appear. Click the Browse... button to find the file on your computer that you want to add.
Give the file a

Paste as Text

Many authors use an external editor when creating their content and then when they are happy with it, paste it into the Voice WYSIWYG editor.

However, the formatting capabilities of an external editor and the WYSIWYG editor are often different and this can cause strange layout problems. This is especially true of the more feature rich editors such as Microsoft Word.

If you are pasting content from another editor and it appears badly formatted try using the Paste as text option in the Edit menu.
This will attempt to remove formatting from the content which will give you a better starting position to get the page to look as you would like.

Other Useful Features

There are so many! Most buttons should be familiar to users of other word processing software - such as aligning left/centre/right, bold, italic, underline, creating lists, etc.

If the layout has gone a bit funky, especially as a result of pasting from another editor, you can try clearing the formatting by selecting the text that needs fixing, and selecting Clear formatting from the Format menu. This will attempt to strip the selected content back to very plain styling you can try again with adding styles.
You can check the spelling with the Spell Checker button . When this is enabled then any misspelled words are underlined in red. Clicking the word brings up some suggestions. Click the Spell Checker button again to turn it off.
Selecting content in the editor brings up a context menu, depending on what is selected. You can use this to insert a link a the current location, or convert text into a link, etc.