Documentation

Usage

1. Include the Editor script file (in the <head> section of your web page).

        <script language="javascript" type="text/javascript" src='scripts/innovaeditor.js'></script>

2. [Optional] Include Google Font integration scripts (in the <head> section of your web page).

        <script src="scripts/common/jquery-1.7.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript"></script>
        <script src="scripts/common/webfont.js" type="text/javascript"></script>

3. Initialize the Editor below any <textarea> you’d like to replace.

        <textarea id="txtContent" rows="4" cols="30">
        <script language="javascript" type="text/javascript">
            var oEdit1 = new InnovaEditor("oEdit1");
            oEdit1.width = 750;
            oEdit1.height = 530;
            oEdit1.groups = [
                ["group1", "", ["Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"]],
                ["group2", "", ["Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"]],
                ["group3", "", ["LinkDialog", "ImageDialog", "YoutubeDialog", "TableDialog", "Emoticons"]],
                ["group4", "", ["Undo", "Redo", "FullScreen", "SourceDialog"]]
                ];
            oEdit1.css = "styles/default.css";
            oEdit1.REPLACE("txtContent");
        </script>

Initialize Editor After Page Load (AJAX)

You can load editor from a function after page is completely loaded (AJAX).

1. Define a div or container element, assign an ID to it. This will be placeholder for editor, where editor will be rendered.

2. Pass the id of the placeholder as second parameter in REPLACE function.

		oEdit1.REPLACE("textareaid", "div id");

For example:

		<div id="myEditor"></div>
		oEdit1.REPLACE("textarea id", "myEditor");

Note that for this to work, the oEdit1 variable must be declared in page scope. It will not work if you declare the variable in a function. If you load the editor inside a function, you have to add the variable reference to browser's window object:

		window["oEdit1"] = new InnovaEditor("oEdit1");
		window["oEdit1"].REPLACE("textarea id", "myEditor");

Submit/Save Editor Content

Editor is implemented as textarea replacement, it submits content through the already defined <textarea>. Getting editor content on server side is just like regular form processing since content is submitted throught <textarea>. You just need to get the content from HTTP post variable and save it to file or database.

Publishing Content

When you display/publish your content result anywhere on your web sites, please include the following:

1. Include the css file that you defined for editing content (using oEdit1.css = "styles/default.css").

        <link href="styles/default.css" rel="stylesheet" type="text/css" />

2. Include Google Font integration scripts (in the <head> section of your web page).

        <script src="scripts/common/jquery-1.7.min.js" type="text/javascript"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js" type="text/javascript"></script>
        <script src="scripts/common/webfont.js" type="text/javascript"></script>

3. Include Windows Lightbox integration scripts (in the <head> section of your web page). It is required to enable 'Open Larger' feature on Flickr image inserted using the Editor.

        <script src="scripts/common/fancybox13/jquery.easing-1.3.pack.js" type="text/javascript"></script>
        <script src="scripts/common/fancybox13/jquery.mousewheel-3.0.2.pack.js" type="text/javascript"></script>
        <script src="scripts/common/fancybox13/jquery.fancybox-1.3.1.pack.js" type="text/javascript"></script>
        <link href="scripts/common/fancybox13/jquery.fancybox-1.3.1.css" rel="stylesheet" type="text/css" />
        <script language="javascript" type="text/javascript">
            $(document).ready(function () {
                $('a[rel=lightbox]').fancybox();
            });
        </script>

Using File Browser

To enable custom file browser in the Image & Link dialogs, use fileBrowser property.

        oEdit1.fileBrowser = "/assetmanager/asset.php";

        oEdit1.fileBrowser = "/assetmanager/asset.asp";

        oEdit1.fileBrowser = "/assetmanager/asset.aspx";

To specify folder location to browse, set the base variable (in asset.php, asset.asp or asset.apsx):

        var base = "/images";

To disable the Upload & Delete files and Create & Delete folders features, set the readonly variable to true (in asset.php, asset.asp or asset.apsx):

        var readonly = true;

Some applications require File Browser that returns full file path (eg. in Newsletter editing, etc). To enable full file path feature, set the fullpath variable to true (in asset.php, asset.asp or asset.apsx):

        var fullpath = true;

Upload File Types

To set allowed file types for upload:

For PHP version, in assetmanager/onfig.php

	define("UPLOAD_FILE_TYPES", "jpg|jpeg|gif|png|txt|pdf|zip");

For Classic ASP version, in assetmanager/server/upload.asp

	UploadifyObject.allowedTypes = "jpg|jpeg|gif|png|txt|pdf|zip"

Allowed file types/extensions are separated by pipe (|) character, without space. Use empty string to allow all file types.

Configure Toolbar

