TTMSFNCWXHTMLMemo

The TTMSFNCWXHTMLMemo is a WYSIWYG HTML editor component. An optional embedded toolbar allows users to format text visually, or you can disable the toolbar and drive all formatting through the exposed methods. Content is loaded and saved as HTML. The component uses the Summernote JavaScript library.

Notice

With the default settings this component requires internet connection. If you'd like to run the component in an offline environment, please change the LibraryLocation property. Read more about this at the Loading modes paragraph of this documentation.

Loading HTML content

Using LoadHtmlContent

procedure TForm1.Button1Click(Sender: TObject);
begin
  TMSFNCWXHTMLMemo1.LoadHtmlContent('<h1>Hello</h1><p>World</p>');
end;

Using the HTML property (TStrings)

// Load from a file:
TMSFNCWXHTMLMemo1.HTML.LoadFromFile('path\to\file.html');

// Assign inline HTML:
TMSFNCWXHTMLMemo1.HTML.Text := '<b>Bold text</b>';

Saving HTML content

// Save to a file:
TMSFNCWXHTMLMemo1.HTML.SaveToFile('path\to\output.html');

// Or use the dedicated method:
TMSFNCWXHTMLMemo1.SaveAsHTMLFile('path\to\output.html');

// Get as plain text (read-only):
ShowMessage(TMSFNCWXHTMLMemo1.PlainText);

Programmatic formatting

All Summernote formatting commands are exposed as Pascal methods, allowing you to build fully custom toolbars or drive formatting from code without the built-in toolbar.

procedure TForm1.BoldButtonClick(Sender: TObject);
begin
  TMSFNCWXHTMLMemo1.TextBold;
end;

procedure TForm1.InsertListButtonClick(Sender: TObject);
begin
  TMSFNCWXHTMLMemo1.InsertList(True);  // True = ordered list
end;

procedure TForm1.SetFontButtonClick(Sender: TObject);
begin
  TMSFNCWXHTMLMemo1.SetFontName('Georgia');
  TMSFNCWXHTMLMemo1.SetFontSize(14);
end;

Toolbar configuration

The built-in toolbar is enabled by default. Disable it or selectively hide its buttons:

// Hide the entire toolbar:
TMSFNCWXHTMLMemo1.Toolbar.Visible := False;

// Or selectively hide toolbar buttons:
procedure TForm1.FormCreate(Sender: TObject);
begin
  TMSFNCWXHTMLMemo1.BeginUpdate;
  TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtBold        := False;
  TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtItalic      := False;
  TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtUnderline   := False;
  TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtStrikeThrough := False;
  TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtColor       := False;
  TMSFNCWXHTMLMemo1.Toolbar.Buttons.FontStyle.BtClear       := False;
  TMSFNCWXHTMLMemo1.EndUpdate;
end;

Custom fonts and font sizes

Add custom font names and sizes to the toolbar dropdowns:

TMSFNCWXHTMLMemo1.CustomFonts.Add('Inter');
TMSFNCWXHTMLMemo1.CustomFonts.Add('Roboto Mono');
TMSFNCWXHTMLMemo1.CustomFontSizes.Add('10');
TMSFNCWXHTMLMemo1.CustomFontSizes.Add('12');
TMSFNCWXHTMLMemo1.FontSizeUnit := 'pt';

Custom CSS

Inject additional CSS into the editor frame:

TMSFNCWXHTMLMemo1.CustomCSS :=
  'body { font-family: Arial; font-size: 14px; } ' +
  'p { margin: 0.5em 0; }';

TWebPanel event propagation issue

When TTMSFNCWXHTMLMemo is placed inside a TWebPanel, the toolbar dropdowns may not appear because TWebPanel captures click events before they reach the Summernote editor. Fix this with:

procedure TForm1.WebFormCreate(Sender: TObject);
begin
  // Option 1: Remove click from the stop-propagation set only:
  WebPanel1.EventStopPropagation := WebPanel1.EventStopPropagation - [eeClick];

  // Option 2: Enable full event propagation:
  // WebPanel1.EnablePropagation := True;
