Version: 3.2.0.0
Replace the HTML TextArea element with an Ajax-enabled HTML-editing textbox.
Did You Know?
Did you know TextBox for ASP.NET supports advanced table editing?
TextBox for ASP.NET supports advanced table editing, including modifying table properties, modifying cell properties, inserting/removing rows, inserting/removing columns, and more.
Code Sample:
// Add a table button
HtmlBox1.AddToolbarItem(ToolbarItemType.InsertTable);
Back to Top
Did you know you can add your own custom images to the toolbar?
You can add custom images to the toolbar, enabling you to greatly enhance the aesthetic appeal of your editor, or to simply provide your own branding.
Code Sample:
// Change the properties of the HtmlBox so they look good with the "banner"
HtmlBox1.BackColor = System.Drawing.ColorTranslator.FromHtml("#04548F");
HtmlBox1.ButtonStyle.BackColor = Color.LightBlue;

// Create the new toolbar image
ToolbarImage img = new ToolbarImage(ToolbarImageType.Custom);
img.ImageName = "images/banner.jpg";

// Add it to the toolbar
HtmlBox1.Toolbar.Items.Insert(0, img);

// Put a break after the banner
ToolbarText txt = new ToolbarText(ToolbarTextType.Break);
HtmlBox1.Toolbar.Items.Insert(1, txt);
Back to Top
Did you know you can add your own custom text to the toolbar?
You can add custom text to the toolbar, enabling you to enhance your editor with editor instructions, branding, or user specific information.
Code Sample:
// Add custom text to the HtmlBox.
ToolbarText txt = new ToolbarText(ToolbarTextType.Custom);

// Simulate some data that could be retrieved from a db
txt.Text = "User: John Doe  |  Status: Logged In  |  User Level: Admin";

// Change the style of the text
txt.BackColor = Color.Red;
txt.ForeColor = Color.White;
txt.Font.Size = new FontUnit("9");
txt.Width = new Unit("600");

// Add it to the toolbar
HtmlBox1.Toolbar.Items.Insert(0, txt);

// Add a break after the text
HtmlBox1.Toolbar.Items.Insert(1, new ToolbarText(ToolbarTextType.Break));
Back to Top
Did you know you can apply several predefined skins (or create your own skin)?
PowerWEB TextBox for ASP.NET supports the ability to apply highly graphical skins to the editor, or to save the current configuration as a skin that can be loaded later. Several predefined skins are installed with the TextBox installation.
Code Sample:
// Load the skin
HtmlBox1.LoadSkin("C:\\temp\\myskin.xml");
Back to Top
Did you know you can change the background color/font of the text window?
You can easily change the appearance of the text window by setting properties of that object. Change the background color, font color, font face, etc.
Code Sample:
// Set properties of the text window
HtmlBox1.TextWindow.BackColor = Color.Yellow;
HtmlBox1.TextWindow.ForeColor = Color.Red;
HtmlBox1.TextWindow.Font.Name = "Impact";
Back to Top
Did you know you can choose from several different color palettes?
You can choose from several different color palettes (which define the colors the user is allowed to choose from by default when using color pickers and dialogs) depending on your needs. For example, switch to the Condensed color palette in scenarios where bandwidth conservation is important and default color choices are not.
Code Sample:
// Change to Condensed palette
HtmlBox1.ColorPaletteType = ColorPaletteType.Condensed;
Back to Top
Did you know you can create a button which displays a custom menu when clicked?
Use the ToolbarMenuButton object to create a button which launches complex menus. This mechanism is also used for the TextBox for ASP.NET right-click menu.
Code Sample:
// Create a custom menu button
ToolbarMenuButton b = new ToolbarMenuButton(ToolbarMenuButtonType.Custom);
      
// Add some new items to the menu
b.Menu.Items.Add(new HtmlBoxMenuItem("Make Bold", "bold.gif", "pwFormat('bold', '', true);"));
b.Menu.Items.Add(new HtmlBoxMenuItem("Make Italic", "italic.gif", "pwFormat('italic', '', true);"));
b.Menu.Items.Add(new HtmlBoxMenuItem("Make Underline", "underline.gif", "pwFormat('underline', '', true);"));
b.Menu.Items.Add(new HtmlBoxMenuItem("Show alert", "custom.gif", "alert('hello')"));
      
// Add the button to the toolbar
HtmlBox1.Toolbar.Items.Add(b);
Back to Top
Did you know you can create a custom button which displays a dialog with just a few lines of code?
Although DHTML dialog creation is quite complex and can involve hundreds of lines of JavaScript code, with PowerWEB TextBox for ASP.NET you can create a custom dialog with only a few lines of code. Just create a new custom ToolbarDialogButton, then set the ToolbarDialogButton.Dialog.Text property to whatever text you would like to display.
Code Sample:
// Create new dialog button
ToolbarDialogButton b = new ToolbarDialogButton(ToolbarDialogButtonType.Custom);

// Set button specific properties
b.ImageName = "images/custom.gif";
b.ToolTip = "my custom dialog button";

