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でした 😀

JavaScriptプログラミング
独学に限界を感じたら、オンラインのプログラミングスクールへ...
  • Code ViIlage
      挫折させない本気のプログラミングスクール。学習継続率93.3%・卒業生800名以上。
  • DMM WEBCAMP
      働きながら自分のペース学んでエンジニア転職。無料カウンセリング満足度99%!
  • TECH CAMP
      無料カウンセリング満足度95%!本業に活かせる。キャリアアップにつながる。
  • TechAcademy
      現役エンジニアから学べるオンラインに特化したプログラミングスクール。
  • テックパートナーズカレッジ
      WEBシステム開発会社のノウハウが学べるオンラインスクール。14日無料体験有り!
  • \ PHP・Laravelに特化したオンラインスクール /
    yasuakiをフォローする
    codelikeなブログ

    コメント

    タイトルとURLをコピーしました