Question

I need to add CSS classes to basically any element that the user selects or points to in CKEditor. For example if there is a table that contains an list, my element structure and elementspath might look like this under the cursor:

body > table > tbody > tr > td > ul > li

Out of those, the user needs to be able to somehow select or point to the table, tr, td, ul or li element. After the user selected / pointed to the element they want to add a class to they would get a dialog to choose a class.

How would I detect which element the user wants to point to?

I’m open to any and all suggestions, even if that means hacking the core. For example I would think that this is doable with elementspath having a context menu where I could click something like “properties” for the element and that would bring up a dialog where the user could choose a class, but I have no idea how or even if it is possible to add a context menu to elementspath!

In Firefox this kind of works out of the box in that when a user clicks an element in elementspath I can GetSelectedElement and it returns what the user has clicked, but it doesn’t work in IE/Chrome.

Answer 1

I kind hacked together a horrible but somewhat functional solution. In elementspath plugin.js I added

function onContextMenu(elementIndex, ev) {
    editor.focus();
    var element = editor._.elementsPath.list[elementIndex];
    editor.execCommand('elementspathContextmenuForElement', ev, element);
}
var onContextMenuHanlder = CKEDITOR.tools.addFunction(onContextMenu);

And then where the elementspath item html is generated I added:

oncontextmenu="return CKEDITOR.tools.callFunction(', onContextMenuHanlder, ',', index, ', event );"

And then I made a plugin that creates a html “context menu”

CKEDITOR.plugins.add('elementspathcontextmenu', {
    init: function (editor) {
        editor.addCommand('elementspathContextmenuForElement', {
            exec: function (editor, event, element) {
                debug(element);
                var tempX = event.pageX + 'px';
                var tempY = event.pageY + 'px';
                window.newdiv = document.createElement('div');
                window.newdiv.setAttribute('id', "tmpContextMenuDiv");
                window.newdiv.style.width = 300 + 'px';
                window.newdiv.style.height = 300 + 'px';
                window.newdiv.style.position = "absolute";
                window.newdiv.style.left = tempX;
                window.newdiv.style.top = tempY;
                window.newdiv.innerHTML = '<p><a href="#" onclick="return false;">Do something</a></p>';
                document.body.appendChild(window.newdiv);
            },
            canUndo: false    // No support for undo/redo
        });
    }
});

I feel a bit dirty hacking the core like that and creating a div element for the context menu in that way but it kind of works for me. This is by no means the final code but it gets the point across.