Innova Studio Developers Guide

InnovaStudio WYSIWYG Editor - Developer's Guide
1 of 3
http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...
Examples | Developer's Guide | ASP.NET Developer's Guide

I. Getting Started
1. Installation
2. Textarea Replacement
3. Loading Content into the Editor
4. Setting the Editor Dimension
II. Applying Stylesheet
III. Using Asset Manager Add-on
IV. Advanced Settings
V. Extending the Editor
VI. Toolbar
VII. Localization
VIII. FAQ
I. Getting Started
I.1. Installation
Unzip the Editor package & copy all files into your web server. You should have the following
folders and files:
Open file default.htm to browse the examples and the documentation. According to several
examples, it is recomended that you copy all files into a virtual directory named Editor in your
web server, so that you can access the examples by opening:
http://yourserver/Editor/default.htm
Note:
InnovaStudio WYSIWYG Editor script is located in folder scripts. You
just need this folder to use the Editor in your web pages.
I.2. Textarea Replacement

1. Copy the scripts folder anywhere in your web server (please do not rename it).
2. Include the Editor script file (innovaeditor.js - located in the scripts folder) in the <head>
section of your web page.
3. Initialize & embed the Editor below the <textarea> youd like to replace.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="Javascript" src="scripts/innovaeditor.js"></script>
27/07/2006 4:08 PM
2 of 3
</head>
<body>
<form method="post" action="post.asp" id="Form1">
<textarea id="txtContent" name="txtContent" rows=4 cols=30></textarea>
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.REPLACE("txtContent");
</script>
<input type="submit" value="submit">
</form>
</body>
</html>
As seen on the above code, specify the textarea id as parameter for the REPLACE method.
I.3. Loading Content into the Editor

The Editor automatically loads content from the textarea. You just need to set the textarea value
(which can be from server side variable or any source, eg. from a database). In the previous
version of the Editor, we recommended to use Server.HTMLEncode (for ASP) or htmlentities
(for PHP) to write a value into the textarea. In the current version, please use our simple
encodeHTML() function as shown below :
ASP Example
<html>
<head>
<script language=JavaScript src="../scripts/innovaeditor.js"></script>
</head>
<body>
<form method="post" action="default.asp" id="Form1">
<textarea id="txtContent" name="txtContent" rows=4 cols=30>
<%
function encodeHTML(sHTML)
sHTML=replace(sHTML,"&","&")
sHTML=replace(sHTML,"<","<")
sHTML=replace(sHTML,">",">")
encodeHTML=sHTML
end function
Response.Write encodeHTML(Request("txtContent"))
%>
</textarea>
<script>
</script>
<input type="submit" value="Submit">
</form>
</body>
</html>
PHP Example
<html>
<head>
<script language=JavaScript src='../scripts/innovaeditor.js'></script>
</head>
<body>
<form method="post" action="default.php" id="Form1">
<textarea id="txtContent" name="txtContent" rows=4 cols=30>
<?
function encodeHTML($sHTML)
27/07/2006 4:08 PM
3 of 3
{
$sHTML=ereg_replace("&","&",$sHTML);
$sHTML=ereg_replace("<","<",$sHTML);
$sHTML=ereg_replace(">",">",$sHTML);
return $sHTML;
}
if(isset($_POST["txtContent"]))
{
$sContent=stripslashes($_POST['txtContent']); //Remove slashes
echo encodeHTML($sContent);
}
?>
</textarea>
<script>
</script>
<input type="submit" value="Submit">
</form>
</body>
</html>
I.4. Setting the Editor Dimension

Editor dimension can be adjusted using the width and height properties. For example:
<script>
oEdit1.width="100%";
oEdit1.height="350px";
</script>
Please note that by default, you can't set the Editor width less than 565 pixels. To set the Editor
width less than 565 pixels, you'd need to apply toolbar line breaks using features property. More
info
2003-2005, INNOVA STUDIO (www.InnovaStudio.com). All rights reserved.
27/07/2006 4:08 PM
1 of 2

I. Getting Started
1. Applying Stylesheet Using External Css File
2. Enabling the Style Selection feature
3. Applying Stylesheet Without Using Css File
VI. Toolbar
VII. Localization
VIII. FAQ

II.1. Applying Stylesheet Using External Css File
To apply an external css file, specify the css file using css property:
<script>
oEdit1.css="style/test.css";
</script>
If you speciify BODY style in your css file, for example:
BODY
{
background:steelblue;
color:white;
font-family:Verdana,Arial,Helvetica;
}
This will apply a background color of "steelblue", font color of "white", and font family of
"Verdana,Arial,Helvetica" to the Editor content as shown in the screenshot below:
II.2. Enabling the Style Selection feature

Style Selection feature allows you to select & apply styles to the Editor content. To enable the
style selection feature, set btnStyles property to true.
<script>
oEdit1.css="style/test.css";
oEdit1.btnStyles=true;
</script>
All class selectors defined in the css file will be listed in the Style Selection. For example, the class
selector CodeInText below will be included in the Style Selection.
.CodeInText {font-family:Courier New;font-weight:bold;}
27/07/2006 4:12 PM
2 of 2
Only HTML selectors will not be included in the Style Selection. For example, the HTML selector P
below will not be included.
P {font-family:Verdana,Arial,Helvetica;}
II.3. Applying Stylesheet Without Using Css File

