Using openwysiwyg with ajax - preventing overlap
Posted in Projects at 11:08PM on 02/21/2008

I ran into a fun little situation today when I started converting my TinyMCE wysiwyg fields over to OpenWYSIWYG.  In one of my projects, I use a lot of ajax that can load wysiwyg fields.  I can't really explain in too much detail how my structure works, but if you've used ajax and wysiwyg before, you've no doubt come across the annoying overlap bug.  I've tried everything... using z-index to push the editors above everything else, pushing everything else way below, etc., but none of those reliably worked.  So, I thought of a pretty easy solution that works perfectly with the structure I am using.

All of my areas were in divs that had proper ID values... so when my ajax loads, I can grab the parent ID and compare it against the other matching divs, then use CSS to hide the other divs.  This basically wipes the conflicting boxes off the screen and gives the editor just a nice clean editor.  When the user submits, the value is saved and the other boxes are brought back.  It's a pretty cool deal.

The OpenWYSIWYG people make it really easy to modify and the structure and flow of their script makes perfect sense.  I'm going to start modifying their popups to make them rails-friendly next.  Anyway, here are my initial modifications to do the div hiding/restoring:

1. Create a global variable that will hold our hidden divs.

hiddenBlocks = new Array();

2. On the generate_wysiwyg function, I added some code to collect the possibly conflicting divs:

thisBlockID = document.getElementById(textareaID).parentNode.parentNode.parentNode.id;
    area = document.getElementById('regions');
    nodes = area.childNodes;
    for (var i=0; i < nodes.length - 1; i++) {
        if (nodes[i].id) {
            cNodes = nodes[i].childNodes;
            for (var j=0; j < cNodes.length - 1; j++) {
                if (thisBlockID != cNodes[j].id) {
                    if (cNodes[j].id) {
                        hiddenBlocks.push(cNodes[j]);
                        cNodes[j].style.display = 'none';
                    }
                }
            }
        }
    }

3. On the updateTextArea function, I added a bit of code to show the hidden blocks and clear the hiddenBlocks array.

for (var x = 0; x < hiddenBlocks.length - 1; x++) {
hiddenBlocks[x].style.display = 'block';
}
hiddenBlocks = new Array(); 
I'm pretty excited about switching to this editor... It seems much more predictable and extendable than the others I've used.
Comments
(will not be displayed)
skippidydoo