Table of Contents

Configuring the toolbar

By default the editor shows a full formatting toolbar above the editing area. Read this chapter when you want to trim that toolbar to a focused set of actions, hide it entirely in favour of your own UI, or expose advanced actions such as the raw HTML code view. Tailoring the toolbar keeps the editor approachable — users see only the formatting that is relevant to your document type.

A trimmed TTMSFNCWXHTMLMemo toolbar showing only bold, italic and underline, the two list buttons, a link button, undo/redo, and the raw-HTML code-view button — the result of disabling the other button groups.

The capture above is a trimmed toolbar (the result of the snippet below); the full default toolbar is shown on the component overview.

Showing and hiding the toolbar

The toolbar is reached through the Toolbar property. Set Toolbar.Visible := False to remove it completely — useful for read-only views or when you supply your own toolbar. With Visible := True (the default) the toolbar appears above the editing area.

Button groups

The buttons are organized into four groups, exposed through Toolbar.Buttons:

Group Property Buttons
Font and character FontStyle BtFontName, BtFontSize, BtColor, BtBold, BtItalic, BtUnderline, BtStrikeThrough, BtClear
Paragraph Paragraph BtStyle, BtOList, BtUList, BtParagraph
Insert Insert BtPicture, BtLink, BtVideo, BtTable, BtHr
Miscellaneous Misc BtUndo, BtRedo, BtCodeView

Each button flag defaults to True except Misc.BtCodeView, which defaults to False. Set a flag to False to hide that button. The grouping is purely organizational — the buttons render in one continuous toolbar.

procedure TForm1.ConfigureToolbar;
begin
  { Wrap multiple changes so the editor re-initializes only once. }
  TMSFNCWXHTMLMemo1.BeginUpdate;
  try
    { Keep the toolbar, but trim it to a focused set of buttons.
      Button groups: FontStyle, Paragraph, Insert and Misc. }
    TMSFNCWXHTMLMemo1.Toolbar.Visible := True;

    { Font group: keep bold/italic/underline, drop the rest. }
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtBold          := True;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtItalic        := True;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtUnderline     := True;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtStrikeThrough := False;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtColor         := False;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtClear         := False;

    { Paragraph group: keep lists, drop the predefined-style picker. }
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Paragraph.BtStyle := False;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Paragraph.BtOList := True;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Paragraph.BtUList := True;

    { Insert group: allow links only. }
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Insert.BtLink    := True;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Insert.BtPicture := False;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Insert.BtVideo   := False;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Insert.BtTable   := False;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Insert.BtHr      := False;

    { Misc group: undo/redo on, raw HTML code-view button on. }
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Misc.BtUndo     := True;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Misc.BtRedo     := True;
    TMSFNCWXHTMLMemo1.Toolbar.Buttons.Misc.BtCodeView := True;
  finally
    TMSFNCWXHTMLMemo1.EndUpdate;
  end;
end;

Exposing the HTML code view

Misc.BtCodeView adds a button that toggles the raw HTML source view (the same action as the ToggleCodeview method). It is off by default; enable it for technical audiences who want to edit markup directly.

Pitfalls

  • Changing many button flags without batching. Each change can trigger a re-initialization of the embedded editor. Wrap a series of changes in BeginUpdate / EndUpdate so the editor rebuilds once.
  • Toolbar dropdowns not opening inside a panel. When the editor is hosted in a container that swallows click events (notably a TWebPanel in TMS WEB Core, or some modal hosts), the toolbar dropdowns may not appear. See Library location and deployment for the fix.

See also