Saturday, April 27, 2019

How to enable image resizing inside contenteditable DIV (aka WYSIWYG editor) in Chrome?

When we put the image inside contenteditable DIV (aka WYSIWYG editor), IE allow resizing by default but Chrome does not. In fact, we can easily implement this features using pure Javascript. I compile DOM handling to mouse, mouseup and other event handler into a sample program.
Source code

GreenRed

3 comments:

  1. For anybody wondering, if you click on the image, you can't select the text as if it was "disabled". To prevent this, go to the editor.onmousemove function and change return false to return 0. Have a great day!

    (Here's a link if you ever want to know the "why" for returning false)

    https://www.w3docs.com/snippets/javascript/how-to-disable-text-selection-copy-cut-paste-and-right-click-on-a-web-page.html#how-to-disable-text-selection-with-javascript-8

    ReplyDelete

Image compression using C#

Sometimes, we need to compress the image files while maintaining the image quality. This can be achieved by the following C# implementation....