Skip to main content
Table of Contents

Toolbar

Connecting the toolbar

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

Inline example 1PascalC++
RichEditorToolBar1.RichEditor := RichEditor1;

RichEditorToolBar1->RichEditor = RichEditor1;
Format and edit toolbars docked above a rich editor and bound to it Format and edit toolbars docked above a rich editor and bound to it

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:

Inline example 2PascalC++
RichEditorToolBar1.Align := TAlignLayout.Top;
RichEditor1.Align := TAlignLayout.Client;

RichEditorToolBar1->Align = TAlignLayout::Top;
RichEditor1->Align = TAlignLayout::Client;

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

Customizing visible buttons

TTMSFNCRichEditorFormatToolBar exposes its buttons through methods such as BoldButton, StrikeoutButton and HyperlinkButton. Set Visible to False on any button you do not need. For example, to hide the strikeout and hyperlink buttons:

Inline example 3PascalC++
RichEditorFormatToolBar1.StrikeoutButton.Visible := False;
RichEditorFormatToolBar1.HyperlinkButton.Visible := False;

RichEditorFormatToolBar1->StrikeoutButton->Visible = false;
RichEditorFormatToolBar1->HyperlinkButton->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:

Access the toolbar's font name and size combo boxesPascalC++
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;

void __fastcall TForm1::ConfigureFontCombos()
{
  // 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 +
    " / " + IntToStr((int)RichEditorFormatToolBar1->FontSizePicker()->SelectedFontSize));
}

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).

Combining toolbar features

The toolbar features work best together. Connecting the toolbar makes the buttons follow the caret, the layout decides where it sits, hiding buttons removes actions you do not want authors to use, and the font pickers limit the available fonts and sizes. Combine them when an application needs a controlled editing experience, such as a template editor where only a brand font set and a few formatting buttons are allowed. The sample connects a format toolbar, docks it above the editor, hides two buttons and fills both font pickers with a fixed list.

Combine connection, layout, visible buttons and font combosPascalC++
uses
  System.UITypes, FMX.Types, FMX.TMSFNCRichEditor, FMX.TMSFNCRichEditorToolBar;

procedure TForm1.SetupToolbarCombined;
begin
  // Connect and lay out
  RichEditorFormatToolBar1.RichEditor := RichEditor1;
  RichEditorFormatToolBar1.Align := TAlignLayout.Top;
  RichEditor1.Align := TAlignLayout.Client;

  // Hide buttons this application does not need
  RichEditorFormatToolBar1.StrikeoutButton.Visible := False;
  RichEditorFormatToolBar1.HyperlinkButton.Visible := False;

  // Restrict authors to a fixed set of fonts and sizes
  RichEditorFormatToolBar1.FontNamePicker.Items.Clear;
  RichEditorFormatToolBar1.FontNamePicker.Items.Add('Arial');
  RichEditorFormatToolBar1.FontNamePicker.Items.Add('Consolas');
  RichEditorFormatToolBar1.FontSizePicker.Items.Clear;
  RichEditorFormatToolBar1.FontSizePicker.Items.Add('10');
  RichEditorFormatToolBar1.FontSizePicker.Items.Add('12');
  RichEditorFormatToolBar1.FontSizePicker.Items.Add('18');
end;

void __fastcall TForm1::SetupToolbarCombined()
{
  // Connect and lay out
  RichEditorFormatToolBar1->RichEditor = RichEditor1;
  RichEditorFormatToolBar1->Align = TAlignLayout::Top;
  RichEditor1->Align = TAlignLayout::Client;

  // Hide buttons this application does not need
  RichEditorFormatToolBar1->StrikeoutButton()->Visible = false;
  RichEditorFormatToolBar1->HyperlinkButton()->Visible = false;

  // Restrict authors to a fixed set of fonts and sizes
  RichEditorFormatToolBar1->FontNamePicker()->Items->Clear();
  RichEditorFormatToolBar1->FontNamePicker()->Items->Add("Arial");
  RichEditorFormatToolBar1->FontNamePicker()->Items->Add("Consolas");
  RichEditorFormatToolBar1->FontSizePicker()->Items->Clear();
  RichEditorFormatToolBar1->FontSizePicker()->Items->Add("10");
  RichEditorFormatToolBar1->FontSizePicker()->Items->Add("12");
  RichEditorFormatToolBar1->FontSizePicker()->Items->Add("18");
}

See also