// Set dialog specific properties
b.Dialog.Text = "<h2>My dialog</h2><p>Hello, this is my dialog.</p>";
b.Dialog.Caption = "My Custom Dialog";
b.Dialog.Height = new Unit(150);
b.Dialog.Width = new Unit(250);

// Add to the toolbar
HtmlBox1.Toolbar.Items.Add(b);
Back to Top
Did you know you can customize the appearance of each individual button?
TextBox for ASP.NET has an extremely flexibly button style implementation. Use the high level HtmlBox.ButtonStyle object to set all buttons to be the same, or set the style of each button to be different.
Code Sample:
  foreach(BaseToolbarItem item in HtmlBox1.Toolbar.Items)
      {
         if(item is BaseToolbarButton)
         {
            // Get random RGB values
            Random rand = new Random();
            int R = rand.Next(255);
            int G = rand.Next(255);
            int B = rand.Next(255);

            // Convert to Color object and set
            item.BackColor = Color.FromArgb(R,G,B);

            // Put thread to sleep for a bit, otherwise the random values will be the same.
            System.Threading.Thread.Sleep(100);
         }
      }
Back to Top
Did you know you can customize the font name choices available to your users?
To customize the font names available to your end users (in the font-name drop down), simply add/remove strings from the HtmlBox.FontName collection.
Code Sample:
// First make sure you have added a FontName item (this is included in the default configuration,
// so typically you will not need this line of code.
HtmlBox1.AddToolbarItem(ToolbarItemType.FontName);

