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

Paste the image into contenteditable div

When we accept the user input data, user input text data most of the time. But for some application, users need to input image and website needs to persist them. With the support of FileReader and clipboardData of paste event, we can easily enable that direct image input. User can directly copy the images from the software like MS-Paint or Web Browser and paste it into our input control (contenteditable div in our scenario).

Sample Text Editor with Image copy-paste support

Show HTML source

SampleImage