Innova Studio Developers Guide

7/26/2019 Innova Studio Developers Guide

1/30

ovaStudio WYSIWYG Editor - Developer's Guide http://www.trustech.org/WebasedDir/WebFileExplore/Editor/documen...

3 27/07/2006 4:08 PM

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

Getting StartedInstallation1.Textarea Replacement2.Loading Content into the Editor3.Setting the Editor Dimension4.

I.

Applying StylesheetII.

Using Asset Manager Add-onIII.Advanced SettingsIV.Extending the EditorV.ToolbarVI.LocalizationVII.FAQVIII.

I. Getting Started

I.1. Installation

Unzip the Editor package & copy all files into your web server. You should have the followingfolders and files:

Open file default.htmto browse the examples and the documentation. According to several

examples, it is recomended that you copy all files into a virtual directory named Editorin your

web server, so that you can access the examples by opening:

ht t p: / / your server / Edi tor / def aul t . ht m

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

Copy the scriptsfolder anywhere in your web server (please do not rename it).1.

Include the Editor script file (innovaeditor.js- located in the scriptsfolder) in the

section of your web page.

2.

Initialize & embed the Editor below the youd like to replace.3.


2/30


3 27/07/2006 4:08 PM

var oEdit1 = new InnovaEditor("oEdit1");

oEdit1.REPLACE("txtContent");

As seen on the above code, specify the textarea id as parameter for the REPLACEmethod.

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

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1" ) ;

oEdi t1. REPLACE( "t xt Cont ent " ) ;

PHP Example


3/30


3 27/07/2006 4:08 PM

{

$sHTML=ereg_replace("&","&",$sHTML);$sHTML=ereg_replace("",">",$sHTML);

return $sHTML;

}

if(isset($_POST["txtContent"]))

{

$sContent=stripslashes($_POST['txtContent']); //Remove slashesecho encodeHTML($sContent);}

?>

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1" ) ;oEdi t1. REPLACE( "t xt Cont ent " ) ;

I.4. Setting the Editor Dimension

Editor dimension can be adjusted using the widthand heightproperties. For example:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.width="100%";

oEdit1.height="350px";oEdi t 1. REPLACE(" t xt Cont ent ") ;

Please note that by default, you can't set the Editor width less than 565 pixels. To set the Editorwidth less than 565 pixels, you'd need to apply toolbar line breaks using featuresproperty. More

info

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


4/30


2 27/07/2006 4:12 PM


Getting StartedI.Applying Stylesheet

Applying Stylesheet Using External Css File1.Enabling the Style Selection feature2.Applying Stylesheet Without Using Css File3.

II.

Using Asset Manager Add-onIII.

Advanced SettingsIV.Extending the EditorV.ToolbarVI.LocalizationVII.FAQVIII.

II. Applying Stylesheet

II.1. Applying Stylesheet Using External Css File

To apply an external css file, specify the css file using cssproperty:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.css="style/test.css";oEdi t 1. REPLACE(" t xt Cont ent ") ;

If you speciify BODY style in your css file, for example:

BODY {backgr ound: st eel bl ue;col or : whi t e;f ont - f ami l y: Ver dana, Ar i al , Hel vet i ca;

}

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 thestyle selection feature, setbtnStylesproperty to true.

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.css="style/test.css";

oEdit1.btnStyles=true;oEdi t 1. REPLACE(" t xt Cont ent ") ;

All class selectors defined in the css file will be listed in the Style Selection. For example, the classselector CodeInTextbelow will be included in the Style Selection.

. CodeI nText {f ont - f ami l y: Cour i er New; f ont - wei ght : bol d; }


5/30


2 27/07/2006 4:12 PM

Only HTML selectors will not be included in the Style Selection. For example, the HTML selector P

below will not be included.

P {f ont - f ami l y: Ver dana, Ar i al , Hel vet i ca; }

II.3. Applying Stylesheet Without Using Css FileTo apply stylesheet without using external css file, use arrStyleproperty, for example:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;

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;

oEdi t 1. REPLACE(" t xt Cont ent ") ;

arrStyleproperty allows you to specify the style rules (in the form of array). Each rule is

constructed by:

HTML/Class SelectorTrue/false parameter to specify whether the style will be included in the Style Selection listor not.Caption (the displayed text for the Style Selection list)

Css Text



6/30


4 27/07/2006 4:13 PM


Getting StartedI.Applying StylesheetII.Using Asset Manager Add-on

Enabling the Asset Manager Add-on1.Multiple Asset Base/Root Folders2.Localization3.

Returning Absolute Path4.

III.

Advanced SettingsIV.Extending the EditorV.ToolbarVI.LocalizationVII.FAQVIII.

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 canbrowse and manage your web assets (upload and delete files, create and delete folders). AssetManager 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:

Copy the assetmanagerfolder anywhere in your web server.1.

Specify a command to open the add-on using cmdAssetManagerproperty:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.cmdAssetManager="modalDialogShow('/assetmanager/assetmanager.asp',64oEdi t 1. REPLACE(" t xt Cont ent ") ;

or

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.cmdAssetManager="modalDialogShow('/assetmanager/assetmanager.php',64oEdi t 1. REPLACE(" t xt Cont ent ") ;

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 theassetmanager.asp. 'Relative to root' path always starts with "/".

2.

Specify your web assets location. If you're using ASP, open settings.asp(in the

assetmanagerfolder) using your text editor & set the arrBaseFoldervariable with the

