openWYSIWYG drag-drop embedded images in HTML rich-text editor

openWYSIWYG is a HTML based rich-text editor along the same lines as TinyMCE and FCKEditor with one significant added feature, drag-drop base64-encoded embedded image support.

I wasn't aware of this previously, but the HTML IMG tag supports having a base64 encoded string in the SRC attribute, which the browser then decodes and renders into an image.

This means you can be writing a document in the openWYSIWYG editor, switch to say Windows Explorer, grab an image and drop it into the editor. The image will automatically get converted to base64 encoding (client-side), and stored directly in the HTML source-code of the document you're editing. This means there's no need to upload the images separately and store them in a directory or DB on your web-server. The images are saved as part of the document itself, just like in a Word file.

This is a nice convenience feature for web-sites that require user-input which can include images. Convenience comes at the compromise of performance however. A base64 encoded image is about 4 times larger than a binary image, so for high-traffic sites, or for sites that contain lots of user submitted images on one page, this may not be ideal.

UPDATE: openWYSIWYG is not the only editor that supports this. CKEditor does it as well (and possibly many others), but only in Mozilla based browsers. CKEditor is actually very well documented and perhaps a lot more mature than openWYSIWYG. I'd suggest giving it a closer look.

Comments

  1. http://t1.gstatic.com/images?q=tbn:ANd9GcRYOoRdTtYXcJ_pgjvMrJVozsISiRyuVD2gc4ksxzJcpAFdOfnv

    ReplyDelete

Post a Comment

Popular posts from this blog

Wkhtmltopdf font and sizing issues

Import Google Contacts to Nokia PC Suite

Can't delete last blank page from Word