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

By default, the editor is configured to use tab toolbar. To configure the editor to use traditional toolbar:

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

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:

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>



2008, INNOVA STUDIO (www.innovastudio.com). All rights reserved.