end;

Loading modes (LibraryLocation)

Most of the WX components offer the option to load the JavaScript library it depends on either online or offline. This option can be set via the LibraryLocation property. The available options means the following:

• llOnline: The JavaScript library will be loaded live from an external URL. This allows a faster loading of the library, decreasing the loading time of the component and providing a better performance. However, this option also requires an active internet connection.
• llOffline: The JavaScript library will be loaded from resources. This guarantees the component is going to work in offline mode, but performance can decrease, especially on less powerful devices.

When you are ready to deploy your application, consider the differences above and make a choice based on them.

Properties

Property	Type	Default	Description
AllowDrop	Boolean	True	Allows drag-and-drop of content into the editor.
CustomCSS	string	''	Additional CSS injected into the editor frame.
CustomFontSizes	TStrings	—	Additional font size options added to the toolbar dropdown.
CustomFonts	TStrings	—	Additional font name options added to the toolbar dropdown.
FontSizeUnit	string	'px'	Unit for font sizes: 'px', 'pt', 'em', etc.
HTML	TStrings	—	The HTML content of the editor. Assign or read to load/save content.
LibraryLocation	TTMSFNCWXLibraryLocation	llOnline	Controls how Summernote is loaded.
Modified	Boolean	—	Read-only. True if the content has been modified since last save.
PlainText	string	—	Read-only. The current content as plain text (no HTML tags).
ReadOnly	Boolean	False	Makes the editor read-only when True.
SpellCheck	Boolean	True	Enables browser spell checking in the editor.
Toolbar.Visible	Boolean	True	Shows or hides the built-in formatting toolbar.

Methods

Content

Method	Description
Clear	Clears all content in the editor.
LoadHtmlContent(AHTMLText: string)	Loads an HTML string into the editor.
LoadFromHTMLFile(AFileName: string)	Loads HTML from a file. Not available for WEB.
LoadFromHTMLStream(AStream: TStream)	Loads HTML from a stream.
PasteHTML(AHTML: string)	Pastes HTML at the current cursor position.
ResetContent	Resets the editor to an empty state.
SaveAsHTMLFile(AFileName: string)	Saves HTML content to a file.
SaveAsHTMLStream(AStream: TStream)	Saves HTML content to a stream.

Edit history

Method	Description
Undo	Undoes the last action.
Redo	Redoes the last undone action.
ToggleCodeview	Switches between WYSIWYG and raw HTML source view.

Font style

Method	Description
TextBold	Toggles bold on the selection.
TextItalic	Toggles italic on the selection.
TextUnderline	Toggles underline on the selection.
TextStrikeThrough	Toggles strikethrough on the selection.
RemoveFormat	Removes all formatting from the selection.
SetFontName(AFontName: string)	Sets the font family for the selection.
SetFontSize(AFontSize: Integer)	Sets the font size for the selection.

Paragraph and layout

Method	Description
FormatToParagraphs	Wraps the selection in paragraph elements.
Indent	Increases the indent level.
InsertList(AOrdered: Boolean)	Inserts a bulleted (False) or numbered (True) list.
InsertParagraph	Inserts a paragraph break at the cursor.
InsertText(AText: string)	Inserts plain text at the cursor position.
JustifyCenter	Centers the selected paragraph(s).
JustifyFull	Justifies the selected paragraph(s).
JustifyLeft	Left-aligns the selected paragraph(s).
JustifyRight	Right-aligns the selected paragraph(s).
Outdent	Decreases the indent level.
SetLineHeight(ALineHeight: Integer)	Sets the line height for the selection.

Update control

Method	Description
BeginUpdate	Suppresses UI updates. Call before making multiple property changes.
EndUpdate	Resumes UI updates after BeginUpdate.

Events

Event	Description
OnContentChange	Fires when the HTML content changes.
OnFocus	Fires when the editor receives focus.
OnInit	Fires when the Summernote editor has fully initialized.
OnStyleTextUpdate	Fires when the text style at the cursor changes (e.g. the user moves into bold text).