VSCode1.3のリリースと一緒に、monaco-editorのnpmパッケージが公開されました。
てことで、さっそく使ってみました。
実際に動かしてみると、想像以上のクオリティのテキストエディタが一瞬で組み込めてビックリしました!!
今まで、HTMLとJavaScriptでテキストエディタ的なの作る時には、aceとか使ってたんですが、今後はmonaco-editorを使おうかな、と思います。
サンプルコード類
以下のリポジトリにサンプルコード類があります。
https://github.com/Microsoft/monaco-editor-samples
二つのテキストの差分表示やら、electronと組み合わせたサンプルなどなど、いろんなサンプルコードがあります。
最初はこの辺を参考にやってみるとよさそう。
あとは、↓のサイトで、各種APIの使い方を、実際にWebページ上で動くサンプルコードで試すことができます。
https://microsoft.github.io/monaco-editor/playground.html
インストール
インストールは以下のコマンドで。
npm install monaco-editor
package.jsonに記録しておきたい場合は、--saveオプションも付けてください。
インストールすると、node_modulesの中にこんな風にダウンロードされます。
- devフォルダ
- minifyされてないコード一式。
- minフォルダ
- minifyされたフォルダ。プロダクション環境ではこちらを使うことを推奨。
- min-mapsフォルダ
- minフォルダのファイルに対するソースファイル類
ついでに、このmonaco-editorのpackage.jsonを見てみると、"dependencies": {}という何とも漢らしい記述。
typescriptのコンパイラもそうですが、MSの作るモジュールは、こんな風に依存関係を少なくするように努力してる感があって非常に好感が持てます。
npmのパッケージ依存関係の複雑さは、今年の春先にkik関係のunpublish問題でありったけトラブルになったのが記憶に新しいですよね。
こういう、他に依存せずなんでも自身のパッケージ内に書くっていうのは、npmやJavaScriptのマイクロパッケージ文化とは異なるものかもしれません。
でも、依存関係が複雑すぎて、自分が何使ってるのかわからなくなるようなモジュールより、こういうシンプルなものの方が安心して使えるよなぁ、という気がします。
使い方
ドキュメントのサンプルコードを参考に、以下のようなコードを書いてみます。
変更したのは、monaco-editorのコードを、node_modulesフォルダから直接参照するようにしたくらい。
index.html
<!DOCTYPE html><html><head><metahttp-equiv="X-UA-Compatible"content="IE=edge" /><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"></head><body><divid="container"style="width:800px;height:600px;border:1px solid grey"></div><scriptsrc="node_modules/monaco-editor/min/vs/loader.js"></script><script> require.config({ paths: {'vs': 'node_modules/monaco-editor/min/vs'}}); require(['vs/editor/editor.main'], function(){var editor = monaco.editor.create(document.getElementById('container'), { value: ['function x() {','\tconsole.log("Hello world!");','}'].join('\n'), language: 'javascript'});});</script></body></html>
こうしてindex.htmlを開いてみると、以下のようにVSCodeで見慣れたようなテキストエディタが領域が表示されます。
インテリセンスまでバッチリ効きます。
コードの説明
require・・・というコードがところどころ出てきてます。これは、require.jsなどと同じようなAMD形式でのモジュールローダーで、monaco-editor内のloader.jsというファイルで定義されています。
前述の通り、monaco-editorは他のパッケージへの依存を持たず、必要な機能は全部自身のモジュール内で定義しているようです。
↓のコードでは、editor.mainを最初に読みに行き、読み込みが完了したら、第二引数のコールバック関数が実行されます。
require(['vs/editor/editor.main'], function() {var editor = monaco.editor.create(document.getElementById('container'), { value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), language: 'javascript'}); });
このmonaco.editor.create(・・・という部分が肝です。
第一引数にテキストエディタ表示を行いたいDOM要素を指定し、第二引数に各種オプションを指定すればよいみたい。
各種オプションなど
この、monaco.editor.createメソッドを呼び出す際には、以下のようなオプション指定ができます。
var editor = monaco.editor.create(document.getElementById('container'), { value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'), language: 'javascript', lineNumbers: true, // 行数表示の有無 roundedSelection: false, // 選択領域の角が丸くなる？ scrollBeyondLastLine: false, // 最終行より下までスクロール可能か設定 readOnly: false, // 読み取り専用の設定 theme: "vs-dark"// テーマの設定});
これらのオプションを指定することで、こんな風に色々と設定を変えられるみたい。
テキストデータの取得
エディタで編集されたテキストデータは、エディタをのインスタンスに対して、getValue()メソッドを呼び出すことで取得できます。
monaco.editor.create()メソッドの戻り値を変数に格納しておき、ボタン押下時にそのインスタンスのgetValueメソッドを呼び出して、テキストエディタに書かれた文字列を取得してみます。
コード全体は以下の通り。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>
<button onclick="showMessage();">ボタン</button>
<script src="node_modules/monaco-editor/min/vs/loader.js"></script>
<script>
var editor;
require.config({ paths: {'vs': 'node_modules/monaco-editor/min/vs'}});
require(['vs/editor/editor.main'], function() {
editor = monaco.editor.create(document.getElementById('container'), {
value: ['function x() {',
'\tconsole.log("Hello world!");',
'}'].join('\n'),
language: 'javascript'});
});
function showMessage() {var text = editor.getValue();
alert(text);
}</script>
</body>
</html>
とりあえず、今回はこの辺まで。
