JDBな人生  専門的なことから日常的なことまで~ まぁ自由きままに書いていきます。
2017年06月 / 05月<< 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>07月

アクセスランキング

[ジャンルランキング]
コンピュータ
385位
アクセスランキングを見る>>

[サブジャンルランキング]
プログラミング
50位
アクセスランキングを見る>>

CKEditorにCtrl + Sのショートカットキーを実装する

最近、テキストエディタとして、CKEditorというライブラリを導入しました。主要な機能を網羅しており、バージョンを選べばIE7にも対応しているという、なかなかの優れものです。
このCKEditorにはキーボードのコマンドを登録する機能があるので、ショートカットキーの動作を簡単にオーバーライドすることができます。Keyboardイベントを自力で書くのよりも楽です。

以下よりどうぞ。
more...

というわけで、Ctrl + Sのキーに対して、ショートカットキー(保存動作)を実装する方法はこちらです。

CKEDITOR.on("instanceReady", function(ev) {
    
    //対象編集エリアのインスタンスを指定
    var targetEditor = CKEDITOR.instances.your_editor_id || ev.editor;
    
    //編集エリアごとに処理を変えたい場合は必要に応じて判定
    //if (targetEditor == ev.editor) {
    
        //動作を"ctrSCommand"として定義する
        targetEditor.addCommand("ctrSCommand", {exec: function(editor, data) {
            //保存処理など
            
            //trueを返せばpreventDefaultが自動実行される
            return true;
        }});
        
        //定義した動作をCTRL + S(キーコード83)の動作として設定
        targetEditor.keystrokeHandler.keystrokes[CKEDITOR.CTRL + 83] = "ctrSCommand";
    
    //}

});



注意点は、キー押下時の処理の中で、alertやconfirmなどの同期処理が入っていると、保存ダイアログの表示等ブラウザ既定の動作が実行されてしまうところです。
alert等を使いたい場合は、setTimeoutを使うなど、非同期処理にするようにしてください。


実際に適用してみるとこんな感じです。
編集領域をクリックしてから、Ctrl + Sを押してみてください。




以前は、単純なTEXTAREAでテキストを入力してもらい、HTMLタグが含まれていれば解釈をするという形式をとっていたのですが、ただ文書を作りたいだけのユーザにとって、HTMLの概念の学習コストが小さなものではないので、WYSIWYGなエディタを導入することにしました。
#ちなみにWYSIWYGというのは"What You See Is What You Get"の頭字語で、文書を閲覧しているときも、編集しているときも、印刷したときも、「同じ状態で見られる」という特性です。使用者にとってはそのほうがわかりやすいですよね。


調べによれば、NicEditというもっと軽いライブラリもあるようで。
色々と検討する必要がありそうです。
 


 
   JavaScript    TB(0)    CM(0)    EDIT    ページ↑

コメント投稿


 管理者だけに表示

コメント

トラックバック

この記事へのトラックバック:

プロフィール

JDB Luigi

Author:JDB Luigi
どこにでもいるようなありふれた人間・・・という訳でもなく、かと言って怪しい宗教を信仰する変人という訳でも無い。

基本的に掲載しているコード等は煮ていただいても焼いていただいても結構ですが、利用は自己責任にてお願いいします。
また、バグ・アドバイス等もしあればよろしくお願いします。