Advanced Content Editor (ACE)
Version 3.3
Product Documentation
COPYRIGHT
Copyright 2001-2003 Yusuf Wiryonoputro
All rights reserved.
Table of Content
I. Introduction
1. Product Overview
2. Product Features
3. Requirements
4. Package Structure
II. Installation Guide
III. Developer Guide
1. Using Advanced Content Editor
2. Controlling Toolbar Functions
3. Content Functions
1. “isFullHTML” property
2. “getContent” and “getContentBody” methods
3. “displayMode” property
4. “putContent” method
5. “getPageCSSText” and “setPageCSSText” methods
6. “useSave” and “onSave” properties
4. Stylesheet Functions
5. Image Related Methods & Properties
1. “ImagePageURL”, “ImagePageWidth” & “ImagePageHeight”
Properties
2. “InsertImage”, “UpdateImage”, “imgSrc”, “imgAlt”, “imgAlign”,
“imgBorder”, “imgWidth”, “imgHeight”, “imgHspace”,
“imgVspace” Methods
6. Asset Related Methods & Properties
1. "AssetPageURL", “AssetPageWidth” & “AssetPageHeight”
Properties
2. "InsertAsset_Hyperlink" Method
3. "InsertAsset_Flash" Method
4. "InsertAsset_Video" Method
5. "InsertAsset_Image" Method
6. "InsertAsset_Sound" Method
7. "InsertCustomHTML" Method
7. Internal Link
1. "InternalLinkPageURL", “InternalLinkPageWidth” &
“InternalLinkPageHeight” Properties
8. Path Functions
I. Introduction
I. 1 Product Overview
Advanced Content Editor (ACE) is a powerful Web-based Rich/WYSIWYG Content Authoring
& Editing tool that allows you to create online HTML editing application for real time web
content publishing. It is 100% script. No downloadable ActiveX control or DLL required. All
you need is just a compatible web browser (MSIE 5.0 or above) for the client side to view the
ACE interface.
ACE is an independent client-side code that is easy to integrate into any custom web
application. It is not an integral part of any specific content management system. It provides
great flexibility and control to enable you to use it for your own custom web application &
attach the editor as many as you wish in a web/html page (as a Textarea replacement). If you
are web developers or IT professional with a background in web programming, you will find
that ACE is an easy product to understand and customize. In addition, ACE is bundled with
simple samples that provide clean and easy to follow code.
ACE provides a wide range of features and functionality to help users who have no HTML or
limited HTML knowledge to actually write html documents easily. It comes with a user-friendly
interface similar to MS Word and is equipped with a recognisable toolbar where all icons that
perform particular functions reside in. ACE provides you the flexibility to customise the code
to suit your requirements.
I. 2 Product Features





Allow you to add an online HTML editing functionality that works with standard HTML
form.
No downloadable ActiveX control or DLLs required. It is 100% Script (using DHTML &
Javascript)
Can be used to maintain/edit Database records as well as physical HTML files on the
server.
Comes with a user-friendly interface similar to MS Word.
Provides HTML editing functionalities :
o
o
o
o
o
o
o

FONT : font face, font size, font style (normal, bold, italic), font effects
(strikethrough, superscript & subscript), font underlined, font background &
foreground color.
Paragraph : Normal, Heading 1, Heading 2, Heading 3,.. etc. with Justify text (left,
center, right & full).
Standard operations : Cut, Copy, Paste, Undo & Redo.
Standard formatting : List & Numbering, Indentation (increase & decrease).
Image, Table & Hyperlink : Insert image & also update existing image properties,
Create table, edit existing table & format cell, insert/update hyperlink (text &
image) & apply hyperlink target.
SPECIAL : Insert internal asset (Document, Video, Audio, Flash animation, etc) in
the form of object or standard links, Symbol selection, horizontal line, Paste from
Word document, Print (New in 3.3), Select All (New in 3.3), Remove formatting,
Change between P and BR for line break, and functions that work on IE5.5/later
only : Insert text block/frame, Zoom (New in 3.3) & make absolute.
Editing modes : WYSIWYG & HTML view.
Special For Developers : The ability to control (enable/disable) toolbar functions, the
ability to attach multiple Instances of the editor in one page, Flexible location for
editing & publishing process, Support for relative path, Apply document style from
external css file, the ability to define style selection from external css file, the ability to
perform custom HTML insertion, the ability to incorporate custom image library &

asset/file library to be integrated with the editor, additional “Save” button (New in 3.3)
& “Insert Internal Link” button (New in 3.3).
Others : Almost all operations use “one page dialog box” and there are previews for
Font, Style & Paragraph selection. In addition, ACE uses 216 web-safe color picker
I. 3 Requirements
Basically ACE is a client side javascript object. It requires Microsoft Internet Explorer 5.0 or
above for the client side.
As for the server side, since we use Active Server Pages (ASP) and MS Access for the
working samples, you need to run Windows Personal Web Server (PWS) or Internet
Information Server (IIS). But this server requirement is only applicable if you want to run the
sample project and the image library management and asset/files library feature.
Client side requirement for ACE:
Microsoft Internet Explorer 5.0 or above (Win95, Win98, Me, NT4.0, Win2000, XP).
For some cases, you might need to apply Windows Service Pack in order to avoid browser
problem in displaying html editor.
Server side requirement:
ASP, IIS or PWS (only applicable if you want to run the sample project using the editor and
the image library management and asset/files library feature).
I. 4 Package Structure
The package comes with 14 folders.

11 folders contain simple sample applications :
o Sample01_Form
o Sample02_EditContentFromDB
o Sample03_PageProperties
o Sample04_EditContentFromFile
o Sample05_EditContentFromFile
o Sample06_StyleSelection
o Sample07_PageStyle
o Sample08_Image
o Sample09_Asset
o Sample10_DifferentFolder
o Sample11_SaveAndZoomButton (New in 3.3)

2 folders contain sample projects :
o SampleProject_EditBODY_DB
o SampleProject_EditHTML_StaticFiles

1 folder contains ACE core files, which is :
o ACE_CoreFiles
II. Installation Guide



The first thing to do is to unzip the package.
From Windows Explorer, copy the folder to your wwwroot folder.
Go to Internet Information Services, and carry out the necessary setup for the folder
by clicking properties.


Do not forget to set the security setting for the database folder (within sample projects
folder) from Windows Explorer, by clicking properties, then security, and add the
IUSR_YourComputerName user accounts with "write" access.
You need to do the same procedure for the images and files folder (within sample
projects folder) in order for Internet users to be able to upload images or files to the
server.
III. Developer Guide
III. 1 Using Advanced Content Editor
Below are the 2 steps to attach the ACE in an HTML page :
STEP 1: include the js files inside the HTML HEAD :
<script language="JavaScript" src="include/yusasp_ace.js"></script>
<script language="JavaScript" src="include/yusasp_color.js"></script>
STEP 2: put the code below anywhere within the HTML BODY :
<script>
var obj1 = new ACEditor("obj1")
obj1.width = "100%" //set editor dimension
obj1.height = 300
obj1.useStyle = false //here is how to enable/disable toolbar buttons
obj1.useAsset = false
obj1.useImage = false
obj1.usePageProperties = false
obj1.RUN() //run & show the editor
</script>
First, you need to include the js files, then, attach the editor anywhere within the BODY. As
seen on the code, you need to put object name ("obj1") as a parameter of ACEditor object.
To set the editor dimension you can use width and height properties :
obj1.width = "630" //or you can use percentage, for example : obj1.width = "80%"
obj1.height = "70%"
To run/show the editor, use :
obj1.RUN()
III. 2 Controlling Toolbar Functions
You can disable certain toolbar functions by simply changing the value to false in the specific
property corresponding to the editing function. For example :
obj1.useTable = false; // hide table button / disable table functionality
In the sample, by setting the useTable property to false will hide the "Create Table" icon in the
toolbar.
Below is the list of the properties related to this function (Note: The values are defaulted to
true):







































