Quill Editor image resize

Question

I am using ngx quill editor that enables use to paste image or add image via toolbar.My approach is am not using the bit 64, i upload the image to a server and returns to the input in my quill editor just URL if user upload an image. My issue now using quill-image-resize - npm that image cant be resized if I don't upload a new image to the server, issue is the plugin does not have an event after resizing image so can't re-upload.

Any better ways than my approach or should I just give up

If only i can add a handler just like the plugin quill drop and paste that has automatic handler i just need to add code. Thank for the help — buruguduys, Jan 18 '21 at 09:47

novice in DotNet · Answer 1 · 2021-01-18T11:37:22.423

0

Yes. Capturing the resize event is possible. Cursor style value is always reset to "text" from nw-se cursors when resize event ends. Also tag name should be "IMG" otherwise selection changing will be captured.

quill.on('scroll-optimize',function(s,t){
    if(s.length>0)
    {

      if(window.getComputedStyle(s[0].target).cursor=='text' && s[0].target.tagName=='IMG')
      {
          console.log('resize event occurred:'+':width:'+s[0].target.width+':height:'+s[0].target.height);
      }
    }
});

edited Jan 18 '21 at 11:37

answered Jan 18 '21 at 11:26

novice in DotNet

771
1
9
21

Cant see that event. where it does belong? – buruguduys Jan 19 '21 at 08:07
Found the event by logging quill. console.log ('quill=',quill);.btw quill is the instance variable. var quill=new Quill ($("#editor_ID"),{}); – novice in DotNet Jan 19 '21 at 08:20
The documentation does not have that event. https://quilljs.com/docs/api/#events Or I'm just doing it wrong. – buruguduys Jan 19 '21 at 08:27
exactly yep. I found 4 more events in Emitter.js – novice in DotNet Jan 19 '21 at 08:33
But the interface doesnt get scroll-optimize event. – buruguduys Jan 19 '21 at 08:39
this.editor.on('scroll-optimize',this.resizeHandler); it will just say no overload matches the call coz its not in the interface – buruguduys Jan 19 '21 at 08:40
scroll-optimize is quill event. Editor doesn't have that event. https://github.com/quilljs/quill/blob/develop/core/quill.js line no.443 Quill.events = Emitter.events; it might work for this.on('scroll-optimize',this.resizeHandler); – novice in DotNet Jan 19 '21 at 08:57

Quill Editor image resize

1 Answers1