location of your web assets folder (please use "relative to root" path). Then give a friendlyname/caption using arrBaseName:

arr BaseFol der( 0) =" / asset s/ "ar r BaseName( 0)="Asset s"

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

3.


7/30


4 27/07/2006 4:13 PM

within it:

If you're using PHP, open settings.php(in the assetmanagerfolder) & set the

sBaseVirtual0variable with the location of your web assets folder (please use "relative to

root" path). Then specify its real/physical path using sBase0variable and give a friendly

name/caption using sName0:

$sBaseVi r t ual 0=" / asset s" ;$sBase0="c: / i net pub/ wwwr oot / asset s" ;$sName0="Asset s" ;

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 dialogImage dialogInsert Flash dialogInsert Media dialogBackground 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 whichcan be inserted as hyperlink or object (image, flash, video, etc).


8/30


4 27/07/2006 4:13 PM

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 areexample settings in seetings.aspor settings.php:

seetings.asparr BaseFol der( 0) =" / asset s/ "ar r BaseName( 0) ="Asset s"

arr BaseFol der ( 1) =" / publ i c_asset s/ "ar r BaseName( 1) ="Publ i c Asset s"

or

settings.php$sBaseVi r t ual 0=" / asset s" ;$sBase0="c: / i net pub/ wwwr oot / asset s" ;$sName0="Asset s" ;

$sBaseVi r t ual 1=" / publ i c_asset s" ;$sBase1="c: / i net pub/ wwwr oot / publ i c_asset s" ;

$sName1="Publ i c Asset s" ;

III.3. Localization

If required, you can localize the Asset Manager add-on to be displayed in specific language bysetting the langvariable in querystring:

ASP Example

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.cmdAssetManager="modalDialogShow

('/assetmanager/assetmanager.asp?lang=german',640,445);";


or

PHP Example

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.cmdAssetManager="modalDialogShow

('/assetmanager/assetmanager.php?lang=german',640,445);";oEdi t 1. REPLACE(" t xt Cont ent ") ;

The current available values langvariable are: danish, dutch, finnish, french, german, schi

(Chinese Simplified), tchi(Chinese Traditional), norwegian, spanish, swedish. If langvariable 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, forexample:

/ asset s/ i mage. gi f

If required, it can be changed to return absolute path by setting. Here is the setting required in

seetings.aspand settings.php:

seetings.aspbReturnAbsol ut e=t r ue


9/30


4 27/07/2006 4:13 PM

or

settings.php$bRet urnAbsol ute=t r ue;

This will make the Asset Manager dialog returns:

ht t p: / / your ser vername/ asset s/ i mage. gi f

Inserting images using absolute path usually is required if you use the Editor in web-based emailapplications.



10/30


4 27/07/2006 4:13 PM


Getting StartedI.Applying StylesheetII.Using Asset Manager Add-onIII.Advanced Settings

Setting the Editing Mode1.Loading Content at Runtime2.

Getting the Current Content3.Editing & Publishing Path4.Line Break5.Spell-Checking Integration6.Setting the Editor Focus7.Adding Custom Color Selection8.

IV.

Extending the EditorV.ToolbarVI.LocalizationVII.FAQVIII.

IV. Advanced Settings

IV.1. Setting the Editing Mode

InnovaStudio WYSIWYG Editor has 4 editing modes:

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

HTML; enables the Editor to edit/return full HTML Content.2.

XHTMLBody; enables the Editor to edit/return HTML BODY section with XHTML rules applied.3.

XHTML; enables the Editor to edit/return full HTML Content with XHTML rules applied.4.

By default, the Editing Mode is set to HTMLBody. To specify the editing mode, usemodeproperty.

For example:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.mode="HTML";oEdi t 1. REPLACE(" t xt Cont ent ") ;

Editing full HTML content is useful if you wish to save the content as a static html file. However, inmany dynamic web applications today (e.g. in database-driven web applications or web contentmanagement systems where the ability to manage certain/specific area is required), the HTMLBody

or XHTMLBodyediting 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 thecurrent Editor content.

UseputHTML()method to load full HTML content. The syntax is:

oEdi t 1. putHTML( sHTML)

where sHTMLis the full HTML content. Note thatputHTML()will also replace the current content

style defined by arrStyleproperty or cssproperty.

Use loadHTML()method to load HTML Body content. The syntax is:

oEdi t 1. l oadHTML( sHTML)

where sHTMLis the HTML Body content.


11/30


4 27/07/2006 4:13 PM

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:

oEdi t 1. get HTML( )

Use getXHTML()method to get full HTML content with XHTML rules applied. The syntax is:

oEdi t 1. get XHTML( )

Use getHTMLBody()method to get HTML Body content. The syntax is:

oEdi t 1. getHTMLBody( )

Use getXHTMLBody()method to get HTML Body content with XHTML rules applied. The syntax is:

oEdi t1. get XHTMLBody( )

IV.4. Editing & Publishing Path

Lets' say you embed the editor in a web page located in a folder admin:

ht t p: / / Your Ser ver / admi n/ edi t . asp

The Editor is used for editing content from a database. Then, to view the result, you read theedited content from the database and display it on another web page located in the root of yourserver:

ht t p: / / Your Ser ver / vi ew. asp

In this case, you have different locations for editing & viewing (publishing): the adminfolder is the

Editing path and the 'root' is the Viewing/Publishing path. This will raise a problem if the editedcontent contains an image that has a relative path, for example:

The image won't be displayed when viewing the content. This is because, in Editing, it assumesthat the image is located in:

ht t p: / / YourServer / admi n/ i mages/ phot o. j pg

Whereas in Publishing, it assumes that the image is located in:

ht t p: / / Your Ser ver / i mages/ phot o. j pg

This shouldn't be a problem if both Editing and Viewing/Publishing have the same location. Tomake the Editing location flexible (regardless the Viewing/Publishing location), there are 2methods:

Specify thepublishingPathproperty 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. Forexample:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.publishingPath="http//YourServer/";oEdi t 1. REPLACE(" t xt Cont ent ") ;

With this setting, if we insert an image into the content:

1.


12/30


4 27/07/2006 4:13 PM

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

the Editing process is).

