Delphi - How do I make a WYSIWYG HTML editor using Delphi?

Question

HOW do I make an 'easy' to use WYSIWYG interface to make HTML files? I.E. A HTML Editor. Specifically to create formatted email messages, with images, hyperlinks, Font formatting, bullets, indenting, etc...

Note [jd]: this is a self-answered question intended to be a pointer for others.

The component referred to in the answer has been moved to a new address - found it, and have updated the answer... — HeartWare, Jun 21 '14 at 14:55
Embarcadero has their own web editor based on TWebBrowser. But it has issues: http://stackoverflow.com/questions/39594393/twebbrowser-crashes-with-most-html-files — Gabriel, Sep 20 '16 at 13:55
This is a valid question (closed for wrong reason) with a super useful answer. Voting for reopening. — Gabriel, Feb 08 '17 at 15:03

score 8 · Answer 1 · edited Jun 21 '14 at 14:59

EmbeddedWB Web Browser Components from bsalsa.com offer just the tools to do it.

Edit: bsalsa.com doesn't exist any more. New location: https://bitbucket.org/wpostma/tembeddedwb

You place a EmbeddedWB (Web Browser) control(window) to display HTML such as from a website. You then place a EditDesigner component on the form and link it to the EmbeddedWB control in the Object Inspector - Properties.

With the EditDesigner you can set the WebBrowser to edit mode and have some basic editing, such as inserting or removing text or setting some font properties. Not a full editor though.

Do not despair, this package is a complete wrapper to the MSHTML editor. A slight addition to the EditDesigner unit allows you full access to the MSHTML execCommand interface.

Original Code:

    procedure ExecCommand(Command: Widestring; ShowUI: Boolean; Value: Integer);
      begin
         if Assigned(FEmbeddedWB) then
             GetHTMLDoc2FromWB.execCommand(Command, showUI, Value);
      end;

You will see that this procedure in EditDesigner.pas only accepts and parses the Value as Integer to the HTMLDoc.execCommand. Which is all you need for some commands,usually only needing 0 as the value. But many commands need String information for the Value, such as changing Fontname. The HTMLDoc.execCommand will actually accept a Variant as Value, so I added another procedure to EditDesigner.pas, as follows, to give near full access to MSHTML editor, if you know the commands to send.

procedure TEditDesigner.ExecCommandEx(Command: Widestring; ShowUI: Boolean; Value: OleVariant);
   begin
      if Assigned(FEmbeddedWB) then
          GetHTMLDoc2FromWB.execCommand(Command, showUI, Value);
   end;

You access this procedure when you need to send a more advanced command to the editor. This will change Font Colour.

procedure TfrmComposer.actFontColourExecute(Sender: TObject);
  begin
    if dlgColorDialog.Execute then
       begin
          EditDesigner1.ExecCommandEx('foreColor',False,dlgColorDialog.Color);
       end;
    EditDesigner1.EmbeddedWB.SetFocus;
end;

This will change the Font...

procedure TfrmComposer.JvFontComboBoxChange(Sender: TObject);
begin
   EDewbMessageBody.ExecCommandEx('fontname',False,JvFontComboBox.FontName);
   EDewbMessageBody.EmbeddedWB.SetFocus;
end;

There is also an EditDesigner1.InsertHTML procedure that will allow you to insert whatever you want.

Happy Delphiin' ;)

Also available here https://sourceforge.net/projects/embeddedwb/ although the edition available on bitbucket.org seems to be newer. — Gabriel, Feb 08 '17 at 15:17
Note: You can do the same with TWebBrowser: (webBrowser.Document as IHTMLDocument2).execCommand('ForeColor', true, clred); — Gabriel, Mar 07 '17 at 09:41

Delphi - How do I make a WYSIWYG HTML editor using Delphi?

1 Answers1

Linked