usePrint (New in 3.3)
useStyle
useParagraph
useFontName
useSize
useText
useSelectAll (New in 3.3)
useCut
useCopy
usePaste
useUndo
useRedo
useBold
useItalic
useUnderline
useStrikethrough
useSuperscript
useSubscript
useSymbol
useJustifyLeft
useJustifyCenter
useJustifyRight
useJustifyFull
useNumbering
useBullets
useIndent
useOutdent
useImage
useForeColor
useBackColor
useExternalLink (previously is useLink, in version 3.0)
useTable
useShowBorder (New in 3.3)
useAbsolute
useClean
useAsset
useLine
usePageProperties
useWord
Below is the list of the properties which are defaulted to false :
 useSave (New in 3.3)
 useZoom (New in 3.3)
 useInternalLink (New in 3.3)
III. 3 Content Functions
There are several methods and properties related to getting content from the editor and
putting content into the editor :







isFullHTML; specify whether the editor is used for full HTML editing or just BODY
content editing. Default value is false.
displayMode; get the editor mode (“RICH” or “HTML” view). Default value is “RICH”
getContent; read/get the edited content (in full HTML editing)
getContentBody; read/get the edited content (in BODY content editing)
putContent; put content into the editor (content can be full HTML or BODY content)
getPageCSSText; get css text defined by “Page Properties” dialog
setPageCSSText; apply css text to the edited document
III. 3.1 “isFullHTML” property
ACE can be used to edit full HTML content or content inside the BODY element only. To
specify full HTML editing we have to set isFullHTML property to true. For example :
obj1.isFullHTML = true;
If not set, the default value is false, means that we use the editor to perform BODY content
editing only. In web content management application, it is common to use WYSIWYG editor
to edit BODY content only, since the edited content will be published in a specific area within
a page.
III. 3.2 “getContent” and “getContentBody” methods
When we use ACE to edit BODY content only, we use getContentBody method to read/get
the edited content. For example :
Form1.txtContent.value = obj1.getContentBody()
When we use ACE to edit full HTML, we use getContent method to read/get the edited
content. For example :
Form1.txtContent.value = obj1.getContent()
III. 3.3 “displayMode” property
Before we read/get the content, the editor display mode must not in HTML view. To check the
display mode, we use displayMode property. For example (in a Form submission function) :
function SubmitForm()
{
if(obj1.displayMode == "HTML")
{
alert("Please uncheck HTML view")
return ;
}
//get content
Form1.txtContent.value = obj1.getContentBody()
//submit content
Form1.submit()
}
III. 3.4 “putContent” method
To put the content into the editor we use putContent. For example (in full HTML editing):
obj1. putContent("<html><head></head><body><div>Hello World!</div></body></html>")
Another example (in BODY content editing):
obj1. putContent("<H1>Hello World!</H1>")
III. 3.5 “getPageCSSText” and “setPageCSSText” methods
If we enable “Page Properties” button, we can use “Page Properties” dialog to apply several
properties to the document being edited. Using “Page Properties” dialog you can specify :