To apply stylesheet without using external css file, use arrStyle property, for example:
<script>
oEdit1.arrStyle = [["BODY",false,"","background:steelblue; color:white;
font-family:Verdana,Arial,Helvetica;"],
["a:link",false,"","color:white; font-weight:bold;"],
["a:active",false,"","color:white; font-weight:bold;"],
["a:visited",false,"","color:whitesmoke;font-weight:bold;"],
[".CodeInText",true,"Code In Text",
"font-family:Courier New;font-weight:bold;"]];
oEdit1.btnStyles = true;
</script>
arrStyle property allows you to specify the style rules (in the form of array). Each rule is
constructed by:
HTML/Class Selector
True/false parameter to specify whether the style will be included in the Style Selection list
or not.
Caption (the displayed text for the Style Selection list)
Css Text
27/07/2006 4:12 PM
1 of 4

I. Getting Started
1. Enabling the Asset Manager Add-on
2. Multiple Asset Base/Root Folders
3. Localization
4. Returning Absolute Path
VI. Toolbar
VII. Localization
VIII. FAQ

III.1. Enabling the Asset Manager Add-on
Included in the Editor is an Asset Manager add-on. Using the Asset Manager add-on, you can
browse and manage your web assets (upload and delete files, create and delete folders). Asset
Manager add-on is located in folder assetmanager. The main file is assetmanager.asp (for ASP)
and assetmanager.php (for PHP). To enable the Asset Manager add-on:
1. Copy the assetmanager folder anywhere in your web server.
2. Specify a command to open the add-on using cmdAssetManager property:
<script>
oEdit1.cmdAssetManager="modalDialogShow('/assetmanager/assetmanager.asp',640
</script>
or
<script>
oEdit1.cmdAssetManager="modalDialogShow('/assetmanager/assetmanager.php',640
</script>
modalDialogShow() function is a built-in function that you can use to open a web page in a
new window dialog. The parameters are: url, dialog width & dialog height.
Important:
Please use 'relative to root' path when specifying the location of the
assetmanager.asp. 'Relative to root' path always starts with "/".
3. Specify your web assets location. If you're using ASP, open settings.asp (in the
assetmanager folder) using your text editor & set the arrBaseFolder variable with the
location of your web assets folder (please use "relative to root" path). Then give a friendly
name/caption using arrBaseName:
arrBaseFolder(0)="/assets/"
arrBaseName(0)="Assets"
The above settings means that your web asset files are located in
"http://yourserver/assets/" and the displayed name is "Assets". As a result, the folder
selection dropdown in Asset Manager dialog page will display "Assets" and all sub folders
27/07/2006 4:13 PM
2 of 4
within it:
If you're using PHP, open settings.php (in the assetmanager folder) & set the
sBaseVirtual0 variable with the location of your web assets folder (please use "relative to
root" path). Then specify its real/physical path using sBase0 variable and give a friendly
name/caption using sName0:
$sBaseVirtual0="/assets";
$sBase0="c:/inetpub/wwwroot/assets";
$sName0="Assets";
Important:
Your web asset folder must have Write Permission.
If you enable the Asset Manager add-on, these dialogs will automatically show a Browse button
:
Hyperlink dialog
Image dialog
Insert Flash dialog
Insert Media dialog
Background Image dialog (opened from table and cell properties dialogs)
The Browse button will open the Asset Manager add-on dialog so that you can select a file which
can be inserted as hyperlink or object (image, flash, video, etc).
27/07/2006 4:13 PM
3 of 4
III.2. Multiple Asset Base/Root Folders

Asset Manager add-on allows you to specify more than one base/root folder (up to 4). Here are
example settings in seetings.asp or settings.php :
seetings.asp
arrBaseFolder(0)="/assets/"
arrBaseName(0)="Assets"
arrBaseFolder(1)="/public_assets/"
arrBaseName(1)="Public Assets"
or
settings.php
$sBaseVirtual0="/assets";
$sBase0="c:/inetpub/wwwroot/assets";
$sName0="Assets";
$sBaseVirtual1="/public_assets";
$sBase1="c:/inetpub/wwwroot/public_assets";
$sName1="Public Assets";
III.3. Localization
If required, you can localize the Asset Manager add-on to be displayed in specific language by
setting the lang variable in querystring:
ASP Example
<script>
oEdit1.cmdAssetManager="modalDialogShow
('/assetmanager/assetmanager.asp?lang=german',640,445);";
</script>
or
PHP Example
<script>
oEdit1.cmdAssetManager="modalDialogShow
('/assetmanager/assetmanager.php?lang=german',640,445);";
</script>
The current available values lang variable are: danish, dutch, finnish, french, german, schi
(Chinese Simplified), tchi (Chinese Traditional), norwegian, spanish, swedish. If lang variable is
not specified, English version will be displayed.
III.4. Returning Absolute Path

The Asset Manager dialog will return the selected file url in the form of 'relative to root' path, for
example:
/assets/image.gif
If required, it can be changed to return absolute path by setting. Here is the setting required in
seetings.asp and settings.php :
seetings.asp
bReturnAbsolute=true
27/07/2006 4:13 PM
4 of 4
or
settings.php
$bReturnAbsolute=true;
This will make the Asset Manager dialog returns:
http://yourservername/assets/image.gif
Inserting images using absolute path usually is required if you use the Editor in web-based email
applications.
27/07/2006 4:13 PM
1 of 4

I.
II.
III.
IV.
V.
VI.
VII.
VIII.
Getting Started
Applying Stylesheet
Using Asset Manager Add-on
Advanced Settings
1. Setting the Editing Mode
2. Loading Content at Runtime
3. Getting the Current Content
4. Editing & Publishing Path
5. Line Break
6. Spell-Checking Integration
7. Setting the Editor Focus
8. Adding Custom Color Selection
Extending the Editor
Toolbar
Localization
FAQ

IV.1. Setting the Editing Mode
InnovaStudio WYSIWYG Editor has 4 editing modes:
1.
2.
3.
4.
HTMLBody; enables the Editor to edit/return HTML BODY section only.

HTML; enables the Editor to edit/return full HTML Content.
XHTMLBody; enables the Editor to edit/return HTML BODY section with XHTML rules applied.
XHTML; enables the Editor to edit/return full HTML Content with XHTML rules applied.
By default, the Editing Mode is set to HTMLBody. To specify the editing mode, use mode property.
For example:
<script>
oEdit1.mode="HTML";
</script>
Editing full HTML content is useful if you wish to save the content as a static html file. However, in
many dynamic web applications today (e.g. in database-driven web applications or web content
management systems where the ability to manage certain/specific area is required), the HTMLBody
or XHTMLBody editing modes are more likely to be used.
IV.2. Loading Content at Runtime

InnovaStudio WYSIWYG Editor allows you to load content at runtime, which will replace the
current Editor content.
Use putHTML() method to load full HTML content. The syntax is:
oEdit1.putHTML(sHTML)
where sHTML is the full HTML content. Note that putHTML() will also replace the current content
style defined by arrStyle property or css property.
Use loadHTML() method to load HTML Body content. The syntax is:
oEdit1.loadHTML(sHTML)
where sHTML is the HTML Body content.
27/07/2006 4:13 PM
2 of 4
IV.3. Getting the Current Content

InnovaStudio WYSIWYG Editor allows you to get/read the current Editor content.
Use getHTML() method to get full HTML content. The syntax is:
oEdit1.getHTML()
Use getXHTML() method to get full HTML content with XHTML rules applied. The syntax is:
oEdit1.getXHTML()
Use getHTMLBody() method to get HTML Body content. The syntax is:
oEdit1.getHTMLBody()
Use getXHTMLBody() method to get HTML Body content with XHTML rules applied. The syntax is:
oEdit1.getXHTMLBody()
IV.4. Editing & Publishing Path

Lets' say you embed the editor in a web page located in a folder admin :
http://YourServer/admin/edit.asp
The Editor is used for editing content from a database. Then, to view the result, you read the
edited content from the database and display it on another web page located in the root of your
server:
http://YourServer/view.asp
In this case, you have different locations for editing & viewing (publishing): the admin folder is the
Editing path and the 'root' is the Viewing/Publishing path. This will raise a problem if the edited
content contains an image that has a relative path, for example:
<img src="images/photo.jpg">
The image won't be displayed when viewing the content. This is because, in Editing, it assumes
that the image is located in:
http://YourServer/admin/images/photo.jpg
Whereas in Publishing, it assumes that the image is located in:
http://YourServer/images/photo.jpg
This shouldn't be a problem if both Editing and Viewing/Publishing have the same location. To
make the Editing location flexible (regardless the Viewing/Publishing location), there are 2
methods:
1. Specify the publishingPath property of the Editor to point to the viewing/publishing path. In
this way all relative urls will consistently be considered as relative to the publishing path. For
example:
<script>
oEdit1.publishingPath="http//YourServer/";
</script>
With this setting, if we insert an image into the content:
<img src="images/photo.jpg">
27/07/2006 4:13 PM
3 of 4
It is considered to be located at : http//YourServer/images/photo.jpg (regardless where

the Editing process is).
2. Always insert images or any other objects using 'Relative to Root' path, for example:
<img src="/images/photo.jpg">
Note: 'Relative to Root' always start with "/".
In this way, the image is always seen from: http//YourServer/images/photo.jpg
(regardless where the Editing process is).
With the above methods, the Editing location would be flexible. Means that you can use the Editor
in any location on your web server, regardles where you'd like to view/publish the result.
Note:
it's a good idea to always use 'relative to root' path when inserting an
image or other objects as it doesn't generate a problem if you have
different location for Editing and Publishing (and you don't need to set the
publishingPath property).
InnovaStudio WYSIWYG Editor has an Asset Manager add-on that you
can use to select a file and return the 'relative to root' path of the file. By
using the Asset Manager add-on you dont need to set the
publishingPath property.
IV.5. Line Break

