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でした 😀
コメント