5

このコードを使用して、画像のクラスを変更するカスタム tinymce ボタンを作成します。セットアップブロックにあります。

ed.addButton('cust_setimgaspreview', {
        title : 'Set image as a preview image',
        image : 'ikony/previews.png',
        onclick : function() {
            if(ed.selection.getNode().tagName == 'IMG')
            {
                 ed.selection.getNode().className = 'preview';
            } else {
                alert('You need to select an image.');
            }
        }
    });

ご覧のとおり、「醜いアプローチ」を使用して、画像以外の要素のクラス変更を無効にしています。tinymce がデフォルトのボタン (画像の編集やリンクの編集など) を使用するのと同じ方法で、ボタンを無効/有効にするにはどうすればよいですか? どういうわけか選択の変更をキャッチし、選択に応じてボタンの状態を変更する必要があると思いますが、その方法がわかりません。

4

2 に答える 2

7

ちょうどそれを理解しました - それは非常に簡単です。セットアップ関数を編集し、「onNodeChange」ハンドラーを追加しました。

setup : function(ed) {

    ed.onNodeChange.add(function(ed, cm, node) {
        cm.setDisabled('cust_setimgaspreview', !(node.tagName == 'IMG'))
    });

    ed.addButton('cust_setimgaspreview', {
        title : 'Set image as a preview image',
        image : 'ikony/previews.png',
        onclick : function() {
            ed.selection.getNode().className = 'preview';
        }
    });

}
于 2012-07-31T17:19:32.067 に答える
0

コントロールマネージャが提供する機能を使用できます。

あなたはすなわちを使用することができます

        state = !state;
        ed.controlManager.setActive('my_button_id', state);
于 2012-07-30T10:57:50.883 に答える