In IE browser, if you press [ENTER] for line break the Editor will apply <DIV> by default. In
Netscape, Mozilla & Firefox, <BR> will be applied.
In IE browser, you can change the behaviour to apply <P> or <BR> by default. To apply <P> by
default, set useDIV property to false:
<script>
oEdit1.useDIV=false;
</script>
To apply <BR> by default, set useBR property to true:
<script>
oEdit1.useBR=true;
</script>
Below are the possible values for useDIV and useBR (in IE):
useDIV useBR Line Break
True
False <DIV> *
False
False <P>
True
True
<BR>
False
True
<BR>
* except if the current paragraph is Heading (H1-H6) or Preformatted (PRE)

You can set the useDIV and useBR properties programatically at runtime, thus allows you to
change the Editor behaviour while it is running. Note that useDIV and useBR only available in IE.
27/07/2006 4:13 PM
4 of 4
They will not take effect in Netscape, Mozilla and Firefox.
IV.6. Spell-Checking Integration

InnovaStudio WYSIWYG Editor can be easily integrated with ieSpell (from www.iespell.com). To
enable the "Spell Check" button, set btnSpellCheck property to true:
<script>
oEdit1.btnSpellCheck=true;
</script>
Note that this feature is available only for IE Browser.
InnovaStudio WYSIWYG Editor can also be integrated with NetSpell (from
sourceforge.net/projects/netspell/). More info
IV.7. Setting the Editor Focus

