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

1. Getting Started
2. Applying Stylesheet
3. Using Asset Manager Add-on
4. Advanced Settings
   1. Setting the Editing Mode
   2. Editing & Publishing Path
   3. Line Break
   4. Spell-Checking Integration
   5. Using Optional Save Button
   6. Adding Custom Color Selection
5. Extending the Editor
6. Toolbar
7. Localization
8. FAQ

IV. Advanced Settings

IV.1. Setting the Editing Mode

InnovaStudio WYSIWYG Editor has 4 editing modes:

1. HTMLBody; enables the Editor to edit/return HTML BODY section only.
2. HTML; enables the Editor to edit/return full HTML Content.
3. XHTMLBody; enables the Editor to edit/return HTML BODY section with XHTML rules applied.
4. 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 EditMode property. For example:

<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
EditMode="HTML"
ID="oEdit1" />

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. Editing & Publishing Path

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

http://YourServer/admin/edit.aspx

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

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:
   
   
   <editor:wysiwygeditor
   Runat="server"
   scriptPath="scripts/"
   PublishingPath="http//YourServer/"
   ID="oEdit1" />
   
   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).
   
   
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 don’t need to set the PublishingPath property.

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

<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
UseDIV=false
ID="oEdit1" />

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

<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
UseBR=true
ID="oEdit1" />

Below are the possible values for UseDIV and UseBR (in IE):

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

Note that UseDIV and UseBR only available in IE. They will not take effect in Netscape, Mozilla and Firefox.

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

<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
btnSpellCheck=true
ID="oEdit1" />

Note that this feature is available only for IE Browser.

InnovaStudio WYSIWYG Editor can also be integrated with NetSpell (from sourceforge.net/projects/netspell/). Please contact our support for more info.

IV.5. Using Optional Save Button

InnovaStudio WYSIWYG Editor provides an optional "Save" button that you can use to call your custom Javascript command. To enable the button, specify your Javascript command to call using onSave property:

<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
onSave="Form1.btnSubmit.click()"
ID="oEdit1" />

As seen on the above example, if you have a web form which has id "Form1" and a submit button which has id "btnSubmit", when you click the "Save" button, the form will be submitted. You can then hide the actual submit button using:

<asp:button runat="server" style="display:none" Text="SUBMIT" ID="btnSubmit" onclick="btnSubmit_Click" />

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

oEdit1.CustomColors = New String() {"#ff4500","#ffa500","#808000","#4682b4","#1e90ff","#9400d3","#ff1493","#a9a9a9"}