Live Editor support tabs and group toolbar. To set toolbar mode

	oEdit1.toolbarMode = 1;

Possible values are (2 is default):

1 - Tab and group
2 - Group only
3 - Group (flow)

Use tabs and groups property to configure toolbar buttons. Here is editor's default tabs and groups configuration.

	oEdit1.tabs = [
		["tabHome", "Home", ["group1", "group2", "group4"]],
		["tabStyle", "Insert", ["group3"]]
		];

	oEdit1.groups = [
		["group1", "", ["Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"]],
		["group2", "", ["Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"]],
		["group3", "", ["LinkDialog", "ImageDialog", "YoutubeDialog", "TableDialog", "Emoticons", "Quote"]],
		["group4", "", ["Undo", "Redo", "FullScreen", "SourceDialog"]]
		];

The format of tabs property is

  oEdit1.tabs= [
  		[Tab 1 id, Tab name, [List of group id]],
  		[Tab 2 id, Tab name, [List of group id]],
  		[Tab n id, Tab name, [List of group id]]
  		]

The format of groups property is

  oEdit1.groups=[
  		[Group 1 id, Group name, [List of buttons]],
  		[Group 2 id, Group name, [List of buttons]],
  		[Group n id, Group name, [List of buttons]]
  		]

List of Available Toolbar Buttons

Bold
Italic
Underline
Strikethrough
Superscript
Subscript
ForeColor
BackColor
RemoveFormat
Paragraph
FontName
FontSize
FontDialog
TextDialog
CompleteTextDialog (NEW!)
Quote (NEW!)
Styles (Style Selection)
JustifyLeft
JustifyCenter
JustifyRight
JustifyFull
Bullets
Numbering
Indent
Outdent
Table (NEW!)
TableDialog
FlashDialog
LinkDialog
ImageDialog
YoutubeDialog
CharsDialog (Special Characters Dialog)
SearchDialog
SourceDialog (HTML Editor Dialog)
Emoticons
Line
InternalLink (Custom)
CustomObject (Custom)
CustomTag (Custom)
Undo
Redo
FullScreen
BRK (Line Break)
RTL
LTR

Adding Custom Buttons

You can add your own custom buttons using arrCustomButtons property.

        oEdit1.arrCustomButtons.push(["MyCustomButton1", "alert('Custom Command here..')", "Caption..", "btnCustom1.gif"]);
        oEdit1.arrCustomButtons.push(["MyCustomButton2", "alert('Custom Command here..')", "Caption..", "btnCustom2.gif"]);

        oEdit1.groups = [
            ["group1", "", ["Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"]],
            ["group2", "", ["Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"]],
            ["group3", "", ["LinkDialog", "ImageDialog", "YoutubeDialog", "TableDialog", "Emoticons", "MyCustomButton1", "MyCustomButton2"]],
            ["group4", "", ["Undo", "Redo", "FullScreen", "SourceDialog"]]
            ];

Button image file is located in scripts/icons/ folder. Use btnCustom1.gif, btnCustom2.gif, .. or create your own button image.

Adding Custom Tags Insertion

With this feature, you can insert predefined custom tags into the current Editor content. Custom Tag insertion is a feature that is commonly used in mailing applications or template editing in web content management systems.

        oEdit1.groups = [
            ["group1", "", ["Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"]],
            ["group2", "", ["Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"]],
            ["group3", "", ["LinkDialog", "ImageDialog", "YoutubeDialog", "TableDialog", "Emoticons", "CustomTag"]],
            ["group4", "", ["Undo", "Redo", "FullScreen", "SourceDialog"]]
            ];

        oEdit1.arrCustomTag = [["First Name", "{%first_name%}"],
            ["Last Name", "{%last_name%}"],
            ["Email", "{%email%}"]];

Adding "InternalLink" & "CustomObject" buttons

This buttons are commonly used in CMS application to open file browser, internal page links, etc. To open your own custom page, use modalDialog method.

        oEdit1.groups = [
            ["group1", "", ["Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"]],
            ["group2", "", ["Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"]],
            ["group3", "", ["LinkDialog", "ImageDialog", "YoutubeDialog", "TableDialog", "Emoticons"]],
            ["group4", "", ["InternalLink", "CustomObject"]],
            ["group5", "", ["Undo", "Redo", "FullScreen", "SourceDialog"]]
            ];

        oEdit1.cmdInternalLink = "modalDialog('links.htm',365,270)"; //Command to open your custom link browser.
        oEdit1.cmdCustomObject = "modalDialog('objects.htm',365,270)"; //Command to open your custom file browser.

Inserting HTML Content into the Editor

