Question

我需要将CSS类添加到用户在CKEditor中选择或指向的任何元素。例如，如果有一个包含列表的表，我的元素结构和elementspath在光标下可能如下所示：

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

其中，用户需要能够以某种方式选择或指向table，tr，td，ul或li元素。用户选择/指向他们想要添加类的元素后，他们会得到一个对话框来选择一个类。

我如何检测用户想要指向的元素？

我对所有建议持开放态度，即使这意味着攻击核心。例如，我认为这对于具有上下文菜单的elementspath是可行的，我可以点击元素的“属性”之类的东西，这会产生一个用户可以选择一个类的对话框，但我不知道如何甚至是如果可以向elementspath添加上下文菜单！

在Firefox中，这种开箱即用的方式是，当用户单击elementspath中的元素时，我可以GetSelectedElement并返回用户点击的内容，但它在IE / Chrome中不起作用。 / em>的

Answer 1

我把一个可怕但有些功能性的解决方案整合在一起。在elementspath plugin.js中我添加了

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

然后生成elementspath项html的地方我添加了：

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

然后我创建了一个创建html“上下文菜单”的插件

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
        });
    }
});

我感觉有点脏，像这样黑客攻击核心，并以这种方式为上下文菜单创建一个div元素，但它对我有用。这绝不是最终的代码，但它得到了重点。

如何在CKEditor中指向或选择包含内容的任意元素？

1 个答案: