Web design Dorset - Website designers Dorset - Silicondesigns

The Editor

We have chosen to use the WYSIWYGPro editor for our customers as we believe it is the best editor currently available for Joomla.

The editor performs much the same as the editor you find in MS Word or other word processing packages and is easy to use for anyone that has a basic understanding of PCs.

wysiwygpro screenshot

The W Y S I W Y G Pro Editor

Overview

WysiwygPro is an HTML word processor that runs through a web page created by Joomla.

WysiwygPro enables anyone to create rich HTML content online without any knowledge of HTML. It is designed to look and behave like Word so anyone that can use Word can use WysiwygPro.

For an online demo of the editor used in our CMS, please click here.

See a screencast of WYSIWYGPro in action. Please note this is provided by our friends at Joomlashack.com who provide high quality Joomla templates.

Features

Insert single line returns on enter key press

Many competing products insert <p> tags on Enter Key press this results in double line returns which makes for a less than perfect user experience. Some products have attempted to overcome this problem by using <BR> tags but this results in the insert list buttons not functioning properly. WysiwygPro uses <DIV> tags which provide the same effect as <BR> tags but without any consequences. You can now configure the editor to use <P> if you require it.

Create bold text

Create italic text

Create underlined text

Justify left, center, right and full

Change the font style, size and color
You can change the font face, size and color. When changing the color you can easily choose your desired color from the color palette. You can also apply pre-defined text styles that have been set up by your webmaster.

To make it super easy to choose the right font, format or style all the drop down menus show a preview of the formatting.

Highlight Text
Choose from a 216 color web safe color palette or manually enter the hexadecimal value for your required color.

Insert clean HTML from Microsoft Word
When text is pasted from Microsoft Word allot of unnecessary word specific markup is carried across. This can result in web pages that take an unnecessarily long time to download. The Paste from Word button solves this by removing word markup before pasting the text into your page.

Create tables

Easily set the number of columns and rows, cell spacing and padding, border width, border color and background color. A preview of your table is shown so that you can get it just right before inserting it into the page.

Edit table row and cell properties

Control the background color, border color, border width, cell padding, cell spacing, horizontal and vertical text alignment. Your changes are previewed directly in the edit table window.

Insert and delete table columns

Insert and delete table rows

Merge and split table cells

Insert Images
Choose an image from your server or enter the address to an external image. Specify alternative text, border width and control how text will flow around your image. You can specify the distance to surrounding text on all four sides of the image.

Manage your image directory

Upload, delete and rename image files.

Insert Hyperlinks to external sites
Simply enter the address to an external site.

Insert Hyperlinks to pages on your own site

Select from a list of available pages on your own web site.

Insert Links to downloadable documents such as PDF and Word files

Manage your document directory.
Upload, delete and rename downloadable documents.

Insert bookmarks
When you insert bookmarks they are automatically added to the hyperlink window so that you can select a bookmark to link to when adding a hyperlink.

Insert horizontal Lines

Control the width, horizontal alignment and color.

Insert emoticons T

This is a useful feature for if the editor is to be used in a discussion forum or web mail system.

Insert Special characters

Choose from over 100 commonly used special characters.

Insert code snippets
Your webmaster can create a gallery of commonly used items such as the current date, company logo, company address, or a commonly used marketing phrase. You can insert these items into your document at the click of a button.

Quick access to common editing features through a context sensitive right-click menu

Formatting previews

To make it super easy for users to select the correct font, style, paragraph format or font-size all drop-down menus show a preview of their formatting effect.

When inserting or editing a table both the insert table and edit table windows show a preview of your table so that users can get it just right.

The image manager shows a preview of selected images and allows you to preview how text will flow around the image.

Control the distance to surrounding text on all four sides of an image.
When inserting an image into a block of text WysiwygPro allows you to control how the text will flow around the image including the distance to surrounding text on all four sides of the image. Most competing products only allow you to set horizontal and vertical spacing, which can make it difficult to correctly place an image.

Example:

In the example below horizontal spacing has been set to stop the text from butting up against the image. This is how it is done in most competing products. Note how this results in the same spacing for both the left and right side of the image:

Lorem ipsum, Dolor sit amet, consectetuer adipiscing loreum ipsum edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.Loreum ipsum edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit. Lorem ipsum, Dolor sit amet, consectetuer adipiscing loreum ipsum edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum, Dolor sit amet, consectetuer adipiscing loreum ipsum edipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

In WysiwygPro we can set the spacing individually for each side of the image: