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

  1. Getting Started
    1. Installation
    2. Using the Editor in a Web Form
    3. Loading Content into the Editor
    4. Setting the Editor Dimension
  2. Applying Stylesheet
  3. Using Asset Manager Add-on
  4. Advanced Settings
  5. Extending the Editor
  6. Toolbar
  7. Localization
  8. 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 scripts folder and the Server Control (WYSIWYGEditor.dll) is located in bin folder. To use the Editor in ASP.NET pages, copy the scripts folder anywhere in your web server and copy the WYSIWYGEditor.dll into the bin folder of your website.

I.2. Using the Editor in a Web Form

  1. Copy the scripts folder anywhere in your web server (please do not rename it).
  2. Copy the WYSIWYGEditor.dll (located in the bin folder) into the bin folder of your website.
  3. Register the Server Control in your ASP.NET page using:


    <%@ Register TagPrefix="editor" Assembly="WYSIWYGEditor" namespace="InnovaStudio"%>



  4. Embed the Editor using:


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



    The scriptPath property specifies the location of the Editor scripts folder.

    Below is an example:

    <%@ Page Language="vb" ValidateRequest="false" Debug="true" %>
    <%@ Register TagPrefix="editor" Assembly="WYSIWYGEditor" namespace="InnovaStudio" %>
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    </head>
    <body>

    <form id="Form1" method="post" runat="server">

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

    </form>

    </body>
    </html>

I.3. Loading Content into the Editor

To load content into the Editor, use Content property. Below is an example:

<%@ Page Language="vb" ValidateRequest="false" Debug="true" %>
<%@ Register TagPrefix="editor" Assembly="WYSIWYGEditor" namespace="InnovaStudio" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<script language="VB" runat="server">
Sub Page_Load(Source As Object, E As EventArgs)
If Not Page.IsPostBack Then
oEdit1.Text = "<h3>Hello World!</h3>"
End If
End Sub
</script>
</head>
<body>

<form id="Form1" method="post" runat="server">

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

</form>

</body>
</html>

I.4. Setting the Editor Dimension

Editor dimension can be adjusted using the EditorWidth and EditorHeight properties. For example:

<editor:wysiwygeditor
Runat="server"
scriptPath="scripts/"
EditorWidth="100%"
EditorHeight="350"
ID="oEdit1" />

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 ButtonFeatures property. More info



© 2008, INNOVA STUDIO (www.innovastudio.com). All rights reserved.