Always insert images or any other objects using 'Relative to Root' path, for example:

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

2.

With the above methods, the Editing location would be flexible. Means that you can use the Editorin 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 animage or other objects as it doesn't generate a problem if you havedifferent location for Editing and Publishing (and you don't need to set the

publishingPathproperty).

InnovaStudio WYSIWYG Editor has an Asset Manager add-on that youcan use to select a file and return the 'relative to root' path of the file. Byusing the Asset Manager add-on you dont need to set the

publishingPathproperty.

IV.5. Line Break

In IE browser, if you press [ENTER] for line break the Editor will apply by default. InNetscape, Mozilla & Firefox,
will be applied.

In IE browser, you can change the behaviour to apply

or
by default. To apply

by

default, set useDIVproperty to false:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.useDIV=false;oEdi t 1. REPLACE(" t xt Cont ent ") ;

To apply
by default, set useBRproperty to true:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.useBR=true;


Below are the possible values for useDIVand useBR(in IE):

useDIV useBR Line Break

True False *

False False

True True

False True

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

You can set the useDIVand useBRproperties programatically at runtime, thus allows you to

change the Editor behaviour while it is running. Note that useDIVand useBRonly available in IE.


13/30


4 27/07/2006 4:13 PM

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). Toenable the "Spell Check" button, setbtnSpellCheckproperty to true:


