HtmlMemo (containing inline image) Double Click Image

[andyhill]

Please show me how I can identify the InLine image that was selected when it was Double Clicked - Thanks.

procedure TfMain.HtmlMemoDblClick(Sender: TObject);
begin
  // Get Selected Object From Sender ?
end;
 

[Sherzod]

32 minutes ago, andyhill said:

how I can identify the InLine image that was selected when it was Double Clicked

Maybe something like this?:

function initialize(sender, eOpts)
{
    sender.getDoc().addEventListener('dblclick', function(){
        if (arguments[0].target && arguments[0].target.tagName.toLowerCase()=='img') {
            alert(arguments[0].target.getAttribute('id')); //ajaxRequest
        }
    });
}

 

[andyhill]

  HtmlMemo.ClientEvents.ExtEvents.Clear;
  s:= 'initialize=function initialize(sender, eOpts) '+
      '{ '+
      '  sender.getDoc().addEventListener(''dblclick'', function() '+
      '  { '+
      '    if (arguments[0].target && arguments[0].target.tagName.toLowerCase()==''img'') '+
      '    { '+
      '      alert(arguments[0].target.getAttribute(''id'')); '+
      '    } '+
      '  }); '+
      '} ';
  HtmlMemo.ClientEvents.ExtEvents.Add(s);
  //
  Alert event fires: 'id' Always shows null
  'dblclick' event fires: 'id' Always shows ''

////////////////////////////////////////////////////////////////////////////////////////////////////

  HtmlMemo.ClientEvents.ExtEvents.Clear;
  s:= 'initialize=function initialize(sender, eOpts) '+
      '{ '+
      '  sender.getDoc().addEventListener(''dblclick'', function() '+
      '  { '+
      '    if (arguments[0].target && arguments[0].target.tagName.toLowerCase()==''img'') '+
      '    { '+
      '      ajaxRequest(sender, ''_img_'', ["id="+arguments[0].target.getAttribute(''id'')]); '+
      '    } '+
      '  }); '+
      '} ';
  HtmlMemo.ClientEvents.ExtEvents.Add(s);
  //
 'dblclick' event fires: 'id' Always shows ''
  '_img_' event fires, 'id' Always shows ''

 

Please advise ?

 

 

[Sherzod]

4 minutes ago, andyhill said:

Alert event fires: 'id' Always shows null

<img id="img1">.....

[andyhill]

[Sherzod]

6 minutes ago, Sherzod said:

<img id="img1">.....

?

[andyhill]

Yes, works in _img_ event but not in dblclick event but I now understand why - thank you.

Also can you resolve inline issue mentioned earlier.

In addition if you drag an image inside HtmlMemo it disappears ???

 

 

[Sherzod]

44 minutes ago, andyhill said:

Also can you resolve inline issue mentioned earlier.

Can you please explain in more detail?

[andyhill]

Run this code:-

InlineData:= 
'<img id="img1" src="data:image/jpeg; charset=utf-8; base64, 
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
f1n8P//Z" alt="" width="100" height="50" style="display: block; margin-left: 4px; margin-top: 2px;">';

UniSession.AddJS(HtmlMemo.JSName + '.insertAtCursor('+ Chr(39)+InlineData+Chr(39) +')');
 

[andyhill]

Sherzod, Have you run this code and got errors like me, if so how do we fix ?

[Sherzod]

6 hours ago, andyhill said:

src="data:image/jpeg; charset=utf-8; base64," /9j/4AAQSkZJR....

it seems you have extra quotes after base64,"

[andyhill]

The actual data is wrapped by double quotes, if you take the complete tag string, turn it into a html file and execute it by the browser it all works.

[andyhill]

Please advise, script code in file attached - please run in browser.

Why does the same script not run in HtmlMemo ?

InlineData.html

[andyhill]

How many times must I ask, if it is a bug then acknowledge it please along with fix ETA, if it is my code then please explain why it works in browsers but not in your HtmlMemo ?

[Sherzod]

Please make a simple testcase for reproduce and to check. 

[andyhill]

HtmlMemo.zip

[Sherzod]

Ok thanks, 

I will check it now. 

[Sherzod]

4 hours ago, andyhill said:

How many times must I ask, if it is a bug then acknowledge it please along with fix ETA, if it is my code then please explain why it works in browsers but not in your HtmlMemo ?

This is not a bug.

You need use like this...

1. Add to uses list:

Uses ... ,ExtPascalUtils;

2. StrToJS

procedure TMainForm.UniButton1Click(Sender: TObject);
var
  MyList: TStringList;
  HtmlStr: String;
begin
  UniHTMLMemo1.Clear;
  UniSession.AddJS(UniHTMLMemo1.JSName + '.insertAtCursor('+ Chr(39)+'Before Image<br>'+Chr(39) +')');
  MyList:= TStringList.Create;
  try
    MyList.LoadFromFile(UniServerModule.StartPath+'\files\InlineData.html');
    HtmlStr:= StrToJS(MyList.Text);
  except

  end;
  MyList.Free;
  UniSession.AddJS(UniHTMLMemo1.JSName + '.insertAtCursor('+ HtmlStr +')');
end;

 

[Sherzod]

Or use like this:

procedure TMainForm.UniButton1Click(Sender: TObject);
var
  MyList: TStringList;
  HtmlStr: String;
begin
  UniHTMLMemo1.Clear;
  UniSession.AddJS(UniHTMLMemo1.JSName + '.insertAtCursor('+ Chr(39)+'Before Image<br>'+Chr(39) +')');
  MyList:= TStringList.Create;
  try
    MyList.LoadFromFile(UniServerModule.StartPath+'\files\InlineData.html');
    //HtmlStr:= StrToJS(MyList.Text);
    HtmlStr:= MyList.Text;
  except

  end;
  MyList.Free;
  //UniSession.AddJS(UniHTMLMemo1.JSName + '.insertAtCursor('+ HtmlStr +')');
  UniHTMLMemo1.JSInterface.JSCallDefer('insertAtCursor', [HtmlStr], 300);
end;

 

[andyhill]

Thank You Sherzod.

Feed back:-

First Option (StrToJS) only works in an empty paragraph

Second Option ([]) inserts between characters and empty paragraphs

Would you please explain why we have to deal with inline differently ?