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 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 a YouTube video, video/audio from the Assets Library, or embed third party code, such as content widgets. Also on the toolbar.
  • 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:

  1. 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 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 Save. 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.
  2. 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 Source button to the right of 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 dialogue 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.
  3. Insert/edit media is used to add a YouTube video, or media such as mp3 files or uploaded video files from the Assets Library.
    For a YouTube video, paste its address into Source (or pick a video from the Assets Library) and the editor turns it into a player. Like an image from the Assets Library, the player fills the width of the column and shrinks to fit on phones. See Adding videos to your site for the other ways to add a video, and for advice on uploading video files.

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...

  1. Click the Insert/edit image button (or Insert/edit link for a document), then the Source (or URL) button next to the first field. The Assets Library dialogue box pops up.
  2. Instead of picking an existing asset, use the form underneath. For an image it's headed Or add a new Image; for a link it's Or add a new Asset, where you first choose the New Type (document, image, etc.) so your file goes in the right part of the Assets Library.
  3. Give the file a meaningful File name (and a Description for images, which is used for screen readers), click Browse... to find the file on your computer, then click Save and Publish.
  4. The file is added to your Assets Library, ready to insert into the page.

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 Spellcheck button Spellcheck button. When this is turned on, any misspelled words are underlined in red. Clicking the word brings up some suggestions. Click the Spellcheck 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.