oEdit1.btnSpellCheck=true;oEdi t 1. REPLACE(" t xt Cont ent ") ;

Note that this feature is available only for IE Browser.

InnovaStudio WYSIWYG Editor can also be integrated with NetSpell (fromsourceforge.net/projects/netspell/). More info

IV.7. Setting the Editor Focus

To set focus the Editor, use focus()method, for example:

oEdi t 1. f ocus( ) ;

IV.8. Adding Custom Color Selection

You can add custom/predefined color selection to the Editor color picker dropdown. The colorpicker dropdown can be accessed through "Text Foreground Color" button, "Text BackgroundColor" button and "Pick" buttons in several editing dialogs.

To add custom color selection, set customColorsproperty with an array of the custom colors. For

example:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.customColors=["#ff4500","#ffa500","#808000","#4682b4",

"#1e90ff","#9400d3","#ff1493","#a9a9a9"];oEdi t 1. REPLACE(" t xt Cont ent ") ;



14/30


3 27/07/2006 4:15 PM


Getting StartedI.Applying StylesheetII.Using Asset Manager Add-onIII.Advanced SettingsIV.Extending the Editor

Calling the Editor Object from a Popup/Window dialog1.

Inserting Custom ContentInserting Custom Tagsa.Inserting Custom Linksb.Inserting Custom HTML Contentc.

2.

V.

ToolbarVI.LocalizationVII.FAQVIII.

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 ifyoud like to exted the functionality of the Editor, for example if you want to create a customcontent insertion from a popup/window dialog.

InnovaStudio WYSIWYG Editor provides a oUtilobject with objproperty that you can use to call

the active Editor object. If you have more than one Editor in a web page, the objproperty will

return the object of the current selected Editor (where the cursor is placed).

To call the oUtil.objfrom a popup window, use:

var oEdi t=wi ndow. opener . oUt i l . obj ;

To call the oUtil.objfrom a modal/modeless dialog (IE only), use:

var oEdi t =di al ogAr guments. oUt i l . obj ;

Example use of the oUtilobject 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 caninsert predefined custom tags into the current Editor content. Custom Tag insertion is a featurethat is commonly used in mailing applications or template editing in web content managementsystems. To use Custom Tag Insertion feature, set arrCustomTagproperty with an array of your

Custom Tags in the form of ["Caption", "Custom Tag"], for example :

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.arrCustomTag=[["First Name","{%first_name%}"],

["Last Name","{%last_name%}"],

["Email","{%email%}"]];



15/30


3 27/07/2006 4:15 PM

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 otherdocuments/files on your server).

