WYSIWYG Editor - The core editing tool

Placeholder Restrictions

The editor allows users to do much more than just type text, add links and insert images. When developing templates, the developer has the option to restrict the tools available within each placeholder. This ensures that you can keep a consistency to the content.

You can choose whether you wish to implement these restrictions, but often you will decide that implementing these will in fact make it easier for contributors to create great looking content.

As a small example of this, if we were to create a placeholder, we could define that it was an image placeholder, and that the image inserted had to be constrained.

If you do this, when a user drags an image into the placeholder, they will be automatically provided with options to resize the image using the image editor .

 

Mini Templates

Contensis have pioneered a system for building pages using sub- templates. This system allows for a more flexible approach to page templates. We are using this system on this site, and in essence it allows the user to build their web pages in a componentised form, still within the WYSIWYG Editor.

An example of this is for the images with captions that you will see all over this site, and of course the tabbed area that we are writing within now.

If we choose we can simply drag and drop a tabbed area or an image with caption template into our page where we desire.

The template, when dragged in, has its own placeholders so you can be assured that if you need to change the look of the site, all content is totally separated from the presentation, even with these components.

If you make a change to the mini template, this will then propagate across the site.

Configurable Tool Bar

The editor can have tools added or removed at project level. This is often useful for simplifying the view for newcomers. If you wish you can even add your own tools - see customising the Contensis user interface .

Standard Shortcuts

All the standard keyboard shortcuts you are used to are available through the WYSIWYG Editor, including Ctrl+B (Bold), Ctrl+U (Underline), Ctrl+I (Italic), Ctrl+C (Copy), Ctrl+X (Cut), Ctrl+V (Paste) etc. Having familiar shortcuts is a must for enabling a smooth transition to the CMS.

Many of our competitors have added accessibility tools into their systems as an afterthought. Our guiding principle is that when users are creating content we should guide them down the route of accessibility, without them even realising it. You may think that accessibility is not an important issue for you, but it is proven that accessible sites are search engine friendly sites, so even if you don't have legislation, you will probably have the marketing department pushing this issue anyway!

Often systems will let you spend hours creating content and then at the end of creating your page on a Friday afternoon you find out that you need to run through 100 accessibility mistakes and fix them!

We have detailed below some of the ways in which we address accessibility issues whilst editing.

Heading Orders

Within the WYSIWYG Editor the system checks the heading orders and will only allow you to add in headers that are appropriate for the place you are editing in the web page. This feature prevents mistakes at the very start of the editing process and will save hours of time if you had to go back and completely re-format a piece of content.

Hyperlinks

When adding hyperlinks we ensure that Tool Tips are provided. So that you do not have to go back and add these later, if you drag and drop a hyperlink the title will be taken from the Content you have chosen automatically.

Images

When images are uploaded into Contensis we push the user through the process of entering ALT text so that you can be assured ALT text is provided on all images that are uploaded.

Tables

When users are creating tables, they have the option to specify table summaries and to define heading rows or columns. This is a necessity for providing accessible data tables.

There are a whole range of standard tools available to the editor, but as discussed already, many of the tools such as foreground colour and background colour would be hidden in a normal configuration, as they allow the user too much control to effect the look of the site.

Track Changes

The Track Changes option allows you to see the differences between different versions of the same piece of content. This is especially useful perhaps when you want to check what was added in the last version or even check what you have changed in the current version.

A screen shot has been provided to demonstrate the change tracking functionality. As you can see in this case only the age of the person has changed, but the Track Changes supports added, deleted and changed, as well as other indicators such as structure change for elements such as tables.

Hyperlinks

Hyperlinks are probably one of the most important assets you will add to a page. Throughout the editing process we have kept to the principle of making editing intuitive. Hyperlinks, as with most other actions, can be inserted in multiple ways. If you like dragging and dropping you can simply find an item in the Navigator and drag and drop it in.

If you like using the toolbar just click the insert hyperlink button. From here you can either search , browse or enter an external link. Mailto links are, of course, supported too.

If you want to right click, just right click and the option is available.

This principle of multiple ways to carry out an action is present throughout Contensis; we adapt to the way a user works, we don't try and adapt a user to the way we work!

Spell Check

As many terms used in a business circumstance are shared across the organisation, we provide a standardised custom dictionary. This means that if you have a product name like "Contensis", this can be added to the centralised dictionary by one person and will never be queried again.

