Scribd
Upload
366 views

Innova Studio Developers Guide

This document provides instructions on how to enable and configure the asset manager add-on for the InnovaStudio WYSIWYG editor. It describes how to specify the command to open the add-on, configure multiple asset base folders, enable localization, and return absolute file paths.

Uploaded by

nulljohn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
366 views

Innova Studio Developers Guide

This document provides instructions on how to enable and configure the asset manager add-on for the InnovaStudio WYSIWYG editor. It describes how to specify the command to open the add-on, configure multiple asset base folders, enable localization, and return absolute file paths.

Uploaded by

nulljohn
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

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

InnovaStudio WYSIWYG Editor - Developer's Guide

2 of 3

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

</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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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,"&","&amp;")
sHTML=replace(sHTML,"<","&lt;")
sHTML=replace(sHTML,">","&gt;")
encodeHTML=sHTML
end function
Response.Write encodeHTML(Request("txtContent"))
%>
</textarea>
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.REPLACE("txtContent");
</script>
<input type="submit" value="Submit">
</form>
</body>
</html>

PHP Example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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

InnovaStudio WYSIWYG Editor - Developer's Guide

3 of 3

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

{
$sHTML=ereg_replace("&","&amp;",$sHTML);
$sHTML=ereg_replace("<","&lt;",$sHTML);
$sHTML=ereg_replace(">","&gt;",$sHTML);
return $sHTML;
}
if(isset($_POST["txtContent"]))
{
$sContent=stripslashes($_POST['txtContent']); //Remove slashes
echo encodeHTML($sContent);
}
?>
</textarea>
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.REPLACE("txtContent");
</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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.width="100%";
oEdit1.height="350px";
oEdit1.REPLACE("txtContent");
</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

InnovaStudio WYSIWYG Editor - Developer's Guide

1 of 2

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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


I. Getting Started
II. Applying Stylesheet
1. Applying Stylesheet Using External Css File
2. Enabling the Style Selection feature
3. Applying Stylesheet Without Using Css File
III. Using Asset Manager Add-on
IV. Advanced Settings
V. Extending the Editor
VI. Toolbar
VII. Localization
VIII. FAQ

II. Applying Stylesheet


II.1. Applying Stylesheet Using External Css File
To apply an external css file, specify the css file using css property:
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.css="style/test.css";
oEdit1.REPLACE("txtContent");
</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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.css="style/test.css";
oEdit1.btnStyles=true;
oEdit1.REPLACE("txtContent");
</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

InnovaStudio WYSIWYG Editor - Developer's Guide

2 of 2

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
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;
oEdit1.REPLACE("txtContent");
</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

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

27/07/2006 4:12 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

1 of 4

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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


I. Getting Started
II. Applying Stylesheet
III. Using Asset Manager Add-on
1. Enabling the Asset Manager Add-on
2. Multiple Asset Base/Root Folders
3. Localization
4. Returning Absolute Path
IV. Advanced Settings
V. Extending the Editor
VI. Toolbar
VII. Localization
VIII. FAQ

III. Using Asset Manager Add-on


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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.cmdAssetManager="modalDialogShow('/assetmanager/assetmanager.asp',640
oEdit1.REPLACE("txtContent");
</script>
or
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.cmdAssetManager="modalDialogShow('/assetmanager/assetmanager.php',640
oEdit1.REPLACE("txtContent");
</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

InnovaStudio WYSIWYG Editor - Developer's Guide

2 of 4

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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

InnovaStudio WYSIWYG Editor - Developer's Guide

3 of 4

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.cmdAssetManager="modalDialogShow
('/assetmanager/assetmanager.asp?lang=german',640,445);";
oEdit1.REPLACE("txtContent");
</script>
or

PHP Example
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.cmdAssetManager="modalDialogShow
('/assetmanager/assetmanager.php?lang=german',640,445);";
oEdit1.REPLACE("txtContent");
</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

InnovaStudio WYSIWYG Editor - Developer's Guide

4 of 4

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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.
2003-2005, INNOVA STUDIO (www.InnovaStudio.com). All rights reserved.

27/07/2006 4:13 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

1 of 4

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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


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. Advanced Settings


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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.mode="HTML";
oEdit1.REPLACE("txtContent");
</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

InnovaStudio WYSIWYG Editor - Developer's Guide

2 of 4

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.publishingPath="http//YourServer/";
oEdit1.REPLACE("txtContent");
</script>
With this setting, if we insert an image into the content:
<img src="images/photo.jpg">

27/07/2006 4:13 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

3 of 4

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.useDIV=false;
oEdit1.REPLACE("txtContent");
</script>
To apply <BR> by default, set useBR property to true:
<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.useBR=true;
oEdit1.REPLACE("txtContent");
</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

InnovaStudio WYSIWYG Editor - Developer's Guide

4 of 4

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.btnSpellCheck=true;
oEdit1.REPLACE("txtContent");
</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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.customColors=["#ff4500","#ffa500","#808000","#4682b4",
"#1e90ff","#9400d3","#ff1493","#a9a9a9"];
oEdit1.REPLACE("txtContent");
</script>

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

