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

  1. Getting Started
    1. Installation
    2. Textarea Replacement
    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 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> you’d like to replace.

<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="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)
{
$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.