Posts

Showing posts from October, 2011

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 perform…

openWYSIWYG with Dynamic Content

If you're trying to use openWYSIWYG with a textarea control that was dynamically added to your DOM via an Ajax call or other JS code, then you may be baffled as to why nothing happens.

That's because openWYSIWYG configures itself to initialize after the window.load event gets triggered. When using it dynamically however, the window.load event is long gone, so it'll just sit there waiting forever.

If using jQuery, the easy fix for this is to hack the wysiwyg.js source file and do the following replacements:

Line 357: WYSIWYG_Core.addEvent(window, "load", function generateEditor() {WYSIWYG._generate(id, settings);});Replace with: $(document).ready(function(){WYSIWYG._generate(id, settings);});
Line 360: WYSIWYG_Core.addEvent(window, "load", function generateEditor() {WYSIWYG.attachAll(settings);});Replace with: $(document).ready(function(){WYSIWYG.attachAll(settings);});
Line 391: WYSIWYG_Core.addEvent(window, "load", function displayIframe() {WYSI…

openWYSIWYG and jQuery conflict

openWYSIWYG is one of the only browser based rich-text editors that supports inline base64 encoded images, which is exactly what I was after. Unfortunately, openWYSIWYG and jQuery both use the $( function prefix, which causes a clash.

The hack is to open the wysiwyg.js file and do a search and replace converting "$(" to "ID(". I found this solution on nebulet.com, so fiull credits to the original author.