TIL

Today I Learned. 知ったこと、学んだことを書いていく

それっぽいテキストエディタを簡単に実装 CodeMirror - JavaScript

JavaScript CodeMirror

CodeMirrorって何！？

JavaScriptで簡単にそれっぽいテキストエディタを生成できるライブラリ！GitHubやCodePenでも使われてる
また、カスタマイズもできるらしく、面白そう！！！！

実装してみた

以下の動画を見るとわかるが、本当にすごい簡単に実装できる。3分もあればできちゃう。

www.youtube.com

動画をみながら実際にやってみた

準備

CodeMirrorのページからCodeMirrorを動作させるためのファイルをZIPでダウンロードする
ダウンロードし、解凍したら、libとmodeという2つのフォルダをコピーしてくる

こんな感じ

.
├── index.html  // 作成する
├── lib
└── mode

libはCodeMirrorを動作させるために必須な物が入っている。modeは言語のシンタックスの設定ファイル。(themeというものもあるが、これはエディタのテーマ)

次にindex.htmlを編集する

コアとなるCSSとJavaScriptを読み込む

以下の2つはCodeMirrorを使うときには必ず読み込むファイル

  • lib/codemirror.css
  • lib/codemirror.js

modeフォルダのファイルには言語のシンタックスの情報が記述されている

<head>
  ...
  <!-- 以下の2つは必ず読み込む -->
  <link rel="stylesheet" href="lib/codemirror.css">
  <script src="lib/codemirror.js"></script>
  ...
</head>

エディタの生成

エディタの生成するにはCodeMirrorオブジェクトを作るだけ
CodeMirrorのコンストラクタである要素を渡すと、その要素の中にエディタを生成してくれる(内側にできるんだね...てっきり外側に出来てるのかと思ってた...)

以下の例では、idがcodeeditorのdiv要素の中にエディタを生成している

<body>
  <div id="codeeditor"></div>

  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"));
  </script>
</body>

HTMLが読み込まれると、以下のようにエディタができる！！！
(テキストは入力した)

f:id:tmg1998:20180415214818p:plain:w400

全体のソース

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CodeMirror</title>
  <!-- 以下の2つは必ず読み込む -->
  <link rel="stylesheet" href="lib/codemirror.css">
  <script src="lib/codemirror.js"></script>

  <style>
    body {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="codeeditor"></div>

  <script>
    const editor = CodeMirror(document.getElementById("codeeditor"));
  </script>
</body>
</html>

参考文献