The parameters of insertLink()method are: url, title (optional) and target (optional). For

example:

oEdi t 1. i nsert Li nk( "pr oduct s. ht m" , "Pr oduct s" , "_ bl ank") ;

This will insert:

Pr oduct s

If it is applied to a selected text, the result is:

sel ect ed t ext

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 callyour 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:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.cmdInternalLink="modelessDialogShow(links.asp',365,250)";


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.objas explained before) and use insertLink()method to

insert links into the current Editor content. Below is a sample Javascript implementation that youcan use in links.htm:

f unct i on doI nser t ( ur l , t i t l e, t arget )

{i f ( navi gat or . appName. i ndexOf ( ' Mi cr osof t ' ) ! =- 1)

{/ *For I E browser , use di al ogAr guments. oUt i l . objt o get t he act i ve edi t or obj ect */var oEdit=dialogArguments.oUtil.obj;

oEdit.insertLink(url,title,target);

}el se

{/ *For Mozi l l a browser s, use wi ndow. opener . oUt i l . objt o get t he act i ve edi t or obj ect */var oEdit=window.opener.oUtil.obj;

oEdit.insertLink(url,title,target);

}}


16/30


3 27/07/2006 4:15 PM

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:

I nser t . . Company NameCompany Logo

In the above example, we called the oUtil.objdirectly, not using window.opener.oUtil.objordialogArguments.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.objis 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 beinserted 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. Toenable the 'Custom Object' button, set the cmdCustomObjectproperty with command to open

your custom lookup page :

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.cmdCustomObject="modelessDialogShow('objects.htm',365,250)";




17/30


7 27/07/2006 4:16 PM


Getting StartedI.Applying StylesheetII.Using Asset Manager Add-onIII.Advanced SettingsIV.Extending the EditorV.Toolbar

Configuring the Toolbar Buttons1.Adding Custom Buttons2.Tag Selector Settings3.

VI.

LocalizationVII.FAQVIII.

VI. Toolbar

VI.1. Configuring Toolbar Buttons

You can show/hide toolbar buttons using 2 ways:

By setting true/false to the appropriate properties. For example, this will show the "Clear All"button:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.btnClearAll=true;oEdi t 1. REPLACE(" t xt Cont ent " ) ;

The "Clear All" button is disabled by default. As seen on the above example, to enable/showthe "Clear All" button, we setbtnClearAllproperty to true. Please Note that some toolbar

buttons are disabled by default. Please refer to the button list at the end of this section.

1.

By specifying the name of the buttons you'd like to display using featuresproperty. Using the

featuresproperty, you specify also the button ordering, as well as button spaces and toolbar

line breaks. Below is an example:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;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"];

oEdi t 1. REPLACE(" t xt Cont ent " ) ;

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

The result is shown below:

2.


18/30


7 27/07/2006 4:16 PM

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 V

"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

"Style &Formatting"button.This button

opens a menuwhich has:

"TextFormatting"menu item"ListFormatting"menu item"BoxFormatting"menu item"Paragraph

Formatting"menu item"CustomCss" menuitem

StyleAndFormatting (No Property)

This button is enabled bydefault as well as the

menu items:

"Text Formatting"menu item"List Formatting"menu item"Box Formatting"menu item"ParagraphFormatting" menuitem

"Custom Css" menuitem

If you disabled all theabove menu items (bysettingbtnTextFormatting,btnListFormatting,btnBoxFormatting,btnParagraphFormatting

and btnCssText

properties to false, thisbutton would

automatically disabled.

If you're using features

property, you canshow/hide this button by

-


19/30


7 27/07/2006 4:16 PM

including or not includingthe button name"StyleAndFormatting" inthe featuresproperty

value. You'd also need toinclude at least one of itsmenu items("TextFormatting",

"ParagraphFormatting","ListFormatting","BoxFormatting","CssText") in the

featuresproperty value.

"Text Formatting"menu item.