// Now clear out the default fonts and add new ones.
HtmlBox1.FontNameList.Clear();
HtmlBox1.FontNameList.Add("Courier");
HtmlBox1.FontNameList.Add("Times New Roman");
HtmlBox1.FontNameList.Add("Arial");
HtmlBox1.FontNameList.Add("Verdana");
HtmlBox1.FontNameList.Add("Comic Sans MS");
Back to Top
Did you know you can customize the font style choices available to your users?
With TextBox for ASP.NET, you can add a font style drop down which enables end-users to apply a style formatting to selected text. The style can either be defined by an external style sheet (I.e. "class='mystyle') or an inline style (I.e. "style='color:red;'").
Code Sample:
// First make sure you have added a FontStyle item
HtmlBox1.AddToolbarItem(ToolbarItemType.FontStyle);

// Now clear out the default font formatting types and add new ones.
HtmlBox1.FontStyleList.Clear();
HtmlBox1.FontStyleList.Add("My Style", "mystyle"); // Assume defined in external CSS
HtmlBox1.FontStyleList.Add("Red Bold", "color:red;font-weight:bold;");
HtmlBox1.FontStyleList.Add("ALL CAPS", "text-transform:uppercase;");
Back to Top
Did you know you can customize the special character choices available to your users?
To customize the special characters available to your end users (in the special character picker), simply add/remove strings from the HtmlBox.SpecialCharacters collection.
Code Sample:
// First make sure you have added a SpecialCharacter item (this is included in the default configuration,
// so typically you will not need this line of code.
HtmlBox1.AddToolbarItem(ToolbarItemType.SpecialCharacter);

// Now clear out the default special characters and add new ones.
HtmlBox1.SpecialCharacterList.Clear();
HtmlBox1.SpecialCharacterList.Add("&lt;"); // <
HtmlBox1.SpecialCharacterList.Add("&gt;"); // >
HtmlBox1.SpecialCharacterList.Add("&copy"); // ©
Back to Top
Did you know you can display a progress bar while the editor is loading?
Set the HtmlBox.ProgressBar.Display property to true to display a progressbar while the images of the editor are loading.
Code Sample:
// Enable the progressbar
HtmlBox1.ProgressBar.Display = true;

// Change the background color
HtmlBox1.ProgressBar.BackColor = Color.Red;

// Change the text
HtmlBox1.ProgressBar.Text = "Images loading…";
Back to Top
Did you know you can easily create a button which calls a custom script with just a few lines of code?
You can create a toolbar button which calls a custom script with only a few lines of code. Use the ToolbarButton.OnClickFunctionCode property to store your code block which is called so you don't have to worry about explicitly placing the code block within your ASPX file.
Code Sample:
// Create a custom button
ToolbarButton b = new ToolbarButton(ToolbarButtonType.Custom);

// Set the image name
b.ImageName = "custombutton.gif";

// Set the tooltip
b.ToolTip = "My Button";

// Set the function name.
b.OnClickFunctionName = "myFunc()";

// Set the code block that is actually called
b.OnClickFunctionCode = "function myFunc(){alert('blah');}";

// Add the button.
HtmlBox1.Toolbar.Items.Add(b);
Back to Top
Did you know you can easily create a custom dropdown to insert text with just a few lines of code?
To create a custom insert dropdown (a dropdown which inserts HTML when a particular item is chosen), simply create an insert type of ToolbarDropDown and add it to the toolbar.
Code Sample:
// Create a custom dropdown for inserting text
ToolbarDropDown d = new ToolbarDropDown(ToolbarDropDownType.Insert);
d.Title = "Custom Insert DropDown";
d.Width = new Unit(200);

// Add some items to be inserted
d.Items.Add(new ToolbarDropDownItem("Greeting", "To whom it may concern,
")); d.Items.Add(new ToolbarDropDownItem("Signature", "Best Regards,
")); d.Items.Add(new ToolbarDropDownItem("Date", DateTime.Now.ToShortDateString())); // Add the dropdown to the toolbar HtmlBox1.Toolbar.Items.Add(d);
Back to Top
Did you know you can easily create a custom dropdown with just a few lines of code?
You can easily create a custom dropdown to call your own custom scripts when clicked. Simply create a custom ToolbarDropDown object, customize the items contained on the dropdown, then add it to the toolbar
Code Sample:
// Create a custom dropdown for inserting text
ToolbarDropDown d = new ToolbarDropDown(ToolbarDropDownType.Custom);
d.Title = "Custom DropDown";
d.Width = new Unit(200);

// Add some items
d.Items.Add(new ToolbarDropDownItem("Alert 1", "alert1", "alert('you clicked item 1')"));
d.Items.Add(new ToolbarDropDownItem("Alert 2", "alert2", "alert('you clicked item 2')"));
d.Items.Add(new ToolbarDropDownItem("Alert 3", "alert3", "alert('you clicked item 3')"));
d.Items.Add(new ToolbarDropDownItem("Alert 4", "alert4", "alert('you clicked item 4')"));
d.Items.Add(new ToolbarDropDownItem("Alert 5", "alert5", "alert('you clicked item 5')"));
d.Items.Add(new ToolbarDropDownItem("Alert 6", "alert6", "alert('you clicked item 6')"));

// Add the dropdown to the toolbar
HtmlBox1.Toolbar.Items.Add(d);
Back to Top
Did you know you can highly customize the styles of buttons?
You can dramatically alter the look and feel of your toolbar buttons just by setting a few properties. For example, set the HtmlBox.ButtonStyle.BackColor property to change the default background color of the button. Set the HtmlBox.ButtonStyle.MouseOverBackColor property to change the color of the button when the mouse is over it, etc.
Code Sample:
// Clear the current button style
HtmlBox1.ButtonStyle.Clear();

// Set the standard width, style, and color.
HtmlBox1.ButtonStyle.BorderWidth = new Unit(2);
HtmlBox1.ButtonStyle.BorderStyle = BorderStyle.Solid;
HtmlBox1.ButtonStyle.BorderColor = HtmlBox1.BackColor; // Same as editor, so you don't see it.

// Set the mouse over effects
HtmlBox1.ButtonStyle.MouseOverBorderStyle = BorderStyle.Outset;
HtmlBox1.ButtonStyle.MouseOverBorderColor = Color.Gray;

// Set the mouse down effects
HtmlBox1.ButtonStyle.MouseDownBorderStyle = BorderStyle.Inset;
HtmlBox1.ButtonStyle.MouseDownBorderColor = Color.Gray;

// Set the mouse up effects
HtmlBox1.ButtonStyle.MouseUpBorderStyle = BorderStyle.Solid;
HtmlBox1.ButtonStyle.MouseUpBorderColor = HtmlBox1.BackColor;
Back to Top
Did you know you can highly customize the styles of dialogs?
You can easily customize the look and feel of all dialogs used by the editor at once by using the HtmlBox.DialogStyle property.
Code Sample:
// Change styles of all dialogs.
HtmlBox1.DialogStyle.TitlebarBackColor = Color.RoyalBlue;
HtmlBox1.DialogStyle.BackColor = Color.BlanchedAlmond;
Back to Top
Did you know you can highly customize the styles of menus?
You can easily customize the look and feel of all menus used by the editor at once (including the right-click menu) by using the HtmlBox.MenuStyle property.
Code Sample:
// Change styles of all menus used (this includes the right-click menu)
HtmlBox1.MenuStyle.ImageColumnColor = Color.Orange;
HtmlBox1.MenuStyle.BackColor = Color.Beige;
HtmlBox1.MenuStyle.BorderColor = Color.Blue;
HtmlBox1.MenuStyle.BorderStyle = BorderStyle.Dotted;
Back to Top
Did you know you can make the text window transparent?
Aside from the typical style options that can be applied to the text window (back color, fore color, border color, etc) you can also perform advanced operations such as making the text window transparent, or removing the IFRAME border from the text window. This can be used for some interesting effects and is especially useful for skin implementations, as our "Notepad" skin (which ships with the product) demonstrates.
Code Sample:
// Set the textwindow to be transparent
HtmlBox1.TextWindow.Transparent = true;

// Remove the border around the text window
HtmlBox1.TextWindow.ShowWindowBorder = false;
Back to Top
Did you know you can set a background image (such as a watermark) on the editor window?
You can easily set a watermark (or other background image) on the editing surface. Simply set HtmlBox.TextWindow.BackgroundImage to the name of the image you would like to use as a background image.
Code Sample:
// Set the background image for the textwindow.
HtmlBox1.TextWindow.BackgroundImageName = "images/watermark.jpg";
Back to Top