Delphi - How do I make a WYSIWYG HTML editor using

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.

Answer 1

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' ;)