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

5 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
  2. A resizable image WYSIWYG editor for Chrome empowers effortless visual content creation. Best Utorrent VPN Leveraging HTML5/CSS features or JavaScript libraries like TinyMCE, users can intuitively edit and resize images within the browser.

    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....