JavaScript
Ace
jsnote

JavaScriptで書かれたブラウザで動くエディタAceのキーバインドをvim, emacsにした後デフォルトに戻す方法

背景

ブラウザで動くjavascriptエディター jsnoteを作っていた. ユーザがキーバインド(エディターの種類)をvim, emacs, aceの中から選べるようにしたかった. デフォルトはAce(Atomのブラウザ版)になっているが、設定をvimやemacsにした後、再びAceに戻す方法が分からなかった.

問題

下記のコードでvimやemacesに設定することはできる。

<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
  const editor = ace.edit('editor');             
                                                   //default Ace
  editor.setKeyboardHandler("ace/keyboard/vim");   //vim
  editor.setKeyboardHandler("ace/keyboard/emacs"); //emacs
  /*reset*/
  editor.setKeyboardHandler("ace/keyboard/");      //error
  editor.setKeyboardHandler("");                   //error
</script>

consoleで引数がおかしいと言われて実行できない

対処法

nullを入れるとデフォルトのAceに戻る

<script src="/ace-builds/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
  const editor = ace.edit('editor');             
                                                   //default Ace
  editor.setKeyboardHandler("ace/keyboard/vim");   //vim
  editor.setKeyboardHandler("ace/keyboard/emacs"); //emacs
  /*reset*/
  editor.setKeyboardHandler(null);                 //Ace
</script>

サンプルコード

jsnoteで使っているコード
GitHub