To insert custom html from your own custom page (opened using modalDialog method), use insertHTML.

        var sHTML = "<p>Best Wishes</p>";
        var obj = parent.oUtil.obj;
        obj.insertHTML(sHTML);

Editing Mode

To enable full html editing, set mode property to "XHTML". The default value is "XHTMLBody" (for editing body content only).

        oEdit1.mode = "XHTML";

Loading Content at Runtime

InnovaStudio Live 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 css property).

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

        oEdit1.loadHTML(sHTML);

where sHTML is the HTML Body content.

Getting the Current Content

InnovaStudio Live Editor allows you to get/read the current Editor content. Use getXHTML() method to get full HTML content. The syntax is:

        oEdit1.getXHTML();

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

        oEdit1.getXHTMLBody();

Inserting <DIV>, <P> or <BR> when pressing Enter Key

You can configure the editor to insert <DIV>, <P> or <BR> when pressing enter key.

        oEdit1.returnKeyMode = 1;

Possible values are:

0: follow browser default. With this option, tag inserted when pressing Enter key is depending on browser. IE8 and lower will insert P and IE9 insert DIV. Firefox always insert BR while Chrome/Safari inserts DIV.
1: always insert DIV (default)
2: always insert BR
3: always insert P

MS Word Cleaning and Paste Text

By default, when user paste content into editing panel (using CTRL+V), editor will clean the content and remove any non html standard tags. This is particullary useful for paste content from other resource like MS Word.

However you can also configure editor to remove any html tags from content pasted into editor using pasteTextOnCtrlV property:

        oEdit1.pasteTextOnCtrlV = true;

Flickr Image Configuration

To disable Flickr Image browser:

        oEdit1.enableFlickr = false;

To configure default Flickr Image to browse, specify Flickr Username:

        oEdit1.flickrUser = "USERNAME";

Other Options

To disable Css Buttons on the Link Dialog:

        oEdit1.enableCssButtons = false;

To disable "Open in a Lightbox" on the Link & Image Dialog:

        oEdit1.enableLightbox = false;

To disable Table Autoformat on the Table Dialog:

        oEdit1.enableTableAutoformat = false;

To disable Google Fonts, remove "FontDialog" from the toolbar configuration, and add "FontName" (for normal font dropdown):

        oEdit1.groups = [
            ["group1", "", ["Bold", "Italic", "Underline", "FontName", "ForeColor", "TextDialog", "RemoveFormat"]],
            ["group2", "", ["Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"]],
            ["group3", "", ["LinkDialog", "ImageDialog", "YoutubeDialog", "TableDialog", "Emoticons"]],
            ["group4", "", ["InternalLink", "CustomObject"]],
            ["group5", "", ["Undo", "Redo", "FullScreen", "SourceDialog"]]
            ];

Localization

You can localize the Editor to be displayed in specific language by adding a language include file before the Editor javascript include, for example:

    <script language="Javascript" src="scripts/language/da-DK/editor_lang.js"></script>
    <script language="Javascript" src="scripts/innovaeditor.js"></script>

The current available language files are located in folder scripts/language/. If no language file specified, English version will be used.

Note:

Most of the available translations are not complete yet.
To translate the Editor into your language, open & edit language files in folder:
- scripts\language\
- scripts\common\language\

Special Characters

Editor by default replace several special characters with entity code.

©
£
®
é
É
&euro
and “ replaced with "

The list is defined in oUtil.spcCharCode property. You can override this property using new oEdit1.loadSpecialCharCode() function, for example:

    <script language="Javascript">
    	oEdit1.loadSpecialCharCode([[169, "&copy;"], [163, "&pound;"], [174, "&reg;"], [233, "&eacute;"], [201, "&Eacute;"], [8364, "&euro;"], [8220, "\""]]);
    </script>

Filtering CSS Rules for Style Selector

You may not want all rules in your external stylesheet (editing style) to be listed and available for user in Style Selector. To do this, set oEdit1.styleSelectorPrefix property, this force editor to display only class rules with the specified prefix. For example:

    <script language="Javascript">
    	oEdit1.styleSelectorPrefix = "is_";
    </script>

This make editor list only rules started with ".is_" such as .is_title{}, .is_heading{}. By default this property is empty, which mean all rules will be listed.

Properties and Functions Reference

Below are list of Live Editor properties and functions

1. Editor properties

