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>
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");
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.
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>
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;
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.
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]] ]
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]
["dropdown id", "action, to be executed by eval()", "dropdown text here..."]
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.
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%}"]];
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.
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);
To enable full html editing, set mode property to "XHTML". The default value is "XHTMLBody" (for editing body content only).
oEdit1.mode = "XHTML";
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.
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();
You can configure the editor to insert <DIV>, <P> or <BR> when pressing enter key.
oEdit1.returnKeyMode = 1;
Possible values are:
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;
To enable Flickr Image browser:
oEdit1.enableFlickr = true;
To configure default Flickr Image to browse, specify Flickr Username:
oEdit1.flickrUser = "USERNAME";
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)
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:
Editor by default replace several special characters with entity code.
<script language="Javascript">
oEdit1.loadSpecialCharCode([[169, "©"], [163, "£"], [174, "®"], [233, "é"], [201, "É"], [8364, "€"], [8220, "\""]]);
</script>
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).
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>
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:
|
| 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 false |
| flickrUser | Flickr user account name |
| enableCssButtons | Enable style tab in Link Dialog, default value is false |
| enableImageStyles | Enable style tab in Image Dialog, default value is true |
| enableYTVideoStyles | Enable style tab in Youtube Dialog, default value is true |
| css | Set 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). |
| 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:
|
| enableLightbox | Enable/disable 'Open in lighbox' option in Hyperlink dialog. Default is false. |
| 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:
|
| 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.
//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
|
| 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:
|
| 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:
|
| 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:
Example:
oEdit1.setDialogSize("Preview", {w:1000, h:700});
|