Xcess Software’s DHTML Editor (XS-DHEdit)

User Manual v0.92

 

 

 


Introduction

 

The XS-DHEditor has been designed to facilitate adding an HTML-aware text-editor to a standard web-page with as little effort from the web-page designer as possible.

 

End-User Features:

Copy-and-Paste from Word/Excel with formatting preservation;

Font-Face, Font-Size, and Font-Color selection;

Bold;

Italics;

Underline;

Ordered and Unordered lists;

Indent and Outdent;

Left, Center, and Right alignment;

Hyperlinks, with support for http, https, ftp, news, gopher, mailto, file, telnet, and wais;

Image support, including alignment, alternate-text, and borders;

Cut, Copy, and Paste;

Undo and Redo;

Standard and HTML source views;

 

All of these features are presented in a recognizable, Microsoft Office-like toolbar, which ensures the least amount of training required for your end-users.

 

 

Developer Features:

Embed the editor in a web-page with as few as 2 lines of code;

path” property allows the editor to be used from any path within the site;

imagesPath” property ensures image links are transformed automatically;

content” property provides easy access to the current source of the editor;

showSave” property allows the Save icon to be hidden if needed;

onSave” event allows you to easily respond to the user clicking the “Save” icon;

 replaceTags” property allows for HTML tags to be replaced with different HTML tags;


Getting Started

Installation

Installation of XS-DHEditor is as simple as can be. Simply unzip the package to any folder within your site, using the “preserve folders” option of your unzip utility. When finished, you should have the following folder hierarchy (assuming you unzip to the root of your website):

 

<root folder of site> ---

                                    XSDHEditor ---

                                                htmlEditor.htc

                                                colorPicker.html

                                                index.html

 

                                                Docs ---

                                                            XS-DHEditor Manual v1.0.doc (this file)

 

                                                Images ---

                                                            (20 gif images, all prefixed with “icon_”)

 

                                                Samples ---

 

 

Now that the component is installed, open the “index.html” file in the “XSDHEditor” folder. This is the most basic use of the editor, and should successfully display the editor without any modifications. If “index.html” does not work, make sure you unzipped the package correctly and the folders listed above were all created in the appropriate locations.

 

Using The Editor

You can embed the editor into your pages very easily. First, change your <HTML> tag to include the XML Namespace decleration, like this:

            <HTML XMLNS:XS>

Next, add the HTC import line between your opening and closing <HEAD> tags, like this:

            <HEAD>

<?import namespace=x implementation="htmlEditor.htc" />

            </HEAD>

Finally, add the line to actually embed the editor in the appropriate location of your page, like this:

            <XS:htmlEditor id="xsEditor" />

 

That’s all there is to it!
Advanced Options

path” property –

The “path” property is used whenever the web-page which embeds the editor is not stored in the XSDHEditor folder itself (or wherever you store the source files). For example, let’s say you have the package unzipped as shown in the hierarchy above, with the XSDHEditor folder being a sub-folder of your web-site’s root folder. If you wanted to embed the editor in a page that is saved in the root folder itself, you would need to change the htc import decleration in your page’s <head> section like this:

 

(standard import)

<?import namespace=”XS” implementation="htmlEditor.htc" />

 

(import with relative path)

<?import namespace=”XS” implementation="XSDHEditor/htmlEditor.htc" />

 

 

 and add the “path” property to the standard embedding tag like this:

 

(standard embedding tag)

<XS:htmlEditor id="xsEditor” />

 

(embedding tag with “path” specified)

<XS:htmlEditor id="xsEditor” path=”XSDHEditor/” />

 

 

content” property –

The “content” property gives you access to the current HTML source-code of the editor’s contents. The following example adds a standard HTML button to the page which, when clicked, pops-up an alert box with the contents of the editor:

 

<input type=”button” onClick=”javascript:alert(xsEditor.content);”>

 

This assumes you gave the editor an ID of “xsEditor” when it was embedded.

 

You can also set this property to initialize the editor with content when it is first loaded, like this:

 

<XS:htmlEditor id="xsEditor” content=”<STRONG>Testing</STRONG>” />

 

or by setting the property to a scripting variable, such as this in ASP:

 

<XS:htmlEditor id="xsEditor” content=”<%= varContent %>” />


imagesPath” property –

            [documentation coming soon]

 

showSave” property –

The “showSave” property allows you to turn off the “save” icon on the editor’s toolbar. Possible values include “true” (the default) and “false”.

 

onSave” event –

The “onSave” event is fired whenever the user clicks the “save” icon on the editor’s toolbar. The obvious use for this event is to kick-off your code to save the current contents of the editor. Here is an example which simply displays the current source of the editor in an alert box:

<XS:htmlEditor id="xsEditoronSave=”javascript:alert(xsEditor.content);” />

 

replaceTags” property –

The “replaceTags” property allows you to replace HTML tags inserted by the editor with different HTML tags of your choosing. For example, the editor uses the <STRONG> </STRONG> tags when the “bold” icon is clicked on the toolbar. If you prefer to use the <B></B> tags instead, you can use the “replaceTags” property to do so, like this:

 

<XS:htmlEditor id="xsEditorreplaceTags=”<STRONG>,<B>” />

 

You can include as many tag pairs as you wish, as long as you follow the format of original_tag,new_tag,original_tag,new_tag,etc, etc, etc… Notice that the list of tags is comma-seperated and there is no space after the commas.

 

The replacement operation is only performed when the “content” property is accessed. Even if “replaceTags” is used, switching to the source view mode will still show the original tags inserted by the editor, not the replacement tags.