InnovaStudio WYSIWYG Editor - Developer's Guide

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

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:

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:

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.

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:

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:

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

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:

<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 don’t 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:

To apply <BR> by default, set useBR property to true:

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

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: