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

1. Getting Started
2. Applying Stylesheet
3. Using Asset Manager Add-on
4. Advanced Settings
5. Extending the Editor
6. Toolbar
   1. Configuring the Toolbar Buttons
   2. Adding Custom Buttons
   3. Using Tabbed Toolbar
   4. Tag Selector Settings
7. Localization
8. FAQ

VI. Toolbar

VI.1. Configuring Toolbar Buttons

You can show/hide toolbar buttons using 2 ways:

1. By setting true/false to the appropriate properties. For example, this will show the "Clear All" button:
   
   
   <script>
   var oEdit1 = new InnovaEditor("oEdit1");
   oEdit1.btnClearAll=true;
   oEdit1.REPLACE("txtContent");
   </script>
   
   The "Clear All" button is disabled by default. As seen on the above example, to enable/show the "Clear All" button, we set btnClearAll property to true. Please Note that some toolbar buttons are disabled by default. Please refer to the button list at the end of this section.
   
   
2. By specifying the name of the buttons you'd like to display using features property. Using the features property, you specify also the button ordering, as well as button spaces and toolbar line breaks. Below is an example:
   
   
   <script>
   var oEdit1 = new InnovaEditor("oEdit1");
   oEdit1.features=["FullScreen","Preview","Print","Search",
   "Cut","Copy","Paste","PasteWord","PasteText","|","Undo","Redo","|",
   "ForeColor","BackColor","|","Bookmark","Hyperlink","XHTMLSource","BRK",
   "Numbering","Bullets","|","Indent","Outdent","LTR","RTL","|",
   "Image","Flash","Media","|","Table","Guidelines","Absolute","|",
   "Characters","Line","Form","RemoveFormat","ClearAll","BRK",
   "StyleAndFormatting","TextFormatting","ListFormatting","BoxFormatting",
   "ParagraphFormatting","CssText","Styles","|",
   "Paragraph","FontName","FontSize","|",
   "Bold","Italic","Underline","Strikethrough","|",
   "JustifyLeft","JustifyCenter","JustifyRight","JustifyFull"];
   oEdit1.REPLACE("txtContent");
   </script>
   
   
   
   Note:
   Use "|" for Space Break and "BRK" for Line Break.
   
   
   The result is shown below:
   
   For a list of button names, please refer to the button list below.

List of buttons (includes also menu items & dropdowns):

Icon	Description	Name	Property	Default Value	IE*	Moz*
	"Save" button.	Save	btnSave	false	Yes	Yes
	"Full Screen" button.	FullScreen	btnFullScreen	true	Yes	Yes
	"Preview" button.	Preview	btnPreview	true	Yes	Yes
	"Print" button.	Print	btnPrint	false	Yes	Yes
	"Search" button.	Search	btnSearch	true	Yes	No
	"Spell Check" button.	SpellCheck	btnSpellCheck	false	Yes	No
	"Style & Formatting" button. This button opens a menu which has: "Text Formatting" menu item "List Formatting" menu item "Box Formatting" menu item "Paragraph Formatting" menu item "Custom Css" menu item	StyleAndFormatting	(No Property) This button is enabled by default as well as the menu items: "Text Formatting" menu item "List Formatting" menu item "Box Formatting" menu item "Paragraph Formatting" menu item "Custom Css" menu item If you disabled all the above menu items (by setting btnTextFormatting, btnListFormatting, btnBoxFormatting, btnParagraphFormatting and btnCssText properties to false, this button would automatically disabled. If you're using features property, you can show/hide this button by including or not including the button name "StyleAndFormatting" in the features property value. You'd also need to include at least one of its menu items ("TextFormatting", "ParagraphFormatting", "ListFormatting", "BoxFormatting", "CssText") in the features property value.	-	Yes	Yes
	"Text Formatting" menu item.	TextFormatting	btnTextFormatting	true	Yes	Yes
	"Paragraph Formatting" menu item.	ParagraphFormatting	btnParagraphFormatting	true	Yes	Yes
	"List Formatting" menu item.	ListFormatting	btnListFormatting	true	Yes	Yes
	"Box Formatting" menu item.	BoxFormatting	btnBoxFormatting	true	Yes	Yes
	"Custom Css" menu item.	CssText	btnCssText	true	Yes	Yes
	"Cut" button.	Cut	btnCut	true	Yes	CTRL-X
	"Copy" menu item.	Copy	btnCopy	true	Yes	CTRL-C
	"Paste" button.	Paste	btnPaste	true	Yes	CTRL-V
	"Paste from Word" button.	PasteWord	btnPasteWord	true	Yes	Yes
	"Paste Text" button.	PasteText	btnPasteText	false	Yes	Yes
	"Undo" button.	Undo	btnUndo	true	Yes	Yes
	"Redo" button.	Redo	btnRedo	true	Yes	Yes
	"Text Color" button.	ForeColor	btnForeColor	true	Yes	Yes
	"Text Background Color" button.	BackColor	btnBackColor	true	Yes	Yes
	"Bookmark" button.	Bookmark	btnBookmark	true	Yes	Yes
	"Hyperlink" button.	Hyperlink	btnHyperlink	true	Yes	Yes
	"Custom Tag" button.	CustomTag	(No Property) This butttom will automatically enabled if you specify the arrCustomTag property. More info	-	Yes	Yes
	"Image" button.	Image	btnImage	true	Yes	Yes
	"Flash" button.	Flash	btnFlash	false	Yes	Yes
	"Media" button.	Media	btnMedia	false	Yes	Yes
	"Internal Link" button.	InternalLink	(No Property) This butttom will automatically enabled if you specify the cmdInternalLink property. More info	-	Yes	Yes
	"Custom Object" button.	CustomObject	(No Property) This butttom will automatically enabled if you specify the cmdCustomObject property. More info	-	Yes	Yes
	"Table" button.	Table	btnTable	true	Yes	Yes
	"Guidelines" button.	Guidelines	btnGuidelines	true	Yes	No
	"Absolute" button.	Absolute	btnAbsolute	true	Yes	Yes
	"Secial Characters" button.	Characters	btnCharacters	true	Yes	Yes
	"Horizontal Line" button.	Line	btnLine	true	Yes	Yes
	"Form" button.	Form	btnForm	true	Yes	Yes
	"Remove Formatting" button.	RemoveFormat	btnRemoveFormat	true	Yes	Yes
	"Source Editor" button for full HTML editing.	XHTMLFullSource	(No Property) If the Editor editing mode is set to "HTML" or "XHTML", this button would automatically displayed. If you're using features property, you can show/hide this button by including or not including the button name "XHTMLFullSource" in the features property value.	-	Yes	Yes
	"Source Editor" button for HTML BODY content editing.	XHTMLSource	(No Property) If the Editor editing mode is set to "HTMLBODY" or "XHTMLBODY", this button would automatically displayed (This this button is displayed by default as the Editor has default editing mode set to "HTMLBODY"). If you're using features property, you can show/hide this button by including or not including the button name "XHTMLSource" in the features property value.	-	Yes	Yes
	"Clear All" button.	ClearAll	btnClearAll	false	Yes	Yes
	"Style Selection" button.	Styles	btnStyles	false	Yes	Yes
	"Paragraph" dropdown.	Paragraph	btnParagraph	true	Yes	Yes
	"Font" dropdown.	FontName	btnFontName	true	Yes	Yes
	"Font Size" dropdown.	FontSize	btnFontSize	true	Yes	Yes
	"Bold" button.	Bold	btnBold	true	Yes	Yes
	"Italic" button.	Italic	btnItalic	true	Yes	Yes
	"Underline" button.	Underline	btnUnderline	true	Yes	Yes
	"Strikethrough" button.	Strikethrough	btnStrikethrough	false	Yes	Yes
	"Superscript" button.	Superscript	btnSuperscript	false	Yes	Yes
	"Subscript" button.	Subscript	btnSubscript	false	Yes	Yes
	"Justify Left" button.	JustifyLeft	btnJustifyLeft	true	Yes	Yes
	"Justify Center" button.	JustifyCenter	btnJustifyCenter	true	Yes	Yes
	"Justify Right" button.	JustifyRight	btnJustifyRight	true	Yes	Yes
	"Justify Full" button.	JustifyFull	btnJustifyFull	true	Yes	Yes
	"Numbering" button.	Numbering	btnNumbering	true	Yes	Yes
	"Bullets" button.	Bullets	btnBullets	true	Yes	Yes
	"Indent" button.	Indent	btnIndent	true	Yes	Yes
	"Outdent" button.	Outdent	btnOutdent	true	Yes	Yes
	"Left to Right" button.	LTR	btnLTR	false	Yes	Yes
	"Right to Left" button.	RTL	btnRTL	false	Yes	Yes

*IE : Internet Explorer 5.5/later (Windows)
*Moz: Netscape 7.1/later, Mozilla 1.4/later & Firefox 1.0/later (Windows & Mac OS X)

VI.2. Adding Custom Buttons

To add custom buttons on the Editor toolbar, use arrCustomButtons property and specify the features property to include the custom button names. Below is an example:

<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.arrCustomButtons=[["ButtonName1","alert('Command 1 here')","Caption 1","btnCustom.gif"],
["ButtonName2","alert(\"Command '2' here\")","Caption 2","btnCustom.gif"],
["ButtonName3","alert('Command \"3\" here')","Caption 3","btnCustom.gif"]];

oEdit1.features=["Preview","FullScreen","Search",
"StyleAndFormatting","TextFormatting","ListFormatting",
"BoxFormatting","ParagraphFormatting","CssText","Styles","|",
"Paragraph","FontName","FontSize","|","Cut","Copy","Paste",
"PasteWord","|","Undo","Redo","|","Bold","Italic","Underline",
"JustifyLeft","JustifyCenter","JustifyRight","JustifyFull",
"BRK","Numbering","Bullets","Indent","Outdent","|",
"ForeColor","BackColor","|","Bookmark","Hyperlink","Image",
"Flash","Media","|","Table","Border","Guidelines","Absolute","|",
"Characters","Line","Form","RemoveFormat","XHTMLSource","|",
"ButtonName1","ButtonName2","ButtonName3"];
oEdit1.REPLACE("txtContent");
</script>

As seen on the above code, you need to set the arrCustomButtons property with:

• Button Name
• Command to execute
• Caption
• Image/icon (You'd need to create your own image or you can use the provided btnCustom1.gif – btnCustom7.gif)

You can re-arrange the custom buttons at any position on the toolbar by setting the features property.

VI.3. Using Tabbed Toolbar

You can organize the toolbar into tabs and groups by specifying tabs and groups property. In each tab there are groups of buttons. Below is the example:

<script>
var oEdit1 = new InnovaEditor("oEdit1");

oEdit1.tabs=[
["tabHome", "Home", ["grpEdit", "grpFont", "grpPara", "grpPage"]],
["tabStyle", "Objects & Styles", ["grpObjects", "grpLinks", "grpTables",
"grpStyles", "grpCustom"]]
];

oEdit1.groups=[
["grpEdit", "Edit",
["Undo", "Redo", "Search", "SpellCheck", "ClearAll", "BRK", "Cut", "Copy",
"Paste","PasteWord", "PasteText", "RemoveFormat"]],
["grpFont", "Font", ["FontName", "FontSize", "BRK", "Bold",
"Italic", "Underline","Strikethrough","Superscript",
"Subscript", "ForeColor", "BackColor"]],
["grpPara", "Paragraph", ["Paragraph", "Indent", "Outdent",
"LTR", "RTL", "BRK", "JustifyLeft", "JustifyCenter",
"JustifyRight","JustifyFull", "Numbering",
"Bullets"]],
["grpPage", "Page & View", ["Save", "Print", "Preview", "BRK",
"FullScreen", "XHTMLSource"]],
["grpObjects", "Objects", ["Image", "Flash","Media", "CustomObject",
"BRK","CustomTag", "Characters", "Line", "Form"]],
["grpLinks", "Links", ["Hyperlink","InternalLink", "BRK", "Bookmark"]],
["grpTables", "Tables", ["Table", "BRK", "Guidelines"]],
["grpStyles", "Styles", ["StyleAndFormatting", "Styles", "BRK", "Absolute"]],
["grpCustom", "Custom", ["CustomName1","CustomName2", "BRK","CustomName3"]]
];

</script>

The format of tabs property is

[
[Tab 1 id, Tab name, [List of groups id]],
[Tab 2 id, Tab name, [List of groups id]],
[Tab n id, Tab name, [List of groups id]]
]

The format of groups property is

[
[Group 1 id, Group name, [List of buttons]],
[Group 2 id, Group name, [List of buttons]],
[Group n id, Group name, [List of buttons]]
]

The result is shown below:

VI.4. Tag Selector Settings

You can move the Tag Selector at the top of the editing area (below the Editor toolbar) by setting the TagSelectorPosition property to "top". Below is an example:

<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.TagSelectorPosition="top";
oEdit1.REPLACE("txtContent");
</script>

The result is shown below:

To hide the Tag Selector, set useTagSelector property to false.

<script>
var oEdit1 = new InnovaEditor("oEdit1");
oEdit1.useTagSelector=false;
oEdit1.REPLACE("txtContent");
</script>