Default Example | More Examples | Documentation | ASP.NET Documentation

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 (This section is required only if using Google Fonts Dialog or if FontDialog or CompleteTextDialog buttons is used.

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

            /*Apply stylesheet for the editing content*/
            oEdit1.css = "styles/simple.css";

            /*Render the editor*/
            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. [Optional] Include Google Font integration scripts (This section is required only if using Google Fonts Dialog or if FontDialog or CompleteTextDialog buttons is used).

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

Using File Browser

FILE BROWSER/MANAGER IS A FREE ADD-ON INCLUDED IN INNOVASTUDIO LIVE EDITOR PACKAGE (in /AddOns/assetmanager/ folder - You can copy this folder anywhere on your site). SINCE IT IS A STANDALONE APPLICATION AND CAN BE ACCESSED DIRECTLY FROM BROWSER, YOU WILL NEED TO SECURE IT BY ADDING USER CHECK/AUTHENTICATION TO:

- assetmanager/asset.[aspx/asp/php]

SECURITY CHECK MUST ALSO BE ADDED TO OTHER FILES IN FILE BROWSER FOLDER SUCH AS:

- assetmanager/server/delfile.[ashx/asp/php]
- assetmanager/server/delfolder.[ashx/asp/php]
- assetmanager/server/newfolder.[ashx/asp/php]
- assetmanager/server/upload.[ashx/asp/php]

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

        oEdit1.fileBrowser = "/assetmanager/asset.php";
Or
        oEdit1.fileBrowser = "/assetmanager/asset.asp";
Or
        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):

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", "TableDialog"]],
		["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

Adding Custom Button and Dropdown Button

You can add your own custom buttons using arrCustomButtons property. Each button should have the following format:

["Button name", "Action", "Title/Tooltips", "Icon file", "Icon width", Dropdownitems]

Example:


	//standard custom button
	oEdit1.arrCustomButtons.push(["MyCustomButton", "alert('Custom Command here..')", "Caption..", "btnCustom1.gif"]);

	//dropdown butto
	var dropdownItems = [
		["dropdown id", "action here, to be executed by eval()", "dropdown text here..."],
		["dropdown1", "alert('test');", "Dropdown Item 1"],
		["dropdown2", "modalDialog('somedialog1.htm',500,223,'My Dialog1');", "Dropdown Item 2"],
		["dropdown3", "modalDialog('somedialog2.htm',800,453,'My Dialog2');", "Dropdown Item 3"]
	];
	oEdit1.arrCustomButtons.push(["MyDropdownButton", "", "Caption..", "btnCustom2.gif", 0, dropdownItems]);

	oEdit1.groups = [
		["group1", "", ["Bold", "Italic", "Underline", "FontDialog", "ForeColor", "TextDialog", "RemoveFormat"]],
		["group2", "", ["Bullets", "Numbering", "JustifyLeft", "JustifyCenter", "JustifyRight"]],
		["group3", "", ["LinkDialog", "ImageDialog", "TableDialog", "MyCustomButton", "MyDropdownButton"]],
		["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", "TableDialog", "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", "TableDialog"]],
            ["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:

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 enable Flickr Image browser:

        oEdit1.enableFlickr = true;

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

        oEdit1.flickrUser = "USERNAME";

Enable/Disable Tabs and Other Options

To enable Styles tab in the Link Dialog:

        oEdit1.enableCssButtons = true;

To disable Styles Tab in Image Dialog:

        oEdit1.enableImageStyles = false;

To enable Table Autoformat in the Table Dialog:

        oEdit1.enableTableAutoformat = true;

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", "TableDialog"]],
            ["group4", "", ["InternalLink", "CustomObject"]],
            ["group5", "", ["Undo", "Redo", "FullScreen", "SourceDialog"]]
            ];

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

        oEdit1.enableLightbox = true;

Then please find FancyBox script in /AddOns/fancybox13/ folder in the package and copy the folder into scripts/common/ (or anywhere on your site).
Include the FancyBox script into your page (where your content is published) using:

        <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>
(Note that JQuery is required)

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:

Special Characters

Editor by default replace several special characters with entity code.

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>

Editing CSS/External Stylesheet

You can assign one or more external stylesheets for editing in editor.

    oEdit1.css = "/styles/file.css";

or use array for multiple files

    oEdit1.css = ["/styles/file1.css","/styles/file2.css","/styles/file3.css"];

Note that path to css file should be relative to root (relative to website root).

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. It is possible to specify multiple prefixes, each value should be comma separated withtout space in between.

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

Properties and Functions Reference

Below are list of Live Editor properties and functions

1. Editor properties

Name Description
widthSet editor width for example oEdit1.width="750px"
heightSet editor width for example oEdit1.height="350px"
publishingPathSet document publishingPath.
tabsConfigure toolbar tab
groupsConfigure toolbar button groups
toolbarModeSet toolbar mode

Possible values are:

  • 1-Tabs&Groups toolbar
  • 2-Groups toolbar
  • 3-Flowing Groups toolbar
pasteTextOnCtrlVPaste text only content into editor when using CTRL+V, default value is false
fileBrowserFile browser path
enableFlickrEnable flickr tab in Image Dialog, default value is false
flickrUserFlickr user account name
enableCssButtonsEnable style tab in Link Dialog, default value is false
enableImageStylesEnable style tab in Image Dialog, default value is true
enableYTVideoStylesEnable style tab in Youtube Dialog, default value is true
cssSet editing stylesheet. The path should be relative to root for example:
  	oEdit1.css = "/styles/file.css";
  	

As of Live Editor v1.7, the css property allow multiple external css files for editing.

	oEdit1.css = ["/styles/file1.css","/styles/file2.css","/styles/file3.css"];
  	

Note that path to css file should be relative to root (relative to website root).

arrStyleAn 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
enableLightboxEnable/disable 'Open in lighbox' option in Hyperlink dialog. Default is false.
enableTableAutoformatEnable/disable table auto format in Table dialog., Default is true.
cmdInternalLinkInternal 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.
	
cmdCustomObjectCustom 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.
	
arrFontNameList 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"
	];
  	
