Jump to content
Sign in to follow this  
lynkfs

wysiwyg

Recommended Posts

Was looking for an easy to make wysiwyg editor. This one is based on 'document.designMode'.

Mozilla: "When an HTML document has been switched to designMode, its document object exposes an execCommand method to run commands that manipulate the current editable region"

IFrame's have an innate document element which can be used for that purpose.

Have a form with an IFrameHtmlElement and 2 buttons ('bold' and 'italic') :

procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  W3IframeHtmlElement1.handle.contentDocument.designMode := 'on';
  W3IframeHtmlElement1.handle.contentDocument.body.innerHTML := 'this is some text';
  W3IframeHtmlElement1.handle.focus();
end;

procedure TForm1.W3Button1Click(Sender: TObject);   //bold
begin
  W3IframeHtmlElement1.handle.contentDocument.execCommand('bold', false, null);
  W3IframeHtmlElement1.handle.focus();
end;

procedure TForm1.W3Button2Click(Sender: TObject);   //italic
begin
  W3IframeHtmlElement1.handle.contentDocument.execCommand('italic', false, null);
  W3IframeHtmlElement1.handle.focus();
end;

Besides 'bold' and 'italic' execCommand supports a host of other edit commands as well.

see https://codepen.io/chrisdavidmills/full/gzYjag/

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...