TextFormatting btnTextFormatting true

"ParagraphFormatting"menu item.

ParagraphFormattingbtnParagraphFormatting 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" menuitem.

Copy btnCopy true

"Paste" button. Paste btnPaste true

"Paste fromWord" button.

PasteWord btnPasteWord true


20/30


7 27/07/2006 4:16 PM

"Paste Text"button.

PasteText btnPasteText false

"Undo" button. Undo btnUndo true

"Redo" button. Redo btnRedo true

"Text Color"

button.

ForeColor btnForeColor true

"Text BackgroundColor" button.

BackColor btnBackColor true

"Bookmark"button.

Bookmark btnBookmark true

"Hyperlink"button.

Hyperlink btnHyperlink true

"Custom Tag"button.

CustomTag (No Property)

This butttom willautomatically enabled ifyou specify thearrCustomTag property.More info

-

"Image" button. Image btnImage true

"Flash" button. Flash btnFlash false

"Media" button. Media btnMedia false

"Internal Link"button.

InternalLink (No Property)

This butttom willautomatically enabled ifyou specify thecmdInternalLink

property. More info

-

"Custom Object"button.

CustomObject (No Property)

This butttom willautomatically enabled ifyou specify the

cmdCustomObjectproperty. More info

-

"Table" button. Table btnTable true

"Guidelines"button.

Guidelines btnGuidelines true

"Absolute"button.

Absolute btnAbsolute true

"SecialCharacters"

button.

Characters btnCharacters true

"Horizontal Line"button.

Line btnLine true


21/30


7 27/07/2006 4:16 PM

"Form" button. Form btnForm true

"RemoveFormatting"button.

RemoveFormat btnRemoveFormat true

"Source Editor"button for full

HTML editing.

XHTMLFullSource (No Property)

If the Editor editing modeis set to "HTML" or"XHTML", this buttonwould automaticallydisplayed.


property, you canshow/hide this button byincluding or not includingthe button name"XHTMLFullSource" in the

featuresproperty value.

-

"Source Editor"button for HTMLBODY contentediting.

XHTMLSource (No Property)

If the Editor editing modeis set to "HTMLBODY" or"XHTMLBODY", thisbutton wouldautomatically displayed(This this button isdisplayed by default asthe Editor has defaultediting mode set to

"HTMLBODY").


property, you canshow/hide this button byincluding or not includingthe button name"XHTMLSource" in thefeaturesproperty 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


22/30


7 27/07/2006 4:16 PM

"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 arrCustomButtonsproperty and specify the

featuresproperty to include the custom button names. Below is an example:


