Home CSS Editor Reports Office Code Gallery Download Order Contacts

HTML Editor Library - WYSIWYG HTML Editor for Delphi

Note: This document has been entirely created using the HTML Editor demo application.
Yes, it is real (and currently the only one) WYSIWYG and 100% native HTML editor written in Delphi.

Basic features

Download Trial for Delphi 7 - Delphi 12 Athens

Getting started

To start using the editor simply drop a THtmlEditor component on a form and set its HTML:TStrings property or call Editor.HTML.LoadfromFile function in code.

Don't leave HTML blank, at least <p>&nbsp;</p> code is required.

THtmlEditor is ready to use and most of it's function are accessible via keyboard (f.e. Ctrl+B for bold).

Using Editor commands

All basic commands are accessible via actions. Place an ActionList on the form and use the New standard action command to add actions from the HtmlEdit group.

The available pre-defined actions are:

    THtActionNew - new document
    THtFileOpen,- open file.
    THtFileSaveAs,- save file as.
    THtActionCopy - copy to clipboard
    THtActionPaste -paste from clipboard.
    THtActionPasteImage - paste image from clipboard.
    THtActionUndo - Undo.
    THtActionFontBold - set font bold.
    THtActionFontItalic - set font italic.
    THtActionFontUnderline - set font underline.
    THtActionFontStrikeout - set font strikeout.
    THtActionSubscript - subscript.
    THtActionSuperscript - superscript.
    THtActionAlignLeft - set paragraph alignment to left.
    THtActionAlignRight - set paragraph alignment to right.
    THtActionAlignCenter - set paragraph alignment to center.
    THtActionUnorderedList - convert selection to unordered list.
    THtActionOrderedList - - convert selection to ordered list.
    THtActionIncreaseIndent - increase block or list indent.
    THtActionDecreaseIndent - decrease block or list indent.
    THtActionAddUrl - convert selection to URL (link).
    THtActionSetHeader- convert current block to header (header level are defined by ActionComponent tag).
    THtActionMarkdownHighlight - perform Markdown conversion on selection
    THtActionPascalHighlight - highlight selection as Pascal code
    THtActionHTMLHighlight - highlight selection as HTML code

To control font name and size use THtFontCombo and THtFontSizeCombo components. Just place them on toolbar and set Editor property if there is more than one THtmlEditor component on form.

Basic Editor properties:

Doc: THtDocument
Current document object (see HTML Component Library documentation)
Caret: THtCaret
Current caret positon and state
TextStyle: THtTextStyle
Current text styles (at caret)
OffsetX, OffsetY: integer
Offset (in screen pixels) of document (equal to negative scrollbars positions)    
DesignerElement: TElement
Highligted block element containing caret.
Scale: integer
Current document scale in percent.  Default =100 (%)
History: THtEditorStateStack;
Undo history

Spellchecking

To use Addict library enable $DEFINE ADDICT in \VCL\htmlinc.inc before installing the package.

Add TAddictSpell component on the form and set THtmlEditor.AddictSpell property. 

To use another spellchecking library you will need to write handlers for the OnSpellCheck and OnWordCorrection events.

You can enable/disable live spellchecking and autocorrection by using the Spellchecking and WordCorrection properties.

Text style functions

Many text style functions are accessible via the THtmlEditor.TextStyle class.

It has the following properties

  property Bold: boolean;
  property Italic: boolean;
  property Underline: boolean;
  property StrikeOut: boolean;
  property Subscript: boolean;
  property SuperScript: boolean;
  property FontName: string;
  property FontSize: integer;
  property Color: cardinal;
  property BGColor: cardinal;
  property TextTransform: TCSSTextTransform;
  property Alignment: THAlignment;

Changing these properties will change style of current selection, or current word at cursor  (if nothing is selected) or style of subsequent text entered by user. 

Changing document scale

THtmlEditor has a dedicated property to make it simple to alter the scale of the document. Simply alter THtmlEditor.Scale and the document and its contents will be fully rescaled. 

For examaple, place TTrackBar on form, set its Position to 100 and Min/Max  to 50-200.

Add TrackBar.OnChange handler:

procedure TForm1.TrackBar1Change(Sender: tobject);
begin
  E.Scale:=TrackBar1.Position
end;

Enabling Unicode for non-Unicode Delphi

To use Unicode in old Delphi you should have TntUnicode library installed.

Open /VCL/htmlinc.inc file, uncomment $WIDESTRINGS define and recompile library package.

Adding images to document

To add image to document use

function AddImageAtCursor(const Url: string; AWidth: integer=0; AHeight: integer=0; const Align: string=''): TImageElement;

To set image alignment use Align parameter - set it to 'right' or 'left'.

To embed image to document use

 function AddImageAtCursor(const ImageData: TBytes; Url: string=''): TImageElement;

Working with Lists 

procedure SetListStyle(const ListStyle: string);

Convert the current block to a list. Set ListStyle to ul for unordered list or ol for ordered list. 

procedure UnListSelection(const NewTag: string='p');

Convert the current list to paragraph.

procedure IncreaseIdent;

 Increase the indent of the current list item (create sublist)

procedure DecreaseIdent;

Decrease the indent of the current list item or remove the list style.

Caret moving

There is a comprehensive suite of methods for managing caret movement and positioning: 

   procedure CaretStart;
   procedure CaretEnd;
   procedure CaretLineStart;
   procedure CaretLineEnd;
   function  CaretNext: boolean;
   function  CaretPrevious: boolean;
   procedure CaretNextWord;
   procedure CaretPreviousWord;
   procedure CaretNextCell;
   procedure CaretPreviousCell;
   procedure CaretFirstCell;
   procedure CaretLastCell;
   function  CaretDown: boolean;
   function  CaretUp: boolean;
   procedure CaretPageUp;
   procedure CaretPageDown;
   procedure CarettoStartof(E: TElement);
   procedure CarettoEndof(E: TElement);
   procedure CaretParaStart;
   procedure CaretParaEnd;

Adding objects to document

There are functions and procedures to add various types of objects into the current document. 

procedure AddChar(Key: char);

Add one char at caret position.

procedure AddString(const Str: hstring);

Add string at caret position.

procedure AddHTMLAtCursor(const HTML: hstring);

Add HTML at caret position. If HTML contains block elements current block element will be split.

function  AddPara: TElement;

Add paragraph at caret position.

function  AddHR: TElement;

Add horizontal divider at caret position.

function  AddLineBreak(AddAfter: TElement=nil): TElement;  

Add line break at cursor or after AddAfter element.

function  AddImageAtCursor(const ImageData: TBytes; Url: string=''): TImageElement;

Add embedded image at caret position.

function AddImageAtCursor(const Url: string; AWidth: integer=0; AHeight: integer=0; const 
Align: string=''): TImageElement;

Add image and set its alignment (left/right)

Selection

procedure SelectWordAtCursor;

Select word at caret position.

procedure DeleteSelection(DeleteEmptyElements: boolean=true);

Delete selection. DeleteEmptyElements=true means that empty block or inline element in selection will be deleted.

procedure TagSelection(const Tag: string; attributes: string='');

Wrap selected elements by tag. Additional attributes could be added to tag.

procedure UntagSelection(const Tag: string; constattributes: string='');

Remove parent tag from selected elements.

procedure Current.SelectPara;

Select paragraph at caret position.

Caret context   

function  CharAtCursor: char;
function  WordAtCursor: hstring;

Get the character/word at caret position.

function  CurrentIsText: boolean;

Check if the current element is a text element.

function  CurrentText: TTextElement;  

Get the current text element.

Keyboard shortcuts

Ctrl+Left/Right
Next/Previous word
Ctrl+Up/Down
Paragraph start/End or Next/Previous
Ctrl+Home/End
Start/End of document
Ctrl+Alt+1..5
Header 1..5
Ctrl+1, 2, 5
Line spacing 1, 2, 1.5
Ctrl+Shift+A
Upper case
Ctrl+Shift+K
Lower case
Ctrl+B
Bold
Ctrl+I
Italic
Ctrl+U
Underline
Ctrl+E
Center alignment
Ctrl+L
Left alignment
Ctrl+R
Right alignment
Ctrl+C/Ctrl+Ins
Copy to clipboard
Ctrl+V/Shift+Ins
Paste from clipboard
Ctrl+Z
Undo
Ctrl+M
Increase indent
Ctrl+Shift+M
Decrease indent
Ctrl+Alt+C
©
Ctrl+Alt+R
®
Ctrl+Alt+T
™
Ctrl+Alt+-
—
Ctrl+-
–
Ctrl+Shift++
Superscript
Ctrl++
Subscript 
Shift+Enter
Soft line-break
 

Tag Navigator component

Tag navigator component is used to show path to current element (from document root) and highlight block element in document. Simply place it on the form and set its width.

To highlight block in document simply hover mouse on block name.

 

Autoreplace

Following sequences will be replaced