In my last post, I showed how it’s not only possible, but also pretty dang easy to make a custom CKEditor plugin that can interact seamlessly with a module. While it worked pretty well in modern browsers, it completely bombed on older versions of Internet Explorer (surprise, surprise).

The main *problem* with older IE support is the use of a custom html tag (<fiddle>) to store the complex data type in CKEditor. Not only does CSS styling on this unknown element fail in <IE8, but it’s insertion into CKEditor also fails completely, presumably because of the old DOM implementation.

While annoying, this is hardly a deal killer. The choice to use a “fiddle” element was hardly required…I did it because I wanted to. However, in the spirit of backward-compatibility, I’ve updated the plugin to work with a plain-old <div>.

Without further ado, here are a relevant pieces that I’ve updated:

EntryHelper.cfm (The File Where the Insertion Occurs)

/*
 * Common method to prepare fiddles for insertion...and insert them
 * @inputs - collection of inputs
 */
 function prepareFiddle( inputs ) {
    ...
    // create double-mustache syntax
    html += '
<div id="cbjsfiddle">jsFiddle - {1}'.format( vals[0], vals[1], vals[2], vals[3], vals[4], vals[5], vals[6], vals[7], vals[8] ); // insert into editor sendEditorText ( html ); }</div>.format( vals[0], vals[1], vals[2], vals[3], vals[4], vals[5], vals[6], vals[7], vals[8] );
     // insert into editor
     sendEditorText ( html );
}

Changed <fiddle> to <div id=”cbjsfiddle”>. Big whoop.

jsFiddle.cfc (Interceptor)

function cb_onContentRendering( required any event, required struct interceptData ) {
// regex for fiddle tag syntax
   var regex = "<(div)\b([^>]*?)(cbjsfiddle)([^>]*?)>(.*?)</div>";
   ...
}

The previous version regex keyed on a “fiddle” tag. I simply changed it to check for a div with a particular id.

Plugin.js (The CKEditor Plugin)

CKEDITOR.plugins.add('cbjsFiddle',{
    init:function( editor ){
       ...
       // listener for right-click on  element (and only  element)
       editor.contextMenu.addListener( function( element ) {
           // Get to the closest  element that contains the selection.
           if( element.getAscendant( 'div', true ) && element.getId()=='cbjsfiddle' ) {
               ...
               return { jsFiddleItem: CKEDITOR.TRISTATE_OFF };
           }
       });
    }
});

Before, I did a check in getAscendant() for a “fiddle” element. Now, I simply check that it’s a “div” and has an id of “cbjsfiddle”.

Wrapping Up

So yeah, not terribly difficult to fix, and now this actually works in older versions of Internet Explorer. As always, I’d like to thank Microsoft for making more work for me. Ugh 🙂