0

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

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

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

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

我愿意接受任何和所有建议，即使这意味着破解核心。例如，我认为这对于具有上下文菜单的 elementspath 是可行的，我可以在其中单击元素的“属性”之类的内容，然后会弹出一个对话框，用户可以在其中选择一个类，但我不知道如何甚至不知道如果可以将上下文菜单添加到元素路径！

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

4

1 回答 1

0

我拼凑了一个可怕但有点实用的解决方案。在 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);

然后在生成元素路径项 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
        });
    }
});

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.

于 2012-07-27T10:43:59.173 回答