HtmlMemo: Pasted Image, ReSize Handles - How ?

[andyhill]

It is easy to paste images into the HtmlMemo however once inserted there is no way to resize the image, please advise how to apply stretch handles on image when selected with the editor so user can resize - Thanks

[Sherzod]

Hello @andyhill

This post may help you:

 

[andyhill]

Sherzod, this only adds image which I have no problem with.

I need (the component needs) the ability for the end user to select the already imbedded image and resize it.

[Sherzod]

5 minutes ago, andyhill said:

I need (the component needs) the ability for the end user to select the already imbedded image and resize it.

I need to check.

[andyhill]

I have played with all sorts of concepts (bypassing stretch handles for now using DblClick to investigate the selected pasted image [if one uses Ctrl+V to paste image there is no "id" added to the <img tag ???]):-

  MyJsName:= htm001.JSName;
  htm001.ClientEvents.ExtEvents.Clear;
  MyScript:= 'initialize=function initialize(sender, eOpts) '+
             '{ '+

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

             // Ctrl+V 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) '+
             '      { '+
             '        ajaxRequest('+MyJsName+', ''_PasteBefore_'', []); '+
             '      } '+
             '    } '+
             '    else '+ // More or Less than one object
             '    { '+
             '      e.preventDefault(); '+ // Kill Paste
             '    } '+
             '  }); '+

             // Create Image
             '  function createImage(source) '+
             '  { '+
             '    var pastedImage = new Image(); '+
             '    pastedImage.onload = function() '+
             '    { '+
                    // Need To Add "id" to image here - please show how to make "id" unique
             '    }; '+
             '    pastedImage.src = source; '+
             //'    alert(pastedImage.src); '+
             '  } '+

             '} ';
  htm001.ClientEvents.ExtEvents.Add(MyScript);
 

Sherzod, while you are investigating Stretch Handles, please show me how to add unique "id" to pasted image - Thanks

 

[Sherzod]

2 hours ago, andyhill said:

                    // Need To Add "id" to image here - please show how to make "id" unique

...
  var pastedImage = new Image();
  pastedImage.id = Ext.id();
...

 

[Sherzod]

And, please remind me how you insert this image into the editor after?

[andyhill]

OK, "id" now assigned.

How do I get the "width" and "height"

             // Ctrl+V 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) '+
             '      { '+
             '        ajaxRequest('+MyJsName+', ''_PasteBefore_'', []); '+ I WANT TO SEND "ID", "WIDTH" & "HEIGHT" in params here
             '      } '+
             '    } '+
             '    else '+ // More or Less than one
             '    { '+
             '      e.preventDefault(); '+ // Kill Paste
             '    } '+
             '  }); '+

             // Create Image
             '  function createImage(source) '+
             '  { '+
             '    var pastedImage = new Image(); '+
             '    pastedImage.onload = function() '+
             '    { '+
                    // Add Unique "id"
             '      pastedImage.id = Ext.id(); '+

            // DO I NEED WIDTH and HEIGHT attributes recorded with image here

             '    }; '+
             '    pastedImage.src = source; '+
             '  } '+
 

[Sherzod]

10 minutes ago, andyhill said:

// Ctrl+V 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) '+
             '      { '+
             '        ajaxRequest('+MyJsName+', ''_PasteBefore_'', []); '+ I WANT TO SEND "ID", "WIDTH" & "HEIGHT" in params here

Do you have a simple testcase for this?

[andyhill]

Using port 80

Your HtmlMemo Component fails to add necessary tags to inserted images:-

"id"

"width"

"height"

to name a few.

My primitive work around is attached, please paste an image (view source [tags missing]), DblClick inserted image again shows "id" missing.

Please advise how to resolve.

Ultimately all images in HtmlMemo need the function of grabbing and resizing buy the end user.

Project1.zip

[Sherzod]

Hello Andy, 

I will try to check.