Summary How to configure various ToolbarButtons and ToolbarDropDownLists in FreeTextBox

Toolbar configuration

There are three ways to configure the FreeTextBox toolbar area

There are several ways to configure the FreeTextBox toolbar area

1. ToolbarLayout String

This property accepts a string of ToolbarItem names. Use commas ( , ) to separate items. A pipe ( | ) will insert a ToolbarSeparator and a semicolon ( ; ) will start a new Toolbar.

ToolbarLayout String

This property accepts a string of ToolbarItem names. Use commas (,) to separate items. A pipe (|) will insert a separator and a semicolon ( will start a new Toolbar.

The default way to configure toolbars is to use use the propery ToolbarLayout

 <html>
 <body>
   <form runat="server">
     <FTB:FreeTextBox id="FreeTextBox1"
       ToolbarLayout="paragraphmenu,fontsizesmenu;bold,italic,underline|
        bulletedlist,numberedlist"
       ToolbarLayout="paragraphmenu,fontsizesmenu;bold,italic,underline|bulletedlist,numberedlist"
       runat="Server" />
   </form>
 </body>
 </html>

Valid values for ToolbarButtons and ToolbarDropDownLists are

 ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu, 
 FontForeColorPicker, FontBackColorsMenu, FontBackColorPicker, Bold, Italic, Underline,
 Strikethrough, Superscript, Subscript, InsertImageFromGallery, CreateLink, Unlink, 
 RemoveFormat, JustifyLeft, JustifyRight, JustifyCenter, JustifyFull, BulletedList, 
 NumberedList, Indent, Outdent, Cut, Copy, Paste, Delete, Undo, Redo, Print, Save, 
 ieSpellCheck, StyleMenu, SymbolsMenu, InsertHtmlMenu, InsertRule, InsertDate, 
 InsertTime, WordClean, InsertImage, InsertTable, EditTable, InsertTableRowBefore, 
 InsertTableRowAfter, DeleteTableRow, InsertTableColumnBefore, InsertTableColumnAfter, 
 DeleteTableColumn, InsertForm, InsertForm, InsertTextBox, InsertTextArea, 
 InsertRadioButton, InsertCheckBox, InsertDropDownList, InsertButton, InsertDiv, 
 InsertImageFromGallery, Preview, SelectAll, EditStyle
 ParagraphMenu, FontFacesMenu, FontSizesMenu, FontForeColorsMenu, FontForeColorPicker, FontBackColorsMenu, FontBackColorPicker, Bold, Italic, Underline, Strikethrough, Superscript, Subscript, InsertImageFromGallery, CreateLink, Unlink, RemoveFormat, JustifyLeft, JustifyRight, JustifyCenter, JustifyFull, BulletedList, NumberedList, Indent, Outdent, Cut, Copy, Paste, Delete, Undo, Redo, Print, Save, ieSpellCheck, StyleMenu, SymbolsMenu, InsertHtmlMenu, InsertRule, InsertDate, InsertTime, WordCount

A pipe (|) will insert a ToolbarSeparator and a semicolon ( will start a new Toolbar.

The following values are only available in Pro versions of FreeTextBox (or if running on localhost)

 FontForeColorPicker, FontBackColorPicker, EditTable
 InsertTableRowAfter, DeleteTableRow, InsertTableColumnBefore, InsertTableColumnAfter, 
 DeleteTableColumn, InsertForm, InsertForm, InsertTextBox, InsertTextArea, 
 InsertRadioButton, InsertCheckBox, InsertDropDownList, InsertButton, InsertDiv, 
 Preview, SelectAll, EditStyle, WordClean

2. Procedurally

Procedurally

You can define which toolbar items appear by adding ToolbarItems in much the same way that one would add DataGrid Columns to a DataGrid. In order to do this, set AutoGenerateToolbarLayoutFromString=false:

 <html>
 <body>
    <form runat="server">
        <FTB:FreeTextBox id="FreeTextBox1" AutoGenerateToolbarsFromString="false" runat="server" >
            <Toolbars>
                <FTB:Toolbar runat="server">
                    <FTB:ParagraphMenu runat="server" />
                    <FTB:FontSizesMenu runat="server" />
                </FTB:Toolbar>
                <FTB:Toolbar runat="server">
                    <FTB:Bold runat="server" />
                    <FTB:Italic runat="server" />
                    <FTB:Underline runat="server" />
                    <FTB:ToolbarSeparator runat="server" />
                    <FTB:BulletedList runat="server" />
                    <FTB:NumberedList runat="server" />
                </FTB:Toolbar>
                <FTB:Toolbar runat="server">
                    <FTB:InsertHtmlMenu runat="server">
                        <Items>
                            <FTB:ToolbarListItem Text="Cool1" Value="<b>lalala</b>" runat="server" />
                            <FTB:ToolbarListItem Text="Cool2" Value="<i>lalala</i>" runat="server" />
                            <FTB:ToolbarListItem Text="Cool3" Value="<u>lalala</u>" runat="server" />
                        </Items>
                    </FTB:InsertHtmlMenu>
                    <FTB:StyleMenu runat="server">
                        <Items>
                            <FTB:ToolbarListItem Text="Highlighed" Value="<b>Highlighed</b>" runat="server" />
                            <FTB:ToolbarListItem Text="SmallCaps" Value="<i>smallcaps</i>" runat="server" />
                        </Items>
                    </FTB:StyleMenu>
                </FTB:Toolbar>
            </Toolbars>
        </FTB:FreeTextBox>
    </form>
 </body>
 </html>

3. Code (Page_Load or Code Behind)

Code (Page_Load or Code Behind)

ToolbarButtons and ToolbarDropDownLists can also be set through code. You should set the property AutoGenerateToolbarsFromString to false if you want only the ToolbarItems you define.

 <script runat="server">
 void Page_Load(object Src, EventArgs E) {
    Toolbar toolbar1 = new Toolbar();
    toolbar1.Items.Add(new ParagraphMenu());
    toolbar1.Items.Add(new FontSizesMenu());


    FreeTextBox1.Toolbars.Add(toolbar1);


    Toolbar toolbar2 = new Toolbar();
    toolbar2.Items.Add(new Bold());
    toolbar2.Items.Add(new Italic());
    toolbar2.Items.Add(new Underline());
    toolbar2.Items.Add(new ToolbarSeparator());
    toolbar2.Items.Add(new BulletedList());
    toolbar2.Items.Add(new NumberedList());


    FreeTextBox1.Toolbars.Add(toolbar2);


    Toolbar toolbar3 = new Toolbar();
    StyleMenu styleMenu = new StyleMenu();
    styleMenu.Items.Add(new ToolbarListItem("Highlight","Highlight"));
    styleMenu.Items.Add(new ToolbarListItem("SmallCaps","smallcaps"));


    toolbar3.Items.Add(styleMenu);


    FreeTextBox1.Toolbars.Add(toolbar3);
 }
 </script>
 <html>
 <body>
    <form runat="server">
        <FTB:FreeTextBox id="FreeTextBox1" AutoGenerateToolbarsFromString="false" runat="server" />
    </form>
 </body>
 </html>