| Clear-Site
uses Kevin Roth's excellent cross browser Rich Text Editor (www.kevinroth.com)
At the heart of any Content
Management System is a WYSIWYG (What You See
Is What You Get) editor. The
editor
servers as the primary means that the administrator has over
what the contnet they publish will look like. The editor is
intended to act like a word processor within your browser,
giving you access to the functions that you need to create
powerful, attractive rich content without knowing HTML
(Hypertext Markup Language).
The image above is a typical
example of the editor in Clear-Site. The main toolbar is split
into two levels. The top level is made up of 3 dorp down lists.
The Style dropdown list is a
shortcut to some pre-formatted HTML tags such as paragraph
(<p>), Heading (<H1>...<H6>) & Address
(<ADDR>). The font list contains 19 fonts that you may use
in the editor. You may mix & match the fonts in the
editor
so you're not confined to using just one. The size dropdown list
allows the user decide on the size of the seleceted text. Valid
values are from 1 to 7.
Below these lists, is the main
toolbar.
Most of the buttons here should
look familiar for anybody who has ever used a modern word
processor. Below is a description of the functionality of the
buttons.
| Button |
Function |
Description |
|
|
Bold |
Clicking this
button will make the selected text bold. Use <CTRL> +
B as a shortcut. Click here
for an example. |
 |
Italic |
Clicking this
button will make the selected text appear in italics. Use
<CTRL> + I as a shortcut. Click here
for an example. |
 |
Underline |
Clicking this
button will underline the selected text. Use <CTRL> +
U as a shortcut. Click here
for an example. |
|
 |
Left
Justify |
This button
will make the selected text appear justified to the left
hand side of the screen. Click here
for an example. |
 |
Centre
Justify |
This button
will make the selected text appear centre justified on the
screen. Click here
for an example. |
 |
Right
Justify |
This button
will make the selected text appear right justified on the
screen. Click here
for an example. |
 |
Full
Justify |
This button
will make the selected text appear fully justified on the
screen. Click here
for an example. |
|
 |
Horizontal
Line |
This button
will insert a horizontal line into the editor at the point
where the cursor is currently at. Click here
for an example. |
|
 |
Numbered
List |
This button
will create a new numbered list in the editor where the
cursor is currently positioned. Click here
for an example. |
 |
Bulletted
List |
This button
will create a new bulletted list in the editor where the
cursor is currently positioned. Click here
for an example. |
|
 |
Outdent |
This button
outdents (moves to the left) the selected text. Click here
for an example. |
 |
Indent |
This button
indents (moves to the right) the selected text. Click here
for an example. |
 |
Text
Colour |
Clicking on
this button will result in a colour pallette being presented
to the user. They can select their text colour from the 70
colours on the pallette. When they click on the colour they
want, the selected text will change to that colour. Click here
for an example. |
 |
Background
Colour |
Clicking on
this button will result in a colour pallette being presented
to the user. They can select their background colour from
the 70 colours on the pallette. When they click on the
colour they want, the background of the selected text will
change to that colour. Click here
for an example. |
|
 |
Insert
Hyperlink |
Clicking on
this button will bring up the 'Insert Hyperlink' dialog box.
If you want the hyperlink to be a link to a URL, select the
URL radio button and type the URL into the URL box. If you
want the link to be to a file uploaded to your system, click
the File radio button and select your sile from the drop
down list. You can also decide whether you want the linked
page to open in the same window or a new window. Click here
for an example. |
 |
Insert
Image |
Clicking on
this button will bring up the 'Insert Image' dialog box.
Select your image from the 'Select Image' drop down box. You
can select where on the page you want the image to appear by
choosing a value from the 'Align' drop down list. You can
also specify the image width & height (in pixels) along
with the border of the image. You can fill out the
description field also. This is the text that will appear as
the user hovers their mouse over the iimage in the public
section. Click here
for an example. |
 |
Insert
Table |
Clicking on
this button will bring up the 'Insert Table' dialog box. You
can specify the number of rows, columns, background colour,
table width, border thickness, cell padding & cell
spacing from this dialog. If you select a 'Transparent'
background, each cell will contain a hyphen (-) to let the
user know where the cell starts. Click here
for an example. |
By applying the tools described
above, we can create powerful content in our editor that will
catch the eye. The only limitation is our own creativity. Below
are a few examples of rich content created in the editor.
Example 1 - Faketown
GAA club Homepage
Example 2 - Faketown
Golf club Homepage
Example 3 - Faketown
Community School Noticeboard
Advanced users may wish to get
down and dirty with HTML. HTML (Hypertext Markup Language) is a
language understood by browsers to display rich content to the
screen. The editor functions described on this page essentially
create the HTML for the associated task. If you want to access the
HTML created by the editor at any time, do so by clicking on the
'View Source' check box at the bottom of the editor. You can make
whatever updates you want here and save your changes. [Note:-
only advanced HTML users should attempt to use this feature]
|