Name	Description
width	Set editor width for example oEdit1.width="750px"
height	Set editor width for example oEdit1.height="350px"
publishingPath	Set document publishingPath.
tabs	Configure toolbar tab
groups	Configure toolbar button groups
toolbarMode	Set toolbar mode Possible values are: 1-Tabs&Groups toolbar 2-Groups toolbar 3-Flowing Groups toolbar
pasteTextOnCtrlV	Paste text only content into editor when using CTRL+V, default value is false
fileBrowser	File browser path
enableFlickr	Enable flickr tab in Image Dialog, default value is true
flickrUser	Flickr user account name
enableCssButtons	Enable type tab in Link Dialog, default value is true
css	Set editing stylesheet. The path should be relative to root for example: oEdit1.css = "/styles/file.css";
arrStyle	An alternative way to set editing style using javascript array 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,"", "font-family:Courier New;font-weight:bold;"] ]; arrStyle property allows you to specify the style rules (in the form of array). Each rule is constructed by: HTML/Class Selector True/false parameter to specify whether the style will be included in the Style Selection list or not. This element is preserved, should be an empty string. Css Text
enableLightbox	Enable/disable 'Open in lighbox' option in Hyperlink dialog. Default is true.
enableTableAutoformat	Enable/disable table auto format in Table dialog., Default is true.
cmdInternalLink	Internal link command, this command is executed by using javascript eval() function. oEdit1.cmdInternalLink = "modalDialog('my_custom_dialog.htm',650,350)"; //Command to open your custom link browser.
cmdCustomObject	Custom object command, this command is executed by using javascript eval() function. oEdit1.cmdCustomObject = "modalDialog('my_custom_dialog.htm',650,350)"; //Command to open your custom file browser.
arrFontName	List of font available for selection in font name dropdown. It is prepopulated with default value oEdit1.arrFontName = ["Impact, Charcoal, sans-serif", "Palatino Linotype, Book Antiqua, Palatino, serif", "Tahoma, Geneva, sans-serif", "Century Gothic, sans-serif", "Lucida Sans Unicode, Lucida Grande, sans-serif", "Times New Roman, Times, serif", "Arial Narrow, sans-serif", "Verdana, Geneva, sans-serif", "Copperplate Gothic Light, sans-serif", "Lucida Console, Monaco, monospace", "Gill Sans MT, sans-serif", "Trebuchet MS, Helvetica, sans-serif", "Courier New, Courier, monospace", "Arial, Helvetica, sans-serif", "Georgia, Serif", "Garamond, Serif" ];
returnKeyMode	Set the behavior when Enter is pressed. Possible values are: 0: follow browser default. With this option, tag inserted when pressing Enter key is depending on browser. IE8 and lower will insert P and IE9 insert DIV. Firefox always insert BR while Chrome/Safari inserts DIV. 1: always insert DIV (default) 2: always insert BR 3: always insert P
useTagSelector	Enable tag selector, default value is true
TagSelectorPosition	Set tag selector position, possible values are bottom and top. Default value is bottom
arrCustomButtons	Define a custom button. oEdit1.arrCustomButtons.push(["MyCustomButton1", "alert('Custom Command here..')", "Caption..", "btnCustom1.gif"]); The format is Button name Action when clicked, note that the action will be executed using javascript eval() function Title (tooltip) Icon file name
customTag	Define custom tag options oEdit1.arrCustomTag = [["First Name", "{%first_name%}"], ["Last Name", "{%last_name%}"], ["Email", "{%email%}"]];
mode	Set editing mode. Default value is XHTMLBody. Possible values are: XHTML, enables the Editor to edit/return full HTML Content with XHTML rules applied. XHTMLBody, enables the Editor to edit/return HTML BODY section with XHTML rules applied.
disableFocusOnLoad	By default editor always get the focus on first load. Sometimes this may not be wanted especially of editor is located down the page which will cause the page scroll to editor position. Default value is false. oEdit1.disableFocusOnLoad = true;

2. Editor Methods/Functions

Name	Description
REPLACE()	Replace <textarea> with editor. This method has 2 parameters: textarea id, id of textarea to be replaced with editor. placeholder id where editor will be rendered. This is optional. This parameter is useful especially when loading editor after page load using AJAX mechanism.
loadHTML()	Load html content into editor. New content will replace existing content. oEdit1.loadHTML("Hello World");
putHTML()	Same as loadHTML()
insertHTML()	Insert HTML chunk on cursor position. oEdit1.insertHTML("Hello World");
fullScreen()	Make the editor occupy full screen size. You can call this function in page onload event to make the editor full screen size.
getXHTMLBody()	This function returns XHTML compliant content from editor. The content returned is body only content. var content = oEdit1.getXHTMLBody();
getXHTML()	Get full XHTML compliant content.
getHTMLBody()	Get HTML body content
getHTML()	Get full HTML content
getTextBody()	Get text only content
isContentChanged()	Check if content has been changed. if(oEdit1.isContentChanged()) { //do something }
onKeyPress()	Key pressed event, fired when key pressed in editor.
focus()	Focus the editor