margin (left, right, top, bottom)
background color
background image
default font name
default font size
default font color
If we apply some settings to the document using “Page Properties” dialog, we can get the
applied settings in the form of css text. For example :
Form1.txtPageProperties.value = obj1.getPageCSSText()
As seen on the above code, we fill the value of an input form (txtPageProperties) with css text
applied to the document. This css text is defined by “Page Properties” dialog. Example of the
css text can be :
"FONT-SIZE: 11px; BACKGROUND-IMAGE: none; MARGIN: 3px; COLOR: black; FONTFAMILY: Verdana, Arial, Helvetica; BACKGROUND-COLOR: #ffffcc"
You can save the css text defined by Page Properties (for example, to the database, together
with the content in different field) so that you can reapply it to the document when you need to
reload the existing document for editing.
To apply the css text back to the document, we use setPageCSSText method. For example :
obj1.setPageCSSText("FONT-SIZE: 11px; BACKGROUND-IMAGE: none; MARGIN: 3px;
COLOR: black; FONT-FAMILY: Verdana, Arial, Helvetica; BACKGROUND-COLOR: #ffffcc")
IMPORTANT : getPageCSSText and setPageCSSText are needed only if you use the editor
to edit the BODY content only (not full HTML). This is because, when you edit full HTML, the
css text is automatically added in the document being edited (as inline css in the BODY
element).
III. 3.6 “useSave” and “onSave” properties (New in 3.3)
If we enable “Save” button, by setting :
obj1.useSave = true;
we can specify a function to be called when users click the “Save” button.
For example, we have a function named SubmitForm(), then we can specify :
obj1.onSave = SubmitForm;
III. 4 Stylesheet Functions
There are 4 properties related to the Stylesheet features :
 StyleSelection property; css file used to specify Style Selection feature
 StyleSelectionPath_RelativeTo_EditorPath property; location of the css file (specified
in StyleSelection property) relative to the editor location.
 PageStyle property; css file used to be applied to the document
 PageStylePath_RelativeTo_EditorPath property; location of the css file (specified in
PageStyle property) relative to the editor location.
By using StyleSelection and StyleSelectionPath_RelativeTo_EditorPath properties, you can
define style selection listed in the “Style” dropdown on the editor.
By using PageStyle and PageStylePath_RelativeTo_EditorPath properties, you can apply
external stylesheet into the edited document.
Note that in the production environment you need to include all style you use in the editing
process. If you use the editor to edit full HTML (isFullHTML=true), link to the stylesheet you
use is automatically added in the edited document, as shown in the HTML view below (see
green font) :
Even if you have different location for editing & publishing content,
StyleSelectionPath_RelativeTo_EditorPath and PageStylePath_RelativeTo_EditorPath still
have to be set with location of the css file relative to the location of the editor.
For different editing & publishing location you need to use base & baseEditor (explained later
in this document).
III. 5 Image Related Methods & Properties
III. 5.1 “ImagePageURL”, “ImagePageWidth” & “ImagePageHeight” Properties
To add Image Lookup functionality, you need to use "ImagePageURL" property.
This property specifies the image lookup page to be opened when the user presses the image
button on the editor toolbar. Below is the sample :
obj1.ImagePageURL = "default_image.asp"; //specify image library page
If you need to modify the width & height of the image library window page,
you can use :
obj1.ImagePageWidth = 480;//for example
obj1.ImagePageHeight = 520;
III. 5.2 “InsertImage”, “UpdateImage”, “imgSrc”, “imgAlt”, “imgAlign”, “imgBorder”,
“imgWidth”, “imgHeight”, “imgHspace”, “imgVspace” Methods
In the image lookup page you may need to use several methods :


InsertImage()
This method is used to insert image into the editor.
Params : url,alt,align,border,width,height,hspace,vspace
UpdateImage()
This method is used to update selected image in the editor.
Params : url,alt,align,border,width,height,hspace,vspace

Use these methods to get selected image properties :
imgSrc()
imgAlt()
imgAlign()
imgBorder()
imgWidth()
imgHeight()
imgHspace()
imgVspace()
Sample uses :
window.opener.obj1.InsertImage(...[params]...)
window.opener.obj1.UpdateImage(...[params]...)
inpImgURL.value = window.opener.obj1.imgSrc()
Note: obj1 is the editor object. inpImgURL is a sample input textbox we use to display image
url/source.
We use window.opener since we access the object from the newly opened window.
If we implement multiple editors, we need to get the current active editor first. This can be
done using :
oName=window.opener.oUtil.oName // return "obj1" (for example)
obj = eval("window.opener."+oName) //get the editor object
then we can use :
obj.InsertImage(...[params]...)
obj.UpdateImage(...[params]...)
inpImgURL.value = obj.imgSrc()
By using the above methods & properties, it is possible for you to create your own image
library page and attach it to the editor.
III. 6 Asset Related Methods & Properties
III. 6.1 "AssetPageURL", “AssetPageWidth” & “AssetPageHeight” Properties
These properties are added to cater for users that need to insert objects or links to their
internal resources (links to local pages in the same server or links to documents, such as doc,
pdf, etc.). For this, you need to specify asset/files lookup page to be opened. Note: the
“Asset” button is enabled by default.
Here is the example of implementing this property:
obj1.AssetPageURL = "default_Asset.asp";
When the user clicks the "Asset" icon, it opens default_Asset.asp (internal asset/files lookup
page). The default_Asset.asp is just a sample, you can build your own file browser to be used
as the asset/files lookup page.
If you need to modify the width & height of the asset/files lookup page,
you can use :
obj1.AssetPageWidth = 480;//for example
obj1.AssetPageHeight = 520;
To insert an internal link or object, we provide several methods :
 InsertAsset_Hyperlink
 InsertAsset_Flash
 InsertAsset_Video
 InsertAsset_Image
 InsertAsset_Sound
 InsertCustomHTML
III. 6.2 "InsertAsset_Hyperlink" Method
This function is used to insert an internal link (links to local pages/files in the same server).
Parameters: source, Link Text
Example:
obj1.InsertAsset_Hyperlink(“http://www.yusasp.com”, “Click Here”)
III. 6.3 "InsertAsset_Flash" Method
This function is used to insert Flash animation.
Parameters: source, width, height
Example:
obj1.InsertAsset_Flash(“banner.swf”, 468, 60)
III. 6.4 "InsertAsset_Video" Method
This function is used to insert Video.
Parameter: source
Example:
obj1.InsertAsset_Video(“myvideo.wmv”)
III. 6.5 "InsertAsset_Image" Method
This function is used to insert Image.
Parameter: source
Example:
obj1.InsertAsset_Image(“myphoto.jpg”)
III. 6.6 "InsertAsset_Sound" Method
This function is used to insert Sound.
Parameter: source
Example:
obj1.InsertAsset_Sound (“myvideo.wma”)
III. 6.7 "InsertCustomHTML" Method
InsertCustomHTML() basically can be used to insert some custom prepared html content
(company signature, address, image link, etc), for example when a user clicks a button, some
custom html content will be inserted automatically to the editor. This function is meant for
inserting any custom HTML that is specific to each users requirement.
Parameter: HTML Text
Example:
obj1.InsertCustomHTML(“<B>YusASP.com</B>”)
III. 7 Internal Link
(New in 3.3)
III. 7.1 "InternalLinkPageURL", “InternalLinkPageWidth” & “InternalLinkPageHeight”
Properties
Internal Links (links to local pages/resources in the same server) are considered as Assets.
As explained in the previous section, we have “Asset” button and InsertAsset_Hyperlink()
method that can be used to insert internal link.
To cater for users that need separate button to insert internal links only, ACE has “Internal
Link” button that can be enabled using “useInternalLink” property.
Obj1. useInternalLink = true;
Then, you need to specify the links lookup page to be opened.
obj1.InternalLinkPageURL = " default_AssetLink.asp";
You can also define the dimension of the window opened.
obj1.InternalLinkPageWidth = 480;
obj1.InternalLinkPageHeight = 520;
III. 8 Path Functions
There are 2 properties related to the Path handling :
 base property; where we publish the edited content
 baseEditor property; where we edit the content (location of the editor)
Using these properties, you can implement different location/folder for editing and publishing
content.
For example, we have folder structure as illustrated below :
Picture 10. Sample folder stucture.
Then we can set the 2 properties as follow :
obj1.base = "http://YourServer/Sample10_DifferentFolder/" //where the users see the
content (where we publish the edited content)
obj1.baseEditor = "http://YourServer/Sample10_DifferentFolder/admin/" //location of
the editor
Note that we also have to place Image, document & multimedia file browser
(default_Image.asp & default_Asset.asp) in the same location with the editor (default.asp).
However, you can specify any location for the images, document & multimedia files. In the
above example the images folder is “images” and the document & multimedia folder is “files”.
By setting these 2 properties, editor will internally maintain all inserted images, objects & links
so that when we save/publish the content there should be no broken links/images/objects.
This will give the flexibility to place the editor anywhere and to publish the results anywhere
(in the same domain). Also you can specify your own location of images, document &
multimedia files according to your needs.
COPYRIGHT
Copyright 2001-2003 Yusuf Wiryonoputro
All rights reserved.
www.YusASP.com