The WYSIWYG Editor

The content management system in dotCommunity 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

All of the functionality of the editor is accessed via the buttons at the top of the text area. A lot of the functionality will be familiar from other computer applications, however, 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 the bottom right of the text area. Alternatively if you would like the maximum space for editing you can click the Toggle Fullscreen Mode button.

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

Useful Features

When using the WYSIWYG editor there are a few of its features which are specific to editing content for the web. These are:

Adding Rich Content

When writing content for your website you will want to make your pages more interesting and engaging by adding rich content such as images, documents, or links to other web pages within your site or the wider internet.

If you would like to add a link to a document or other web pages then use the Insert Link button (1 in the diagram). This will open a new window allowing you to enter the URL of the location you would like to link to.

If the link is to point to somewhere outside of your site you will need to know the URL you wish to link to either by typing it in or copying and pasting it. If the link is to a document or another web page on your website within dotCommunity you can click the button at the end of the "Link URL" field in the form. This will open a further window showing you all the pages and documents/rich content in your website. Simply click the item you would like to link to and the "Link URL" field will be automatically filled in for you. If you wish to use a new rich content item you can upload it using the form at the end of the page. This will then automatically be used as the target for the link.

If you would like to add an image to your web page then click the Insert/Edit Image button (2). As above this will open a window allowing you to enter the URL of an image you would like to use. You can add a direct link to an image on the wider internet if it is available such as "http://cambridgeopensystems.com/resources/themes/cos/images/cos-logo-line.png". If you would like to use your own image click the button at the end of the Image URL field and as before select it from the list in the new window. When adding images this new window only shows your available images in the list. As with links if you want to use a new image you can add it using the form at the end of this page.

Finally in both cases use the other fields and tabs within the window to format your image/link and click insert to add it to your page.

For more information about storing and using rich content in your web pages please read the Assets section.

Paste From Word/Paste as Plain Text

Many authors use an external editor when creating their content and then when they are happy with it, paste it into the dotCommunity WYSIWYG editor. However, the formatting capabilities of an external editor and the WYSIWYG editor are often different and this can cause problems. This is especially true of the more feature rich editors such as Microsoft Word.

To help minimise these problems if you would like to paste some content that was created in word please use the Paste From Word option (3). This will attempt to fix the formatting so the content looks as good as possible however, the conversion process is difficult and you will need to carefully review the resulting output for unwanted changes. Similarly if you are pasting content from another editor and it appears badly formatted try using the "Paste as Plain Text" option (4). 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.

Edit the HTML directly

If you are familiar with HTML development you can edit the generated HTML for a page direct using the Edit HTML Source button (5). This will take you out of the WYSIWYG mode of the editor and present the HTML for your page in raw form. Note: this is only suggested for users who have HTML experience.