CodeMirrorを使った

CodeMirrorとは？

web上にエディタを設置することができるライブラリです。
今回扱う機会があったので、メモ程度に残しておきます。簡易的にここに設置してみました。
書いたコードがハイライトされて、Alt-Fで検索、F-11でフルスクリーン編集、ctrl-spaceで補完が効くようになっています。
htmlモードで設置しています。他にもいろいろな言語でハイライトさせることができるようです。

設置する

公式ページからダウンロードまたはbowerで下記コマンドを実行します。

bower install codemirror

下記でスクリプトを読み込みます。bowserでインストールした場合は下記dirになります。（相対パスで指定しています。）

        <script src="../bower_components/codemirror/lib/codemirror.js"></script>
        <script src="../bower_components/codemirror/addon/display/fullscreen.js"></script>
        <script src="../bower_components/codemirror/addon/dialog/dialog.js"></script>
        <script src="../bower_components/codemirror/addon/search/search.js"></script>
        <script src="../bower_components/codemirror/addon/search/searchcursor.js"></script>
        <script src="../bower_components/codemirror/addon/scroll/annotatescrollbar.js"></script>
        <script src="../bower_components/codemirror/addon/search/matchesonscrollbar.js"></script>
        <script src="../bower_components/codemirror/addon/search/jump-to-line.js"></script>
        <script src="../bower_components/codemirror/addon/hint/show-hint.js"></script>
        <script src="../bower_components/codemirror/addon/hint/xml-hint.js"></script>
        <script src="../bower_components/codemirror/addon/hint/html-hint.js"></script>
        <script src="../bower_components/codemirror/addon/hint/xml-hint.js"></script>
        <script src="../bower_components/codemirror/addon/hint/html-hint.js"></script>
        <script src="../bower_components/codemirror/mode/xml/xml.js"></script>
        <script src="../bower_components/codemirror/mode/javascript/javascript.js"></script>
        <script src="../bower_components/codemirror/mode/css/css.js"></script>
        <script src="../bower_components/codemirror/mode/htmlmixed/htmlmixed.js"></script>

下記でcssを読み込みます。

        <link rel="stylesheet" href="../bower_components/codemirror/lib/codemirror.css" />
        <link rel="stylesheet" href="../bower_components/codemirror/addon/display/fullscreen.css" />
        <link rel="stylesheet" href="../bower_components/codemirror/addon/dialog/dialog.css">
        <link rel="stylesheet" href="../bower_components/codemirror/addon/search/matchesonscrollbar.css">
        <link rel="stylesheet" href="../bower_components/codemirror/addon/hint/show-hint.css">

下記スクリプトタグを設置します。textareaにidをつけておきます。今回はcodemirrorとしています。
lineNumbersが行数で、extraKeysがアドオンの機能を実行するためのキーマップ、modeが編集する時のモード指定のようです。

   <script>
        $(function(){
          var editor = CodeMirror.fromTextArea(document.getElementById("codemirror"), {
            mode:"text/html",
            lineNumbers: true,
            extraKeys: {
             "F11": function(cm) {
               cm.setOption("fullScreen", !cm.getOption("fullScreen"));
             },
             "Esc": function(cm) {
               if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
             },
             "Alt-F": "findPersistent",
             "Ctrl-Space": "autocomplete"
           }
         });
         editor.on('change', function(){ editor.save(); });
        });
    </script>

id元のテキストエリアに同期させるにはeditor.save();を使います。
CMSのような編集ページを作成するときなどに使えそうです！

以上、CodeMirrorでした 😀