Table of Contents

Toolbar

Connecting the toolbar

Drop a TTMSFNCRichEditorToolBar on the form and link it to the editor:

RichEditorToolBar1.RichEditor := RichEditor1;

The toolbar automatically reflects the formatting at the cursor and enables or disables its buttons as the user moves through the document.

Layout

Dock the toolbar above or below the editor:

RichEditorToolBar1.Align := alTop;
RichEditor1.Align := alClient;

On mobile, a floating toolbar or a bottom-docked toolbar tends to work better.

Customizing visible buttons

The toolbar exposes individual buttons for each formatting action. Set Visible to False on any button you do not need. For example, to hide the superscript and subscript buttons:

RichEditorToolBar1.ButtonSuperScript.Visible := False;
RichEditorToolBar1.ButtonSubScript.Visible := False;

Customizing the font name and size combo boxes

TTMSFNCRichEditorFormatToolBar exposes its font name and font size drop-downs through the FontNamePicker and FontSizePicker methods. Use them when the default list of installed system fonts or common point sizes does not match your application — for example, to restrict authors to a fixed brand font set, or to offer a custom list of sizes:

procedure TForm1.ConfigureFontCombos;
begin
  // FontNamePicker / FontSizePicker return the actual drop-down controls
  // the format toolbar uses to let the user pick a font name and size.
  RichEditorFormatToolBar1.FontNamePicker.Items.Clear;
  RichEditorFormatToolBar1.FontNamePicker.Items.Add('Arial');
  RichEditorFormatToolBar1.FontNamePicker.Items.Add('Calibri');
  RichEditorFormatToolBar1.FontNamePicker.Items.Add('Consolas');
  RichEditorFormatToolBar1.FontNamePicker.Editable := True;

  RichEditorFormatToolBar1.FontSizePicker.Items.Clear;
  RichEditorFormatToolBar1.FontSizePicker.Items.Add('8');
  RichEditorFormatToolBar1.FontSizePicker.Items.Add('10');
  RichEditorFormatToolBar1.FontSizePicker.Items.Add('12');
  RichEditorFormatToolBar1.FontSizePicker.Items.Add('18');
  RichEditorFormatToolBar1.FontSizePicker.Items.Add('24');

  // Read back the currently selected font at the cursor position
  ShowMessage('Current font: ' + RichEditorFormatToolBar1.FontNamePicker.SelectedFontName +
    ' / ' + RichEditorFormatToolBar1.FontSizePicker.SelectedFontSize.ToString);
end;

Both pickers expose Items (the string list shown in the drop-down), SelectedFontName / SelectedFontSize (the current value), and Editable (whether the user can type a custom value instead of picking from the list).

See also