We have proven that having a centralised custom dictionary greatly reduced spellchecking times.

The Spellchecker has the ability to work in multiple languages, although by default it works in British English.

As with much of the Contensis functionality, a Web 2.0 style approach is taken, with an Ajax call to the backend to find all the mistakes. These are then highlighted to the user, who can change them easily one by one. Standard features you expect from tools such as Microsoft Word are present, such as Replace All, Ignore All, etc.

Images

Inserting images into the editor is very simple. You can either use the Image Library or you can just drag and drop from the Navigator.

When creating templates in Contensis you can specify at placeholder level the maximum width and heights of images so that when a user inserts an image it will be constrained in a way that makes sense for that template. We have provided a screenshot of the process.

Table Manager

• Insert Table
• Table Headings
• Table Editor
• Cell Editor
• Row Editor

Zoom

The zoom tool simply allows you to zoom in on the content. This can also be achieved through the standard browser zoom tools, but obviously this tool only zooms the content not the entire interface as a browser zoom would do.

Paste

Pasting content is a function that we often take for granted, but within web content management there are lots of areas to address when pasting content. We have a number of standard tools available for different situations.

Standard Paste

The Standard Paste, which can also be accessed through CTRL+V, simply pastes whatever you have on the clipboard. If the content has been copied from an Office program such as Word, we strip all the 'bad' HTML that Office provides and clean it up to make it valid HTML (See Paste from Word below). 

If you have copied HTML, we ensure that the HTML pasted will not break the HTML compliance of the document. You can't, for example, paste a paragraph within a paragraph. In this example, if you do we just remove it for you. If you have images inside the HTML, when you save the page, we will check the source of the image, and if it is accessible we will download the image and add it automatically to the image library for you.

If you have copied pure text this is just pasted in as you would expect.

Paste From Word

Pasting from Word is an area of the system that has had quite literally weeks spent on it. Originally, a few years back, we spent a week on site with one of our NHS customers who had some of the worst Word documents you could ever imaging (they would agree if they are reading this!). Spending this time on site enabled us to hone and improve the Word paste functionality to provide a clean HTML output. Within the system there are various configurable options to change how Word content is pasted, this functionality is also used by our import from Office functionality.

When you click the Paste from Word button it will assume the content is Word-based and will clean the content for you.

Paste Plain Text

The Paste Plain Text does what it says on the tin; if you have a whole bunch of HTML on the clipboard it will tidy it up for you and paste pure text with paragraphs to separate the lines.

Paste as HTML

This paste option is useful when you have HTML on the clipboard and you want to show the actual HTML; often when you want to show a code snippet this is useful.

Remove Formatting

When you select text within the editor or click and leave the cursor within an element and click this button it will remove all applied formatting; this includes bold, italic and underline tags, CSS classes, converting headers to normal paragraphs and so on.

 

Find and Replace

The Find and Replace is largely as you would expect, we have provided a screen shot to show this.

The Find and Replace is limited only to editable placeholders, so your user will not be able to replace anything in the template - unless they have template editing rights of course.

If you want to carry out a project-wide search and replace then you must use our Global Search and Replace tool.

CSS Assignment

CSS Assignment is extremely important. Within Contensis you can give users a set of styles to use that is different from the styles assigned to the templates. This ensures that your users only have a small number of options when applying styles.

Often changes in look and feel should be achieved using mark up rather than styles, but there are cases where this is not possible, and this is where the CSS Assignment of style menu comes in.

Users can apply CSS to any editable element in a flash.

Paragraph Assignment

The Paragraph Assignment toolbar allows you to assign headings, paragraphs and other elements such as block quotes.

This menu is very useful because if the style sheets have been created well then we can automatically style content based on these tags to produce great looking content.

When assigning headings, the menu will only give you the option to assign a heading that is accessible. In this example you can see that we are in H2, so the options for H4 and higher are removed.

 

View Source

If you are a template editor viewing source, then you will see the entire source of the HTML.

The HTML is colour coded and indented so that you will easily find the code you are looking for.

If you view source in a web page, you will only be able to see the source of the particular placeholder you are editing. You can of course disable this functionality if you desire.

Standard Tools

There are many other tools within the WYSIWYG Editor that are self- explanatory, we have provided a list of these:

• Fore colour
• Background colour
• Bold
• Italic
• Underline
• Indent
• Outdent
• Horizontal Rule
• New Paragraph
• Print
• Undo/Redo