oEdit1.arrCustomButtons=[["ButtonName1","alert('Command 1 here')","Caption["ButtonName2","alert(\"Command '2' here\")","Caption 2","btnCustom.gi["ButtonName3","alert('Command \"3\" here')","Caption 3","btnCustom.gi

oEdi t 1. f eat ures=[ "Previ ew" , "Ful l Scr een", "Search","St yl eAndFormat t i ng" , "Text Format t i ng" , "Li st Format t i ng" ,"BoxFormat t i ng" , "Paragr aphFormat t i ng", "CssText " , "St yl es" , "| " ,"Par agr aph", " Font Name", " Font Si ze", " | ", " Cut" , "Copy", " Past e","Past eWord", " | " , "Undo", "Redo" , "| " , "Bol d", " I t al i c", "Under l i ne" ," J ust i f yLef t " , "J ust i f yCent er" , "J ust i f yRi ght " , "J ust i f yFul l " ,"BRK" , "Number i ng" , "Bul l et s" , " I ndent " , "Outdent " , "| ","ForeCol or " , "BackCol or " , " | ", "Bookmark" , "Hyper l i nk" , " I mage","Fl ash" , "Medi a", " | " , "Tabl e", "Bor der " , "Gui del i nes" , "Absol ute", "| ","Char act ers" , " Li ne" , " Form", "RemoveFormat " , "XHTMLSour ce", " | " ,"ButtonName1","ButtonName2","ButtonName3"] ;

oEdi t 1. REPLACE(" t xt Cont ent " ) ;

As seen on the above code, you need to set the arrCustomButtonsproperty with:


23/30


7 27/07/2006 4:16 PM

Button NameCommand to executeCaptionImage/icon (You'd need to create your own image or you can use the provided

btnCustom1.gifbtnCustom7.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 settingthe TagSelectorPositionproperty to "top". Below is an example:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.TagSelectorPosition="top";oEdi t 1. REPLACE(" t xt Cont ent " ) ;

The result is shown below:

To hide the Tag Selector, set useTagSelectorproperty to false.


oEdit1.useTagSelector=false;oEdi t 1. REPLACE(" t xt Cont ent " ) ;



24/30


2 27/07/2006 4:17 PM


Getting StartedI.Applying StylesheetII.Using Asset Manager Add-onIII.Advanced SettingsIV.Extending the EditorV.ToolbarVI.

LocalizationVII.FAQVIII.

VII. Localization

You can localize the Editor to be displayed in specific language by adding a language include filebefore the Editor javascript include:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1" ) ;oEdi t1. REPLACE( "t xt Cont ent " ) ;

The current available language include files are:

Danish


25/30


2 27/07/2006 4:17 PM


26/30


5 27/07/2006 4:18 PM


Getting StartedI.Applying StylesheetII.Using Asset Manager Add-onIII.Advanced SettingsIV.Extending the EditorV.ToolbarVI.

LocalizationVII.FAQ

Special characters (eg. , , , , ) are not displayed correctly. How to fix thisproblem?

1.

All drop menus & dropdowns are misplaced. How to fix this problem?2.When I click the "Full Screen" button, the Editor doesn't open in full screen size. How tofix this problem?

3.

When loading a content into the Editor, sometimes there are lines that disappear (whenusing IE browser). When I click inside the editor they reappear. How to prevent thisbehaviour?

4.

Every dialogs give me an error: "Class doesn't support automation", why?5.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?

6.

When uploading large file using the Asset Manager, I get an error message: "Requestobject error 'ASP 0104 : 80004005' Operation not Allowed". How to fix this problem?

7.

Can I replace the Asset Manager add-on with my own File Manager?8.When using IE, is it possible to preserve multiple spaces entered in the Editor?9.Can I change the hover color for the Style Selector?10.When I submit a form (where the Editor is embedded), the current content is notsubmitted.

11.

VIII.

VIII. FAQ

Special characters (eg. , , , , ) are not displayed correctly. How to fixthis 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. ) which has position set toabsolute or relative.


27/30


5 27/07/2006 4:18 PM

Use dropTopAdjustmentproperty and dropLeftAdjustmentproperty to adjust the top and leftoffsets of the drop menus/dropdowns for previewing in IE and use dropTopAdjustment_moz

property and dropLeftAdjustment_mozproperty to adjust the top and left offsets of the drop

menus/dropdowns for previewing in Netscape/Mozilla/Firefox. Below is an example:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.dropTopAdjustment=-50;

oEdit1.dropLeftAdjustment=-10;

oEdit1.dropTopAdjustment_moz=-42;oEdit1.dropLeftAdjustment_moz=-8;oEdi t 1. REPLACE(" t xt Cont ent ") ;

Please make sure also that you include a declaration in your web page. You can usethe following :

When I click the "Full Screen" button, the Editor doesn't open in full screensize. How to fix this problem?

This problem perists if the Editor is embedded in an element (eg. ) which has position set to


28/30


5 27/07/2006 4:18 PM

absolute or relative.

To solve this problem, use the Editor's built-in onFullScreenand onNormalScreenevents. The

onFullScreenevent 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 element with position is set to relative:

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdi t 1. REPLACE(" t xt Cont ent ") ;

Please add an ID to the element and use the onFullScreenand onNormalScreenevents to

call a custom function we'll create.

var oEdi t 1 = new I nnovaEdi t or ( "oEdi t 1") ;oEdit1.onFullScreen=new Function("doFullScreen()");

oEdit1.onNormalScreen=new Function("doNormalScreen()");oEdi t 1. REPLACE(" t xt Cont ent ") ;

As seen on the above code, the onFullScreenevent is set to call doFullScreen()function and

onNormalScreenevent is set to call doNormalScreen()function.

Then, in the HEAD section of your web page, you can add:

f unct i on doFul l Screen( )

{var i dEdi t=document . get El ement ByI d( " i dEdi t " ) ;idEdit.style.position="";idEdit.style.left=0;

idEdit.style.top=0;}

f unct i on doNor mal Scr een( ){var i dEdi t=document . get El ement ByI d( " i dEdi t " ) ;idEdit.style.position="relative";

idEdit.style.left=100;idEdit.style.top=100;}

As seen on the above code, we remove the position setting of the div element (when the Editor isresized to full screen) and then return the original setting (when the editor is resized back tonormal screen).

When loading a content into the Editor, sometimes there are lines thatdisappear (when using IE browser). When I click inside the editor theyreappear. How to prevent this behaviour?

Please set initialRefreshproperty to true.



29/30


5 27/07/2006 4:18 PM

idEdit.initialRefresh=true;oEdi t 1. REPLACE(" t xt Cont ent ") ;

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 Windowsor Internet Explorer files.

To fix this problem, go to "Start", "Run", and in the "Open" box, type the following commands andpress 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 cmdAssetManagerproperty setting. Use 'relative to root' path to specify the

location of the Asset Manager add-on page (assetmanager.asp). 'Relative to root' always startswith "/".

When uploading large file using the Asset Manager, I get an error message:"Request object error 'ASP 0104 : 80004005' Operation not Allowed". How tofix this problem?

This may occur if the web server is configured to limit the size of the file that can be uploaded tothe server through ASP script (the Request object).

If your web server supports SA-FileUp Component, you can configure the Asset Manager add-onto use the component. Open the assetmanager.aspusing 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 FileManager application to return the selected file url:

f unct i on sel ect Fi l e( f i l eUr l ){i f ( navi gat or . appName. i ndexOf ( ' Mi cr osof t ' ) ! =- 1)

wi ndow. r et urnVal ue=f i l eUr l ;el se

wi ndow. opener . set Asset Val ue( f i l eUr l ) ;sel f . cl ose() ;}

Then, you'd need to set the cmdAssetManagerproperty to point to your file manager, for

example:

oEdi t 1. cmdAsset Manager="modal Di al ogShow( ' / your f i l emanager . php' , 640, 480) " ;

For more information on cmdAssetManagerproperty, check section: Using Asset Manager Add-on.


30/30


Please note that integrating you own File Manager is beyond oursupport scope.

When using IE, is it possible to preserve multiple spaces entered in theEditor?

Yes. Please set:

oEdi t 1. pr eserveSpace=t r ue;

Can I change the hover color/background color for the Style Selector?

Yes. Please use styleSelectionHoverFgand styleSelectionHoverBgproperties, for example::

oEdi t 1. st yl eSel ect i onHoverFg="r ed" ;oEdi t1. st yl eSel ect i onHoverBg="green" ;

when I submit a form (where the Editor is embedded), the current content isnot submitted.

This problem perists if you're using a javascript to submit the form, instead of using regularSubmit button. The Editor wrap some operation on the form onsubmitevent. 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:

function doSubmit()

{//Your custom code here..

document.forms.Form1.onsubmit();

document.forms.Form1.submit()}

var oEdit1 = new InnovaEditor("oEdit1");oEdit1.REPLACE("txtContent");


Innova Studio Developers Guide

Documents

Transcript of Innova Studio Developers Guide