TWebrowser Copy from Word Document

Question

I have a TWebBrowser in edit mode and l am trying to allow a user to copy and paste text and images from a word document (or anywhere really) and paste in the web browser

I have been able to get the text to paste using the following code:

pvaIn := EmptyParam;
HtmlEditor.ExecWB(OLECMDID_PASTE, OLECMDEXECOPT_DODEFAULT, pvaIn);

HtmlEditor is my TWebBrowser component

My issue is when a try and paste an image the web browser seems to know that l pasted an image, but it just displays a editable text box.

Is there a way to paste an image into a TWebBrowser?

Answer 1

The solution here was to save the bitmap to disk and then create a image html image and attach it to the HTML at the cursor position.

if clipboard.hasformat(cf_bitmap) then //only if the clipboard currently has a image
begin
    bmp := TBitMap.Create();
    CreateGuid(uid);
    try
        filename := 'cb(' + System.Copy(guidToString(uid), 2, 8) + ').bmp'; //generate a unique filename
        path := ExtractFilePath(paramstr(0)) + filename;//the location where we will save it
        bmp.LoadFromClipboardFormat(cf_bitmap, clipboard.GetAsHandle(cf_bitmap), 0);
        bmp.SaveToFile(path); //save the clipboard image to disk

        Doc2 := nil;
        Doc2 := self.HtmlEditor.Document as IHTMLDocument2;

        if Doc2 = nil then
            exit;

        if Assigned(Doc2.Body) then
        begin
            Image := Doc2.createElement('img') as IHtmlDOMNode; //create the img element
            (Image as IHTMLImgElement).src := path; //set this to the path of the image we just saved

            if GetcaretPos(cursor) then //get the element at the cursor position
            begin
                ElementAtCursor := Doc2.elementFromPoint(cursor.X, cursor.Y);
                Html := '<img src="' + path + '"></img>'; //insert the image after this element
                ElementAtCursor.insertAdjacentHTML('AfterBegin', Html);
            end
            else
                (Doc2.Body as IHtmlDOMNode).appendChild(Image); //else just append to the body
        end;
        finally
            bmp.free();
        end;
end;

As you can see the first step is to check and see if the clipboard has a CF_BITMAP and if so we then save it to disk. We then create a img HTML element attach that filename to the src of the img. Finally we add the img to the HTML where the cursor is and if we cant get the cursor then we append to the the HTML body