You can show/hide toolbar buttons using 2 ways:
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. | 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:
|
StyleAndFormatting | (No Property) This button is enabled by default as well as the menu items:
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 |
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.
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>