2

HTML ドキュメントを表示し、ユーザーが注釈を付けられるようにするアプリケーションで Tinymce を使用しています。

いくつかのプラグインを作成し、独自のショートカットをそれに添付しました。また、太字、斜体、および下線用の独自のハンドラーを、tinymce JavaScript の割り当てをコメント アウトして独自に作成することで作成しました。

ただし、使用できないと思われるショートカットがいくつかあります。

addShortcut 呼び出しを使用しています。たとえば、CTRL-O は、どのようにオーバーライドしようとしても、標準のファイルを開くウィンドウを表示します。CTRL-SHIFT-O を割り当てることができ、問題なく動作します。

また、ブラウザーが更新に使用する CTRL-R などのショートカットの既定の動作をオーバーライドできるようにしたいと考えています。私たちの主なユーザーは、キーボード ショートカットの使用に非常に熱心で、誤って CTRL-R を押してページを更新し、保存されていない作業を失うのではないかと心配しています。

ブラウザに到達する前に CTRL-R をオーバーライドまたは傍受する方法はありますか?

ご協力いただきありがとうございます。

4

1 に答える 1

2

StackOverflow の別の投稿から、この問題を解決する方法を実際に見つけました。これにより、すべてのキーストロークを完全に制御でき、必要なショートカットを簡単にトラップできます。これにより、更新用の CTRL-R と開くための CTRL-O が正常にオーバーライドされました。サンプル コードにいくつかの変更を加えましたが、解決策を提供してくれた hims056 に大いに感謝します。彼の回答とその他の役立つ例は、次の場所にあります。

ブラウザのキーボード ショートカットのオーバーライド

以下は私のコードのバージョンです：

tinymce.init({
    selector: "textarea#elm1",
    theme: "modern",
    statusbar: false,
    width: "100%",
    height: "95%",
    plugins: ["print preview"],
    content_css: "css/content.css",

    ...

    setup: function(ed)
    {
        ed.on("keyup", function(e) {
        console.debug('Key up event: ' + e.keyCode);
            overrideKeyboardEvent(e);
        });

        ed.on("keydown", function( e) {
            console.debug('Key down event: ' + e.keyCode);
            overrideKeyboardEvent(e);
    });

<script type="text/javascript">

document.onkeydown = overrideKeyboardEvent;
document.onkeyup = overrideKeyboardEvent;
var keyIsDown = {};

function overrideKeyboardEvent(e){
  var returnVal = true; 

  switch(e.type){
    case "keydown":
      if(!keyIsDown[e.keyCode]){
        keyIsDown[e.keyCode] = true;
        // check if they selected ctrl-r which will refresh the screen
        if (keyIsDown[17])
        {
            switch (e.keyCode)
            {
            case 82:    // CTRL-R refreshes the screen!  Don't want to do that!
                 e.stopPropagation();
                 e.preventDefault();
                 returnVal = false; // false means don't propagate
                break;
            case 79:    // CTRL-O by default opens an open File Dialog.  
                 e.stopPropagation();
                 e.preventDefault();
                 returnVal = false; // false means don't propagate

                 // call openDocument
                 loadDocument(false);
                 break;
            case 68:    // CTRL-D by default opens up the Bookmark Editor in Chrome.  We want to start a comment!
                 e.stopPropagation();
                 e.preventDefault();    
             returnVal = false; // false means don't propagate  
             createComment();
             break;
        }

        }       
    }
    break;
    case "keyup":
       delete(keyIsDown[e.keyCode]);
       // do key up stuff here
       break;
    }

  return returnVal;
}

他の提案、改善、コメントなどをお待ちしています。

よろしく、

ロブ

于 2013-11-07T13:04:54.087 に答える