To set focus the Editor, use focus() method, for example:
oEdit1.focus();
IV.8. Adding Custom Color Selection

You can add custom/predefined color selection to the Editor color picker dropdown. The color
picker dropdown can be accessed through "Text Foreground Color" button, "Text Background
Color" button and "Pick" buttons in several editing dialogs.
To add custom color selection, set customColors property with an array of the custom colors. For
example:
<script>
oEdit1.customColors=["#ff4500","#ffa500","#808000","#4682b4",
"#1e90ff","#9400d3","#ff1493","#a9a9a9"];
</script>
27/07/2006 4:13 PM
1 of 3

I.
II.
III.
IV.
V.
Getting Started
Applying Stylesheet
Advanced Settings
1. Calling the Editor Object from a Popup/Window dialog
2. Inserting Custom Content
a. Inserting Custom Tags
b. Inserting Custom Links
c. Inserting Custom HTML Content
VI. Toolbar
VII. Localization
VIII. FAQ

V.1. Calling the Editor Object from a Popup/Window dialog
Calling the Editor object from a Popup Window or Modal/Modeless dialog sometimes is required if
youd like to exted the functionality of the Editor, for example if you want to create a custom
content insertion from a popup/window dialog.
InnovaStudio WYSIWYG Editor provides a oUtil object with obj property that you can use to call
the active Editor object. If you have more than one Editor in a web page, the obj property will
return the object of the current selected Editor (where the cursor is placed).
To call the oUtil.obj from a popup window, use:
var oEdit=window.opener.oUtil.obj;
To call the oUtil.obj from a modal/modeless dialog (IE only), use:
var oEdit=dialogArguments.oUtil.obj;
Example use of the oUtil object will be explained in the next sections (Inserting Custom Links &
Inserting Custom HTML Content).
V.2. Inserting Custom Content

V.2.a. Inserting Custom Tags
InnovaStudio WYSIWYG Editor has a Custom Tag Insertion feature. With this feature, you can
insert predefined custom tags into the current Editor content. Custom Tag insertion is a feature
that is commonly used in mailing applications or template editing in web content management
systems. To use Custom Tag Insertion feature, set arrCustomTag property with an array of your
Custom Tags in the form of ["Caption", "Custom Tag"], for example :
<script>
oEdit1.arrCustomTag=[["First Name","{%first_name%}"],
["Last Name","{%last_name%}"],
["Email","{%email%}"]];
</script>
27/07/2006 4:15 PM
2 of 3
V.2.b. Inserting Custom Links

InnovaStudio WYSIWYG Editor allows you to insert Custom Links using insertLink() method.
With this feature, you can create a functionality to insert 'Internal Links' (links to other
documents/files on your server).
The parameters of insertLink() method are: url, title (optional) and target (optional). For
example:
oEdit1.insertLink("products.htm","Products","_blank");
This will insert:
<a href="products.htm" target="_blank">Products</a>
If it is applied to a selected text, the result is:
<a href="products.htm" target="_blank">selected text</a>
To create a functionality to insert 'Internal Links' you can create a custom link lookup page.
InnovaStudio WYSIWYG Editor has an optional 'Internal Link' button that can be enabled to call
your custom link lookup page in a window/dialog. To enable the button, set the cmdInternalLink
property with a command to open your custom link lookup page, for example:
<script>
oEdit1.cmdInternalLink="modelessDialogShow(links.asp',365,250)";
</script>
modelessDialogShow() function is a built-in function that you can use to open a web page in a
new window dialog. The parameters are: url, dialog width & dialog height.
In the above example we created custom link lookup page named links.htm. In this page you
can call the Editor object (using oUtil.obj as explained before) and use insertLink() method to
insert links into the current Editor content. Below is a sample Javascript implementation that you
can use in links.htm:
<script>
function doInsert(url,title,target)
{
if(navigator.appName.indexOf('Microsoft')!=-1)
{/*For IE browser, use dialogArguments.oUtil.obj
to get the active editor object*/
var oEdit=dialogArguments.oUtil.obj;
oEdit.insertLink(url,title,target);
}
else
{/*For Mozilla browsers, use window.opener.oUtil.obj
to get the active editor object*/
var oEdit=window.opener.oUtil.obj;
oEdit.insertLink(url,title,target);
}
}
</script>
27/07/2006 4:15 PM
3 of 3
As seen on the code, we created a function doInsert() and then get the Editor object to be able
to call the insertLink() method.
V.2.c. Inserting Custom HTML Content
InnovaStudio WYSIWYG Editor allows you to insert custom HTML into the current Editor content.
For this purpose, use the insertHTML() method. For example, this dropdown will insert custom
html content into the Editor:
<select onchange="oUtil.obj.insertHTML(this.value)">
<option value="" selected>Insert..</option>
<option value="<h1>InnovaStudio</h1>">Company Name</option>
<option value="<img src='/images/logo.gif' />">Company Logo</option>
</select>
In the above example, we called the oUtil.obj directly, not using window.opener.oUtil.obj or
dialogArguments.oUtil.obj (since it is implemented in the same page where the Editor is
embedded, not implemented in a popup/dialog). You can also call the Editor object name directly,
for example: oEdit1. However, using oUtil.obj is recommended if you have multiple instances
of the Editor since it will refer to the current/active Edtor object (where the cursor is placed).
You can also create a custom lookup page which list your custom html content that can be
inserted into the current Editor content. For this purpose, InnovaStudio WYSIWYG Editor has a
'Custom Object' button which can be enabled to open your own custom html Lookup page. To
enable the 'Custom Object' button, set the cmdCustomObject property with command to open
your custom lookup page :
<script>
oEdit1.cmdCustomObject="modelessDialogShow('objects.htm',365,250)";
</script>
27/07/2006 4:15 PM
1 of 7

