Xcess Software’s DHTML Editor (XS-DHEdit)
User Manual v0.92
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.
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.
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;
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.
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
<input type=”button” onClick=”javascript:alert(xsEditor.content);”>
This assumes you gave the
You can also set this property to
initialize the
<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
“onSave” event –
The “onSave”
event is fired whenever the user clicks the “save” icon on the
<XS:htmlEditor id="xsEditor” onSave=”javascript:alert(xsEditor.content);”
/>
“replaceTags” property –
The “replaceTags”
property allows you to replace HTML tags inserted by the
<XS:htmlEditor id="xsEditor” replaceTags=”<STRONG>,<B>”
/>
You can include as many tag pairs
as you
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