HtmlMemo User Pastes An Image (Ctrl+v) - I Need To Catch The Image Insert and Add An "id" Tag (<img id="img2" ...) - How

[andyhill]

Image Insert (Ctrl+v) Produces <img src="data:image/png;base64,...

I Need To Catch The Image Insert And Add An id Tag To The Image Tag <img id="img2" src="data:image/png;base64,...

I Need This For Inventory Purposes (later passing and extracting), I need Each Image Tag <img To Have An id Tag.

The Only Event Fired Is "change" and all it does is give you the whole HtmlMemo contents, it does not distinguish one Image From Another Image.

if EventName = 'change' then begin
    s:= Params.Values['sender'];   // blank
    s:= Params.Values['newValue']; // new html memo source (cannot tell which is new image)
    s:= Params.Values['oldValue']; // old html memo source
    s:= Params.Values['eOpts'];    // blank
  end;

Farshad, please add this feature - thanks.
 

[erich.wanker]

take a look at:

 

https://codepen.io/netsi1964/pen/IoJbg

 

:-)

 

 

[andyhill]

Thank You Erich, the only issue I have with this implementation is that the user has to provide id/width/height etc. and I was trying to do this without the user having to interact with the pasted image (I want to automate it, img01, img02, img03...).

[andyhill]

It is totally impracticable to parse ALL of the HtmlMemo lines (via the change event) every time a key is pressed to look for unprocessed <img tags.

I tried to implement a KeyUp event but it never fires (not implemented ):-

procedure TfMain.HtmlMemoKeyUp(Sender: TObject; var Key: Word; Shift: TShiftState);
begin
  if ssCtrl in Shift then begin
    // 'V', 'v' 
    if ( (Key = 86) or (Key = 118) ) then begin
      // do my thing
    end;
  end;
end;

Farshad, Sherzod - please comment.
 

 

 

[Sherzod]

On 7/20/2020 at 8:12 AM, andyhill said:

Image Insert (Ctrl+v) Produces <img src="data:image/png;base64,...

I Need To Catch The Image Insert And Add An id Tag To The Image Tag <img id="img2" src="data:image/png;base64,...

I Need This For Inventory Purposes (later passing and extracting), I need Each Image Tag <img To Have An id Tag.

The Only Event Fired Is "change" and all it does is give you the whole HtmlMemo contents, it does not distinguish one Image From Another Image.

Hello Andy,

Please clarify the question again.

How do you want to insert the image, in what format, how!?

[andyhill]

Sherzod - Please, I have clearly explained I know how to insert an image (most formats) as inline code - never in question. I add to my inserted image <img tag these properties id, width and height without any problems.

The id helps me when my embedded image is double clicked from which I pop up a sizing window, adjust the image size and update the inline image code accordingly.

HTML5 allows direct pasting of an image into the HtmlMemo as inline code MINUS <img tag properties id, width and height, and the only notification we get is when your code executes a 'change' event passing ALL the memo html bytes which adds up to hundreds of thousands of bytes to process ON EVERY KEY PRESS - NOT PRACTICAL.

I want to be notified of such a Browser Image paste event so I can add the missing <img tag properties id, width and height.

None of this would be needed if your HtmlMemo had the functionality to handle the sizing of images.

 

[andyhill]

I have the Ctrl+v listening event working fine but when I try to add a Paste listening event I have a javascript issue, would someone be so kind and advise what I have done wrong please - thanks.

  // Catch Ctrl+V / Image Paste
  s:= 'initialize=function initialize(sender, eOpts) '+
      '{ '+

      '  sender.iframeEl.dom.contentDocument.body.addEventListener'+
      '  ( '+
      '    ''keydown'', function(e) '+
      '    { '+

      '      if( (e.ctrlKey && e.key === ''v'') || (e.ctrlKey && e.key === ''V'') ) '+
      '      { '+
      '        alert(''Key''); '+
      '      } '+

      '    } '+
      '  ), '+

      '  sender.iframeEl.dom.contentDocument.body.addEventListener'+
      '  ( '+
      '    ''onPaste'', function(e) '+
      '    { '+
      '      var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i; '+
      '      var items = e.clipboardData.items; '+
      '      for (var i = 0; i < items.length; i++) '+
      '      { '+
      '        if (IMAGE_MIME_REGEX.test(items[i].type)) '+
      '        { '+
      '          alert(''Img''); '+
      '        } '+
      '      else '+
      '      { '+
      '        // do nothing '+
      '      } '+
      '    } '+
      '  ) '+

      '  ; '+

      '} ';
  HtmlMemo.ClientEvents.ExtEvents.Add(s);

 

[andyhill]

OK, the obvious onPaste --> paste (old habits).

I have all events firing as expected HOWEVER I need help please in processing the oldData into newData, can someone please advise why this adjusted newData paste does not work - thanks in advance.

 

  HtmlMemo.ClientEvents.ExtEvents.Clear;

  // initialize
  s:= 'initialize=function initialize(sender, eOpts) '+
      '{ '+

      // dblclick
      '  sender.getDoc().addEventListener(''dblclick'', function() '+
      '  { '+
      '    if (arguments[0].target && arguments[0].target.tagName.toLowerCase()==''img'') '+
      '    { '+
      '      ajaxRequest(sender, ''_img_'', ["id="+arguments[0].target.getAttribute(''id'')]); '+
      '    } '+
      '    if (arguments[0].target && arguments[0].target.tagName.toLowerCase()==''td'') '+
      '    { '+
      '      ajaxRequest(sender, ''_table_'', ["id="+arguments[0].target.getAttribute(''id'')]); '+
      '    } '+
      '  }); '+

      // keydown
      '  sender.iframeEl.dom.contentDocument.body.addEventListener(''keydown'', function(e) '+
      '  { '+
      '    if( (e.ctrlKey && e.key === ''v'') || (e.ctrlKey && e.key === ''V'') ) '+
      '    { '+
      //'      alert(''Key''); '+
      '    } '+
      '  }); '+

      // paste
      '  sender.iframeEl.dom.contentDocument.body.addEventListener(''paste'', function(e) '+
      '  { '+
      '    var items = e.clipboardData.items; '+
      '    if(items.length === 1) '+
      '    { '+
      '      var str = items[0].type; '+
      '      if(str.indexOf("image") !== -1) '+
      '      { '+
      //'        alert(str); '+
      '        var oldData = e.clipboardData.getData(); '+
      '        var len = length(oldData)-4; '+
      '        var index = oldData.indexOf("<img"); '+
      //       I need to scan oldData and insert id, width and height
      '        var newData = slice(oldData, 1, index+4) + '' id="img09" width="25" height="25" '' + slice(oldData, index+4, len); '+
      '        pasteClipboardData(newData); '+
      '        e.preventDefault(); '+
      '      } '+
      '    } '+
      '  }); '+

      '} ';
  HtmlMemo.ClientEvents.ExtEvents.Add(s);