The WYSIWYG Editor

The dotCommunity 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 buttons in the toolbars. 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 click the Toggle Fullscreen Mode button Full Screen Button.

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.

Adding Media

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.

Adding Assets from the WYSIWYG Editor

The diagram shows the toolbar in the WYSIWYG editor. The first one with lots of buttons is as it appears in the CMS, and the simple button bar is how it appears in other areas of the site, where you don't need so many complicated editing options.

To add a new image or document into the page, click the Upload a picture or file button (1). A dialogue box will pop up from which you can select an existing asset from the Assets Library, or you can use the add a new asset section of this dialogue box to upload a new asset.

If you want to create a link to an asset rather than including it on your page (e.g., a link to download a document), then you use the Insert/edit link button (3). This can only be clicked after you have selected some text or an image that you want to turn into a link. The button brings up a dialogue box. To the right of the Link URL field is a Browse button Browse which brings up the same dialogue box as pops up when you click the Upload a picture or file button. After selecting or uploading the asset, the URL of the asset is inserted into the Link dialogue box. Once done you can insert the link into your document.

If you want more control over the image that you insert, rather than using the Upload a picture or file button you can use the Insert/edit image button (2). This opens a dialogue box. To the right of the Image URL field is a Browse button, which opens the now familiar dialogue box from which you can select or add an asset.

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 button. 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 button. 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. This will take you out of the WYSIWYG mode of the editor and present the HTML for your page in raw form.