Add a custom button to the built-in toolbar

What changed: adding a button is a code task now

Older legacy versions of the control let you click a toolbar on the Visual Studio design surface and drop a new ToolStripButton straight onto it. That is no longer how it works. In the current control the three toolbars -- Toolbar1, Toolbar2 and ToolbarFooter -- are populated by an internal factory when the editor loads, so any button placed on the design surface is not preserved. The supported, reliable way to add your own button is runtime code. If you have read an older version of this page that walked through the designer plus-icon menu, disregard it -- the steps below replace it.

The toolbars are real System.Windows.Forms.ToolStrip objects exposed as public properties, so you add standard ToolStripButton, ToolStripDropDownButton, ToolStripComboBox or ToolStripSeparator children with no special API.

Add a button in code (the supported way)

Create a ToolStripButton, give it an image and tooltip, attach a Click handler, and add it to Toolbar1.Items (or Toolbar2 / ToolbarFooter). Do this after the editor exists -- right after InitializeComponent() or in the form's Load event. Content.InsertHtml inserts at the caret, manages undo, and raises HtmlChanged.

C#

var btn = new ToolStripButton("Insert Template") { ToolTipText = "Insert offer letter template" };
btn.Click += (s, e) =>
    htmlEditor1.Content.InsertHtml("<h2>Offer of Employment</h2>", moveCaretAfterInsertedContent: true);
htmlEditor1.Toolbar1.Items.Add(btn);

VB.NET

Dim btn As New ToolStripButton("Insert Template")
AddHandler btn.Click, Sub(s, e) htmlEditor1.Content.InsertHtml("<h2>Offer of Employment</h2>", moveCaretAfterInsertedContent:=True)
htmlEditor1.Toolbar1.Items.Add(btn)

What you can do from the click handler

From your handler you have the editor's whole public surface, and you do not manage undo or dirty-tracking yourself:

• htmlEditor1.Content -- insert HTML at the caret, get/set the body HTML, open files, read the current document.
• htmlEditor1.Formatting -- bold, italic, font name/size, indent, lists, headings.
• htmlEditor1.Selection -- read or change the current selection.
• htmlEditor1.StateQuery -- ask whether the caret is inside a table, hyperlink, image, etc. (use it to enable/disable your button).

Design-time note

Configuring the editor at design time -- the Smart Tag, the Properties window, and why these differ between .NET Framework and modern .NET -- is covered in its own page so it stays in one place. See Design-time configuration: Smart Tag and the Properties window in the Start Up section. The short version: the Smart Tag does not add toolbar buttons; button creation is always the code shown above.

Quick answers