Xinha – hidden editors do not initialise correctly

As most web developers will know, there’s a plethora of tools out there on the Web that can provide What You See Is What You Get (WYSIWYG) editing capabilities within web browsers.

My weapon of choice in this arena has always been Xinha – pronounced Xena (like the Warrior Princess) – mainly because the editor itself is very configurable and easily integrates into my custom Content Management platform.

I came across an issue this morning however, where having multiple instances of the Xinha editor on a single web page – with some of the instances initially hidden, caused problems. When the hidden editors were made visible, they didn’t work properly – they were frozen and did not respond to mouse or keyboard input.

The problem is due to browsers initialising the editors incorrectly when they’re hidden, so the workaround often posted is to only initialise visible editors to begin with, and then initialise others as and when needed. I’ve come up with a relatively painless implementation of this workaround. It uses jQuery, but only to check if the editors are visible or not.

If you have followed the “Newbie Guide” to setting up Xinha from their website, you should have a my_config.js file in your site. Open that file, and look for a line that starts with:

xinha_init = xinha_init ? xinha_init : function() {

Now, above this line copy and paste the following:

var xinha_editor_names = null;
Xinha.makeVisibleEditors = function(xinha_editors, xinha_config, xinha_plugins) {
	var visible_editors = [];
	for (var i in xinha_editors) {
		var editor_id = xinha_editors[i];
		if (typeof editor_id == "string") {
			if ($('#' + xinha_editors[i]).is(':visible')) {
	visible_editors.push(editor_id);
			}
		}
	}
	return Xinha.makeEditors(visible_editors, xinha_config, xinha_plugins);
}

function startVisibleXinhaEditors() {
	xinha_editors = Xinha.makeVisibleEditors(xinha_editor_names, xinha_config, xinha_plugins);
	Xinha.startEditors(xinha_editors);
}

Further down the file, you’ll see a line of code, in a section marked “STEP 4”, that looks like this:

xinha_editors = Xinha.makeEditors(xinha_editors, xinha_config, xinha_plugins);

Delete that line, and replace it with:

xinha_editor_names = xinha_editors;

Then, underneath this – in a section marked “STEP 5”, replace this line:

Xinha.startEditors(xinha_editors);

with this line:

startVisibleXinhaEditors();

What this does is loop through all of the editors you have specified, checks to see if it is visible and if it is, initialises it.

Making your hidden editors work is then simply a case of making a call to startVisibleXinhaEditors() when you show one of the hidden editors.