returnKeyModeSet 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
useTagSelectorEnable tag selector, default value is true
TagSelectorPositionSet tag selector position, possible values are bottom and top. Default value is bottom
arrCustomButtons Define a custom button.
  	//standard button
  	oEdit1.arrCustomButtons.push(["MyCustomButton1", "alert('Custom Command here..')", "Caption..", "btnCustom1.gif"]);

  	//dropdown button
	var dropdownItems = [
		["dropdown id", "action here, to be executed by eval()", "dropdown text here..."],
		["dropdown1", "alert('test');", "Dropdown Item 1"],
		["dropdown2", "modalDialog('somedialog1.htm',500,223,'My Dialog1');", "Dropdown Item 2"],
		["dropdown3", "modalDialog('somedialog2.htm',800,453,'My Dialog2');", "Dropdown Item 3"]
	];
  	oEdit1.arrCustomButtons.push(["MyCustomButton1", "alert('Custom Command here..')", "Caption..", "btnCustom1.gif", 0, dropdownItems]);
  	

The format is

  • Button name
  • Action when clicked, note that the action will be executed using javascript eval() function
  • Title (tooltip)
  • Icon file name
  • icon width, specify icon width, default value is 0 (editor icon standard width). Specify this value if you have custom icon file with non standard witdh.
  • dropdownitems, array of dropdown items with the following format:

    ["dropdown id", "action, to be executed by eval()", "dropdown text here..."]

customTag Define custom tag options
  	oEdit1.arrCustomTag = [["First Name", "{%first_name%}"],
		["Last Name", "{%last_name%}"],
		["Email", "{%email%}"]];
  	
modeSet 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.
disableFocusOnLoadBy 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
setDialogsize(name, dim)Set dialog size. Here are list of dialog available:
  • Preview
  • TableDialog
  • ImageDialog
  • TextDialog
  • YoutubeDialog
  • LinkDialog
  • SourceDialog
  • CompleteTextDialog
  • FontDialog
  • FlashDialog
  • BookmarkDialog
  • CharsDialog
  • SearchDialog

Example:

	oEdit1.setDialogSize("Preview", {w:1000, h:700});