Context menu for elementspath? (to add class to any element)

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

This is also a SO question

Thu, 07/26/2012 - 19:49

alfonsoml

Joined: 31/12/2006

Posts: 3735

Re: Context menu for elementspath? (to add class to any elem

Yes, a context menu on the elements path would be very useful in order to deal with some elements and apply common operations like changing classes, id, or removing them (if they are elements like span).

I know that some time ago I wrote about several improvements that could be done on that part, but I don't remember the details.

Fri, 07/27/2012 - 11:12

req

Joined: 13/03/2012

Posts: 76

Re: Context menu for elementspath? (to add class to any elem

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.