I.
II.
III.
IV.
V.
VI.
Getting Started
Applying Stylesheet
Advanced Settings
Toolbar
1. Configuring the Toolbar Buttons
2. Adding Custom Buttons
3. Tag Selector Settings
VII. Localization
VIII. FAQ
VI. Toolbar
VI.1. Configuring Toolbar Buttons
You can show/hide toolbar buttons using 2 ways:
1. By setting true/false to the appropriate properties. For example, this will show the "Clear All"
button:
<script>
oEdit1.btnClearAll=true;
</script>
The "Clear All" button is disabled by default. As seen on the above example, to enable/show
the "Clear All" button, we set btnClearAll property to true. Please Note that some toolbar
buttons are disabled by default. Please refer to the button list at the end of this section.
2. By specifying the name of the buttons you'd like to display using features property. Using the
features property, you specify also the button ordering, as well as button spaces and toolbar
line breaks. Below is an example:
<script>
oEdit1.features=["FullScreen","Preview","Print","Search",
"Cut","Copy","Paste","PasteWord","PasteText","|","Undo","Redo","|",
"ForeColor","BackColor","|","Bookmark","Hyperlink","XHTMLSource","BRK",
"Numbering","Bullets","|","Indent","Outdent","LTR","RTL","|",
"Image","Flash","Media","|","Table","Guidelines","Absolute","|",
"Characters","Line","Form","RemoveFormat","ClearAll","BRK",
"StyleAndFormatting","TextFormatting","ListFormatting","BoxFormatting",
"ParagraphFormatting","CssText","Styles","|",
"Paragraph","FontName","FontSize","|",
"Bold","Italic","Underline","Strikethrough","|",
"JustifyLeft","JustifyCenter","JustifyRight","JustifyFull"];
</script>
Note:
Use "|" for Space Break and "BRK" for Line Break.
The result is shown below:
27/07/2006 4:16 PM
2 of 7
For a list of button names, please refer to the button list below.
List of buttons (includes also menu items & dropdowns):
Icon
Description
Name
Property
Default Va
"Save" button.
Save
btnSave
false
"Full Screen"
button.
FullScreen
btnFullScreen
true
"Preview" button. Preview
btnPreview
true
"Print" button.
Print
btnPrint
false
"Search" button.
Search
btnSearch
true
"Spell Check"
button.
SpellCheck
btnSpellCheck
false
StyleAndFormatting
(No Property)
"Style &
Formatting"
button.
This button
opens a menu
which has:
"Text
Formatting"
menu item
"List
Formatting"
menu item
"Box
Formatting"
menu item
"Paragraph
Formatting"
menu item
"Custom
Css" menu
item
This button is enabled by