27/07/2006 4:13 PM

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.
II.
III.
IV.
V.

Getting Started
Applying Stylesheet
Using Asset Manager Add-on
Advanced Settings
Extending the Editor
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. Extending the Editor


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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.arrCustomTag=[["First Name","{%first_name%}"],
["Last Name","{%last_name%}"],
["Email","{%email%}"]];
oEdit1.REPLACE("txtContent");
</script>

27/07/2006 4:15 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

2 of 3

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.cmdInternalLink="modelessDialogShow(links.asp',365,250)";
oEdit1.REPLACE("txtContent");
</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

InnovaStudio WYSIWYG Editor - Developer's Guide

3 of 3

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.cmdCustomObject="modelessDialogShow('objects.htm',365,250)";
oEdit1.REPLACE("txtContent");
</script>

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

27/07/2006 4:15 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

1 of 7

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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


I.
II.
III.
IV.
V.
VI.

Getting Started
Applying Stylesheet
Using Asset Manager Add-on
Advanced Settings
Extending the Editor
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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.btnClearAll=true;
oEdit1.REPLACE("txtContent");
</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>
var oEdit1 = new InnovaEditor("oEdit1");
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"];
oEdit1.REPLACE("txtContent");
</script>

Note:
Use "|" for Space Break and "BRK" for Line Break.

The result is shown below:

27/07/2006 4:16 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

2 of 7

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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

InnovaStudio WYSIWYG Editor - Developer's Guide

3 of 7

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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

InnovaStudio WYSIWYG Editor - Developer's Guide

4 of 7

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

"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


automatically enabled if
you specify the
cmdInternalLink
property. More info
(No Property)

This butttom will


automatically enabled if
you specify the
cmdCustomObject
property. More info

27/07/2006 4:16 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

5 of 7

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

"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.
If you're using features
property, you can
show/hide this button by
including or not including
the button name
"XHTMLFullSource" in the
features property value.

"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").
If you're using features
property, you can
show/hide this button by
including or not including
the button name
"XHTMLSource" in the
features property value.

"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

InnovaStudio WYSIWYG Editor - Developer's Guide

6 of 7

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

"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>
var oEdit1 = new InnovaEditor("oEdit1");
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"];
oEdit1.REPLACE("txtContent");
</script>
As seen on the above code, you need to set the arrCustomButtons property with:

27/07/2006 4:16 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

7 of 7

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.TagSelectorPosition="top";
oEdit1.REPLACE("txtContent");
</script>
The result is shown below:

To hide the Tag Selector, set useTagSelector property to false.


<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.useTagSelector=false;
oEdit1.REPLACE("txtContent");
</script>

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

27/07/2006 4:16 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

1 of 2

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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


I.
II.
III.
IV.
V.
VI.
VII.
VIII.

Getting Started
Applying Stylesheet
Using Asset Manager Add-on
Advanced Settings
Extending the Editor
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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="Javascript" src="scripts/language/german/editor_lang.js"><
<script language="Javascript" src="scripts/innovaeditor.js"></script>
</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>
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

InnovaStudio WYSIWYG Editor - Developer's Guide

2 of 2

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

<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.

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

27/07/2006 4:17 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

1 of 5

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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


I.
II.
III.
IV.
V.
VI.
VII.
VIII.

Getting Started
Applying Stylesheet
Using Asset Manager Add-on
Advanced Settings
Extending the Editor
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

InnovaStudio WYSIWYG Editor - Developer's Guide

2 of 5

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.dropTopAdjustment=-50;
oEdit1.dropLeftAdjustment=-10;
oEdit1.dropTopAdjustment_moz=-42;
oEdit1.dropLeftAdjustment_moz=-8;
oEdit1.REPLACE("txtContent");
</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

InnovaStudio WYSIWYG Editor - Developer's Guide

3 of 5

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.REPLACE("txtContent");
</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>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.onFullScreen=new Function("doFullScreen()");
oEdit1.onNormalScreen=new Function("doNormalScreen()");
oEdit1.REPLACE("txtContent");
</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>
var oEdit1 = new InnovaEditor("oEdit1");

27/07/2006 4:18 PM

InnovaStudio WYSIWYG Editor - Developer's Guide

4 of 5

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

idEdit.initialRefresh=true;
oEdit1.REPLACE("txtContent");
</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):
<!--#include file="i_upload_object_FSO.asp"-->
to:
<!--#include file="i_upload_object_SA.asp"-->
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

InnovaStudio WYSIWYG Editor - Developer's Guide

5 of 5

http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="Javascript" src="scripts/innovaeditor.js"></script>
<script language="Javascript">
function doSubmit()
{
//Your custom code here..
document.forms.Form1.onsubmit();
document.forms.Form1.submit()
}
</script>
</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="button" value="Save" onclick="doSubmit()">
</form>
</body>
</html>

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

27/07/2006 4:18 PM

You might also like