WYSIWYG and Images

drag_n_drop_code.png
I recently posted about an HTML5 and JavaScript WYSIWYG editor that I had created using the contenteditable attribute along with contextmenus and dataset. This works well when working with text (and perhaps links), but is not very practical when it comes to images, which are pretty important to the Web, at least in an asthetic sense. I could have the perfect font chosen and a variety of text styles in my content, but there would always be something missing without images.

I could always add images before, but the process was rather involved. I could add an image via execCommand(), but it required that I had a link to the image already available. While this might not seem as though it would be much of an issue, there is really more complication than you would expect. First, if I were adding images that I would be stored on my server, I would need an easy way of putting them there so that there would be an image to load. Second, if I were to use an image from some external source, I would need to update my Content-Security-Policy to allow images from that source (I currently only allow local sources only).

It's still very much a work in progress, but I have found a way of adding images in a simple and natural way... Just drag them into the window and they are appened automatically. I have the functionality working, but would like to figure out a way of handling things a little bit better before writing about it in detail. A basic overview, hoever, is that I create a "dropzone" (description, not any special attribute or element) out of the entire page. When a file is dragged into the window and released, I use the FileReader API to read the contents of the file as a Data URI, which essentially means that the data of the image is stored where a pointer/link to the file would normally be. This increases the size of the page itself, but means that you do not need to download the image as an additional request, thereby decreasing the time it takes to completely load a page.

I'm not entirely satisfied with the results, however. The image does not exist outside of whatever it was added to, meaning I cannot reuse it and it is somewhat annoying to try to use the image elsewhere. Also, I cannot directly edit the image, meaning that I cannot crop it, which results in a lot of wasted bandwidth unless I do all of the optimizing prior to adding it (if I add a large image, it is used as a full resolution version of the image, regardless of the size it actually displays at). I would like to update my method to upload the image to my server when it is dropped in, and have the server save the image's data to a file instead, resizing as needed so that I can keep the process simple and not require any changes to the original image.

Screenshot of a section of JavaScript included, just to show the results. It kinda reminds me of that work by M.C. Escher where the hands are drawing each other because it is an image of the code used to create the image.
drawing-hands.jpg