default as well as the
menu items:
"Text Formatting"
menu item
"List Formatting"
menu item
"Box Formatting"
menu item
"Paragraph
Formatting" menu
item
"Custom Css" menu
item
If you disabled all the
above menu items (by
setting
btnTextFormatting,
btnListFormatting,
btnBoxFormatting,
btnParagraphFormatting
and btnCssText
properties to false, this
button would
automatically disabled.
If you're using features
property, you can
show/hide this button by
27/07/2006 4:16 PM
3 of 7
including or not including

the button name
"StyleAndFormatting" in
the features property
value. You'd also need to
include at least one of its
menu items
("TextFormatting",
"ParagraphFormatting",
"ListFormatting",
"BoxFormatting",
"CssText") in the
features property value.
"Text Formatting" TextFormatting
menu item.
btnTextFormatting
true
"Paragraph
Formatting"
menu item.
ParagraphFormatting btnParagraphFormatting true
"List Formatting"
menu item.
ListFormatting
btnListFormatting
true
"Box Formatting"
menu item.
BoxFormatting
btnBoxFormatting
true
"Custom Css"
menu item.
CssText
btnCssText
true
"Cut" button.
Cut
btnCut
true
"Copy" menu
item.
Copy
btnCopy
true
"Paste" button.
Paste
btnPaste
true
"Paste from
Word" button.
PasteWord
btnPasteWord
true
27/07/2006 4:16 PM
4 of 7
"Paste Text"
button.
PasteText
btnPasteText
false
"Undo" button.
Undo
btnUndo
true
"Redo" button.
Redo
btnRedo
true
"Text Color"
button.
ForeColor
btnForeColor
true
"Text Background
BackColor
Color" button.
btnBackColor
true
"Bookmark"
button.
Bookmark
btnBookmark
true
"Hyperlink"
button.
Hyperlink
btnHyperlink
true
"Custom Tag"
button.
CustomTag
(No Property)
"Image" button.
Image
btnImage
true
"Flash" button.
Flash
btnFlash
false
"Media" button.
Media
btnMedia
false
"Internal Link"
button.
InternalLink
(No Property)
"Custom Object"
button.
CustomObject
"Table" button.
Table
btnTable
true
"Guidelines"
button.
Guidelines
btnGuidelines
true
"Absolute"
button.
Absolute
btnAbsolute
true
"Secial
Characters"
button.
Characters
btnCharacters
true
"Horizontal Line"
button.
Line
btnLine
true
This butttom will

automatically enabled if
you specify the
arrCustomTag property.
More info
This butttom will

you specify the
cmdInternalLink
property. More info
(No Property)
This butttom will

you specify the
cmdCustomObject
property. More info
27/07/2006 4:16 PM
5 of 7
"Form" button.
Form
btnForm
true
"Remove
Formatting"
button.
RemoveFormat
btnRemoveFormat
true
XHTMLFullSource
(No Property)
"Source Editor"
button for full
HTML editing.
If the Editor editing mode

is set to "HTML" or
"XHTML", this button
would automatically
displayed.
property, you can
the button name
"XHTMLFullSource" in the
"Source Editor"
button for HTML
BODY content
editing.
XHTMLSource
(No Property)
If the Editor editing mode

is set to "HTMLBODY" or
"XHTMLBODY", this
button would
automatically displayed
(This this button is
displayed by default as
the Editor has default
editing mode set to
"HTMLBODY").
property, you can
the button name
"XHTMLSource" in the
"Clear All"
button.
ClearAll
btnClearAll
false
"Style Selection"
button.
Styles
btnStyles
false
"Paragraph"
dropdown.
Paragraph
btnParagraph
true
"Font" dropdown.
FontName
btnFontName
true
"Font Size"
dropdown.
FontSize
btnFontSize
true
"Bold" button.
Bold
btnBold
true
"Italic" button.
Italic
btnItalic
true
"Underline"
button.
Underline
btnUnderline
true
27/07/2006 4:16 PM
6 of 7
"Strikethrough"
button.
Strikethrough
btnStrikethrough
false
"Superscript"
button.
Superscript
btnSuperscript
false
"Subscript"
button.
Subscript
btnSubscript
false
"Justify Left"
button.
JustifyLeft
btnJustifyLeft
true
"Justify Center"
button.
JustifyCenter
btnJustifyCenter
true
"Justify Right"
button.
JustifyRight
btnJustifyRight
true
"Justify Full"
button.
JustifyFull
btnJustifyFull
true
"Numbering"
button.
Numbering
btnNumbering
true
"Bullets" button.
Bullets
btnBullets
true
"Indent" button.
Indent
btnIndent
true
"Outdent"
button.
Outdent
btnOutdent
true
"Left to Right"
button.
LTR
btnLTR
false
"Right to Left"
button.
RTL
btnRTL
false
*IE : Internet Explorer 5.5/later (Windows)

*Moz: Netscape 7.1/later, Mozilla 1.4/later & Firefox 1.0/later (Windows & Mac OS X)
VI.2. Adding Custom Buttons

To add custom buttons on the Editor toolbar, use arrCustomButtons property and specify the
features property to include the custom button names. Below is an example:
<script>
oEdit1.arrCustomButtons=[["ButtonName1","alert('Command 1 here')","Caption 1
["ButtonName2","alert(\"Command '2' here\")","Caption 2","btnCustom.gif
["ButtonName3","alert('Command \"3\" here')","Caption 3","btnCustom.gif
oEdit1.features=["Preview","FullScreen","Search",
"StyleAndFormatting","TextFormatting","ListFormatting",
"BoxFormatting","ParagraphFormatting","CssText","Styles","|",
"Paragraph","FontName","FontSize","|","Cut","Copy","Paste",
"PasteWord","|","Undo","Redo","|","Bold","Italic","Underline",
"JustifyLeft","JustifyCenter","JustifyRight","JustifyFull",
"BRK","Numbering","Bullets","Indent","Outdent","|",
"ForeColor","BackColor","|","Bookmark","Hyperlink","Image",
"Flash","Media","|","Table","Border","Guidelines","Absolute","|",
"Characters","Line","Form","RemoveFormat","XHTMLSource","|",
"ButtonName1","ButtonName2","ButtonName3"];
</script>
As seen on the above code, you need to set the arrCustomButtons property with:
27/07/2006 4:16 PM
7 of 7
Button Name
Command to execute
Caption
Image/icon (You'd need to create your own image or you can use the provided
btnCustom1.gif btnCustom7.gif)
You can re-arrange the custom buttons at any position on the toolbar by setting the features
property.
VI.3. Tag Selector Settings

You can move the Tag Selector at the top of the editing area (below the Editor toolbar) by setting
the TagSelectorPosition property to "top". Below is an example:
<script>
oEdit1.TagSelectorPosition="top";
</script>
The result is shown below:
To hide the Tag Selector, set useTagSelector property to false.

<script>
oEdit1.useTagSelector=false;
</script>
27/07/2006 4:16 PM
1 of 2

I.
II.
III.
IV.
V.
VI.
VII.
VIII.
Getting Started
Applying Stylesheet
Advanced Settings
Toolbar
Localization
FAQ
VII. Localization
You can localize the Editor to be displayed in specific language by adding a language include file
before the Editor javascript include:
<html>
<head>
<script language="Javascript" src="scripts/language/german/editor_lang.js"><
</head>
<body>
<script>
</script>
<input type="submit" value="submit">
</form>
</body>
</html>
The current available language include files are:
Danish
<script language="Javascript" src="scripts/language/danish/editor_lang.js"></scri
Dutch
<script language="Javascript" src="scripts/language/dutch/editor_lang.js"></scrip
Finnish
<script language="Javascript" src="scripts/language/finnish/editor_lang.js"></scr
French
<script language="Javascript" src="scripts/language/french/editor_lang.js"></scri
German
<script language="Javascript" src="scripts/language/german/editor_lang.js"></scri
Norwegian
27/07/2006 4:17 PM
2 of 2
<script language="Javascript" src="scripts/language/norwegian/editor_lang.js"></s

Chinese (Simplified)
<script language="Javascript" src="scripts/language/schi/editor_lang.js"></script
Chinese (Traditional)
<script language="Javascript" src="scripts/language/tchi/editor_lang.js"></script
Spanish
<script language="Javascript" src="scripts/language/spanish/editor_lang.js"></scr
Swedish
<script language="Javascript" src="scripts/language/swedish/editor_lang.js"></scr
If no language file specified, English version will be displayed.
27/07/2006 4:17 PM
1 of 5

I.
II.
III.
IV.
V.
VI.
VII.
VIII.
Getting Started
Applying Stylesheet
Advanced Settings
Toolbar
Localization
FAQ
1. Special characters (eg. , , , , ) are not displayed correctly. How to fix this
problem?
2. All drop menus & dropdowns are misplaced. How to fix this problem?
3. When I click the "Full Screen" button, the Editor doesn't open in full screen size. How to
fix this problem?
4. When loading a content into the Editor, sometimes there are lines that disappear (when
using IE browser). When I click inside the editor they reappear. How to prevent this
behaviour?
5. Every dialogs give me an error: "Class doesn't support automation", why?
6. When I click the 'browse' button to open the Asset Manager, I get a message "The page
cannot be found". How to fix this problem?
7. When uploading large file using the Asset Manager, I get an error message: "Request
object error 'ASP 0104 : 80004005' Operation not Allowed". How to fix this problem?
8. Can I replace the Asset Manager add-on with my own File Manager?
9. When using IE, is it possible to preserve multiple spaces entered in the Editor?
10. Can I change the hover color for the Style Selector?
11. When I submit a form (where the Editor is embedded), the current content is not
submitted.
VIII. FAQ
Special characters (eg. , , , , ) are not displayed correctly. How to fix
this problem?
In the previous version of the Editor, we recommended to use Server.HTMLEncode (for ASP) or
htmlentities (for PHP) to write a value. In the current version, please use our simple
encodeHTML() function. Check our new implementation here.
All drop menus & dropdowns are misplaced. How to fix this problem?
This problem perists if the Editor is embedded in an element (eg. <div>) which has position set to
absolute or relative.
27/07/2006 4:18 PM
2 of 5
Use dropTopAdjustment property and dropLeftAdjustment property to adjust the top and left
offsets of the drop menus/dropdowns for previewing in IE and use dropTopAdjustment_moz
property and dropLeftAdjustment_moz property to adjust the top and left offsets of the drop
menus/dropdowns for previewing in Netscape/Mozilla/Firefox. Below is an example:
<script>
oEdit1.dropTopAdjustment=-50;
oEdit1.dropLeftAdjustment=-10;
oEdit1.dropTopAdjustment_moz=-42;
oEdit1.dropLeftAdjustment_moz=-8;
</script>
Please make sure also that you include a <!DOCTYPE> declaration in your web page. You can use
the following <!DOCTYPE>:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
When I click the "Full Screen" button, the Editor doesn't open in full screen
size. How to fix this problem?
This problem perists if the Editor is embedded in an element (eg. <div>) which has position set to
27/07/2006 4:18 PM
3 of 5
absolute or relative.
To solve this problem, use the Editor's built-in onFullScreen and onNormalScreen events. The
onFullScreen event is triggered when the Editor is resized to full screen. The onNormalScreen
event is triggered when the Editor is resized back to its original size.
For example, if the Editor is placed inside a <div> element with position is set to relative:
<div style="position:relative;left:100;top:100;">
<script>
</script>
</div>
Please add an ID to the <div> element and use the onFullScreen and onNormalScreen events to
call a custom function we'll create.
<div id="idEdit" style="position:relative;left:100;top:100;">
<script>
oEdit1.onFullScreen=new Function("doFullScreen()");
oEdit1.onNormalScreen=new Function("doNormalScreen()");
</script>
</div>
As seen on the above code, the onFullScreen event is set to call doFullScreen() function and
onNormalScreen event is set to call doNormalScreen() function.
Then, in the HEAD section of your web page, you can add:
<script>
function doFullScreen()
{
var idEdit=document.getElementById("idEdit");
idEdit.style.position="";
idEdit.style.left=0;
idEdit.style.top=0;
}
function doNormalScreen()
{
var idEdit=document.getElementById("idEdit");
idEdit.style.position="relative";
idEdit.style.left=100;
idEdit.style.top=100;
}
</script>
As seen on the above code, we remove the position setting of the div element (when the Editor is
resized to full screen) and then return the original setting (when the editor is resized back to
normal screen).
When loading a content into the Editor, sometimes there are lines that
disappear (when using IE browser). When I click inside the editor they
reappear. How to prevent this behaviour?
Please set initialRefresh property to true.
<script>
27/07/2006 4:18 PM
4 of 5
idEdit.initialRefresh=true;
</script>
Every dialogs give me an error: "Class doesn't support automation", why?

This problem may occur if the registration information is missing or damaged for some Windows
or Internet Explorer files.
To fix this problem, go to "Start", "Run", and in the "Open" box, type the following commands and
press enter:
regsvr32 msscript.ocx
[ENTER]
regsvr32 dispex.dll
[ENTER]
regsvr32 vbscript.dll
[ENTER]
When I click the 'browse' button to open the Asset Manager, I get a message
"The page cannot be found". How to fix this problem?
Please check the cmdAssetManager property setting. Use 'relative to root' path to specify the
location of the Asset Manager add-on page (assetmanager.asp). 'Relative to root' always starts
with "/".
When uploading large file using the Asset Manager, I get an error message:
"Request object error 'ASP 0104 : 80004005' Operation not Allowed". How to
fix this problem?
This may occur if the web server is configured to limit the size of the file that can be uploaded to
the server through ASP script (the Request object).
If your web server supports SA-FileUp Component, you can configure the Asset Manager add-on
to use the component. Open the assetmanager.asp using your text editor and change this line
(line 22):

to:

For more information on SA-FileUp Component, check www.softartisans.com.
Can I replace the Asset Manager add-on with my own File Manager?
It depends on your File Manager. This Javascript function needs to be integrated into your File
Manager application to return the selected file url:
function selectFile(fileUrl)
{
if(navigator.appName.indexOf('Microsoft')!=-1)
window.returnValue=fileUrl;
else
window.opener.setAssetValue(fileUrl);
self.close();
}
Then, you'd need to set the cmdAssetManager property to point to your file manager, for
example:
oEdit1.cmdAssetManager="modalDialogShow('/yourfilemanager.php',640,480)";
For more information on cmdAssetManager property, check section: Using Asset Manager Add-on.
27/07/2006 4:18 PM
5 of 5
Please note that integrating you own File Manager is beyond our
support scope.
When using IE, is it possible to preserve multiple spaces entered in the

Editor?
Yes. Please set:
oEdit1.preserveSpace=true;
Can I change the hover color/background color for the Style Selector?
Yes. Please use styleSelectionHoverFg and styleSelectionHoverBg properties, for example::
oEdit1.styleSelectionHoverFg="red";
oEdit1.styleSelectionHoverBg="green";
when I submit a form (where the Editor is embedded), the current content is
not submitted.
This problem perists if you're using a javascript to submit the form, instead of using regular
Submit button. The Editor wrap some operation on the form onsubmit event. When using script to
submit form, this event didn't get triggered.
To solve this problem, simply call the form onsubmit() just before calling the form submit()
method. Below is an example:
<html>
<head>
<script language="Javascript">
function doSubmit()
{
//Your custom code here..
document.forms.Form1.onsubmit();
document.forms.Form1.submit()
}
</script>
</head>
<body>
<script>
</script>
<input type="button" value="Save" onclick="doSubmit()">
</form>
</body>
</html>
27/07/2006 4:18 PM

Innova Studio Developers Guide

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Innova Studio Developers Guide

Hochgeladen von

Copyright:

Verfügbare Formate

InnovaStudio WYSIWYG Editor - Developer's Guide

Examples | Developer's Guide | ASP.NET Developer's Guide

I.2. Textarea Replacement

InnovaStudio WYSIWYG Editor - Developer's Guide

I.3. Loading Content into the Editor

InnovaStudio WYSIWYG Editor - Developer's Guide

I.4. Setting the Editor Dimension

2003-2005, INNOVA STUDIO (www.InnovaStudio.com). All rights reserved.

InnovaStudio WYSIWYG Editor - Developer's Guide

Examples | Developer's Guide | ASP.NET Developer's Guide

II. Applying Stylesheet

II.2. Enabling the Style Selection feature

InnovaStudio WYSIWYG Editor - Developer's Guide

II.3. Applying Stylesheet Without Using Css File

2003-2005, INNOVA STUDIO (www.InnovaStudio.com). All rights reserved.

InnovaStudio WYSIWYG Editor - Developer's Guide

Examples | Developer's Guide | ASP.NET Developer's Guide

III. Using Asset Manager Add-on

InnovaStudio WYSIWYG Editor - Developer's Guide

InnovaStudio WYSIWYG Editor - Developer's Guide

III.2. Multiple Asset Base/Root Folders

III.4. Returning Absolute Path

InnovaStudio WYSIWYG Editor - Developer's Guide

InnovaStudio WYSIWYG Editor - Developer's Guide

Examples | Developer's Guide | ASP.NET Developer's Guide

IV. Advanced Settings

HTMLBody; enables the Editor to edit/return HTML BODY section only.

IV.2. Loading Content at Runtime

InnovaStudio WYSIWYG Editor - Developer's Guide

IV.3. Getting the Current Content

IV.4. Editing & Publishing Path

InnovaStudio WYSIWYG Editor - Developer's Guide

It is considered to be located at : http//YourServer/images/photo.jpg (regardless where

IV.5. Line Break

* except if the current paragraph is Heading (H1-H6) or Preformatted (PRE)

InnovaStudio WYSIWYG Editor - Developer's Guide

They will not take effect in Netscape, Mozilla and Firefox.

IV.6. Spell-Checking Integration

IV.7. Setting the Editor Focus

IV.8. Adding Custom Color Selection

2003-2005, INNOVA STUDIO (www.InnovaStudio.com). All rights reserved.

InnovaStudio WYSIWYG Editor - Developer's Guide

Examples | Developer's Guide | ASP.NET Developer's Guide

V. Extending the Editor

V.2. Inserting Custom Content

InnovaStudio WYSIWYG Editor - Developer's Guide

V.2.b. Inserting Custom Links

InnovaStudio WYSIWYG Editor - Developer's Guide

2003-2005, INNOVA STUDIO (www.InnovaStudio.com). All rights reserved.

InnovaStudio WYSIWYG Editor - Developer's Guide

Examples | Developer's Guide | ASP.NET Developer's Guide

The result is shown below:

InnovaStudio WYSIWYG Editor - Developer's Guide

"Preview" button. Preview

This button is enabled by

InnovaStudio WYSIWYG Editor - Developer's Guide

including or not including

ParagraphFormatting btnParagraphFormatting true

InnovaStudio WYSIWYG Editor - Developer's Guide

This butttom will

This butttom will

This butttom will

InnovaStudio WYSIWYG Editor - Developer's Guide

If the Editor editing mode