I cannot believe how often this gets asked and the complete lack of information on the subject.
You can remove any control for the HTML Editor. The only catch is that you need to do it using JavaScript & jQuery.
In order to effectively remove or hide tools, you do need to know a little bit about their layout:
Replace "FIELD_NAME" with the name of your textarea. It's the same name that you would use in {grid.Object}.getValue('D','FIELD_NAME');
This is what's inside tools:
If you have no File/Image Insert buttons, then...
If you have File Insert but no Image Insert, then...
If you have Image Insert but no File Insert, then...
If you have both File Insert and Image Insert, then...
File Insert and Image Insert can be controlled in Alpha.
The HTML Editor is dynamically generated pretty much every time it's displayed. There are no reliable IDs that you can fall back on to get the individual tools. Thus, you must use jQuery Selectors to "get" individual tools:
There are 3 special cases for Controls: Style, Fonts, and Font Size. They have no title. So, instead, we have to use table and nth() to get each control. These selectors only work if none of these tools have been removed. Once you delete one of these 3 tools from the DOM, their lookup logic changes:
Spacers are another special case. They're accomplished using spans. Here's how you'd access each one before any of them are removed from the DOM:
Hiding --- this hides the tools but they're still in the DOM:
Deleting --- this completely removes these tools from the DOM:
After deleting spacers and any of Font Size, Fonts, or Styles, it changes the nth() property for other spacers. In the above, we delete spacer 10, 6, and 3. This is how you'd access the remaining spacers in the toolbar:
Lastly, here are two tips for deleting sets of controls:
Happy Scripting!
---
Sarah
You can remove any control for the HTML Editor. The only catch is that you need to do it using JavaScript & jQuery.
In order to effectively remove or hide tools, you do need to know a little bit about their layout:
Code:
var tools = jQuery('[id$="FIELD_NAME.TOOLBAR"]').children();
This is what's inside tools:
- tools[0] = Style
- tools[1] = Spacer1
- tools[2] = Font Face
- tools[3] = Spacer2
- tools[4] = Font Size
- tools[5] = Spacer3
- tools[6] = Bold
- tools[7] = Italic
- tools[8] = Underline
- tools[9] = Strikethrough
- tools[10] = Superscript
- tools[11] = Subscript
- tools[12] = Spacer4
- tools[13] = Font Color
- tools[14] = Highlight
- tools[15] = Background
- tools[16] = Spacer5
- tools[17] = Text Align Left
- tools[18] = Text Align Center
- tools[19] = Text Align Right
- tools[20] = Justified
- tools[21] = Spacer6
- tools[22] = Outdent
- tools[23] = Indent
- tools[24] = Spacer7
- tools[25] = Bullet List
- tools[26] = Numbered List
- tools[27] = Spacer8
- tools[28] = Insert Symbol
- tools[29] = Table
- tools[30] = Link
If you have no File/Image Insert buttons, then...
- tools[31] = Spacer9
- tools[32] = Clear Formatting
- tools[33] = Spacer10
- tools[34] = Toggle Code
If you have File Insert but no Image Insert, then...
- tools[31] = Insert File
- tools[32] = Spacer9
- tools[33] = Clear Formatting
- tools[34] = Spacer10
- tools[35] = Toggle Code
If you have Image Insert but no File Insert, then...
- tools[31] = Insert Image
- tools[32] = Spacer9
- tools[33] = Clear Formatting
- tools[34] = Spacer10
- tools[35] = Toggle Code
If you have both File Insert and Image Insert, then...
- tools[31] = Insert Image
- tools[32] = Insert File
- tools[33] = Spacer9
- tools[34] = Clear Formatting
- tools[35] = Spacer10
- tools[36] = Toggle Code
File Insert and Image Insert can be controlled in Alpha.
The HTML Editor is dynamically generated pretty much every time it's displayed. There are no reliable IDs that you can fall back on to get the individual tools. Thus, you must use jQuery Selectors to "get" individual tools:
Code:
var Bold = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Bold"]'); var Italic = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Italic"]'); var Underline = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Underline"]'); var Strikethrough = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Strikethrough"]'); var Superscript = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Superscript"]'); var Subscript = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Subscript"]'); var FontColor = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Font Color"]'); var Highlight = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Highlight Color"]'); var Background = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Background Color"]'); var TextAlignLeft = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Left"]'); var TextAlignCenter = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Center"]'); var TextAlignRight = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Right"]'); var Justified = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Justified"]'); var Outdent = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Outdent"]'); var Indent = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Indent"]'); var BulletList = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Unordered List"]'); var NumberedList = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Ordered List"]'); var InsertSymbol = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Insert Symbol"]'); var Table = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Table"]'); var Link = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Insert Link"]'); var ClearFormatting = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Clear Format"]'); var ToggleCode = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Toggle Code"]'); var InsertImage = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Insert Image"]'); var InsertFile = jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Insert File"]');
Code:
var Style = jQuery('[id$="FIELD_NAME.TOOLBAR"]>table:nth(0)'); var Fonts = jQuery('[id$="FIELD_NAME.TOOLBAR"]>table:nth(1)'); var FontSize = jQuery('[id$="FIELD_NAME.TOOLBAR"]>table:nth(2)');
Code:
var Spacer1 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(0)'); var Spacer2 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(1)'); var Spacer3 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(2)'); var Spacer4 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(3)'); var Spacer5 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(4)'); var Spacer6 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(5)'); var Spacer7 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(6)'); var Spacer8 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(7)'); var Spacer9 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(8)'); var Spacer10 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(9)');
Code:
//controls with titles: jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Insert Symbol"]').hide(); //Hide tools in the HTML Editor jQuery('[id$="FIELD_NAME.TOOLBAR"]>table:nth(0)').hide(); jQuery('[id$="FIELD_NAME.TOOLBAR"]>table:nth(2)').hide(); //Hide spacers in the HTML Editor jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(0)').hide(); jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(2)').hide();
Code:
// controls with titles: jQuery('[id$="FIELD_NAME.TOOLBAR"]>[title="Toggle Code"]').remove(); // Font Size & Styles, but not Fonts // Delete in descending nth order, less you want crazy bugs jQuery('[id$="FIELD_NAME.TOOLBAR"]>table:nth(2)').remove(); //deletes Font Size jQuery('[id$="FIELD_NAME.TOOLBAR"]>table:nth(0)').remove(); //deletes Styles // Individual Spacers // Delete in descending nth order, less you want crazy bugs jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(9)').remove(); //deletes spacer 10 jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(5)').remove(); //deletes spacer 6 jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(2)').remove(); //deletes spacer 3
Code:
var Spacer1 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(0)'); var Spacer2 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(1)'); [B]var Spacer4 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(2)');[/B] var Spacer5 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(3)'); [B]var Spacer7 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(4)');[/B] var Spacer8 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(5)'); var Spacer9 = jQuery('[id$="FIELD_NAME.TOOLBAR"]>span:nth(6)');
Code:
//Hide Styles, Fonts, and Font Sizes in one line: jQuery('[id$="FIELD_NAME.TOOLBAR"]>table').hide(); //Delete all the spacers: jQuery('[id$="FIELD_NAME.TOOLBAR"]>span').remove();
---
Sarah
Comment