0

基本的に、ユーザーが CKEditor で選択またはポイントするすべての要素に CSS クラスを追加する必要があります。たとえば、リストを含むテーブルがある場合、要素構造と elementspath はカーソルの下で次のように表示されます。

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

これらのうち、ユーザーは何らかの方法で table、tr、td、ul、または li 要素を選択またはポイントできる必要があります。ユーザーがクラスを追加したい要素を選択/ポイントすると、クラスを選択するためのダイアログが表示されます。

ユーザーがポイントしたい要素をどのように検出しますか?

コアをハッキングすることを意味する場合でも、私はあらゆる提案を受け入れます。たとえば、これは、要素の「プロパティ」などをクリックできるコンテキストメニューを備えたelementspathで実行可能であり、ユーザーがクラスを選択できるダイアログが表示されると思いますが、方法や方法さえわかりません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);

そして、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 要素をそのように作成するのは少し汚い気がしますが、それは私にとってはうまくいきます。これは決して最終的なコードではありませんが、要点はわかります。

于 2012-07-27T10:43:59.173 に答える