WebアプリにMonacoEditorを埋め込む方法

現在作成中のWebアプリにエディタ機能を実装する必要性が出てきた為、何か良いサービスはないかと探していた。
そしたら、vscodeと同様の機能を要するMonacoEditorというサービスを発見した。

https://microsoft.github.io/monaco-editor/

Microsoft/monacoeditorの公式ページより引用

次は実際に導入する方法だが、まずターミナル上で以下のコマンドを入力する。

npm install monaco-editor

インストール後に、HTML・JavaScriptファイルを用意して以下のように記述する。

index.html
...
  <div id="editorContainer"></div>
...
</body>
<script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
<script src="monacoEditor.js"></script>

monacoEditor.js

require.config({ paths: { vs: "../node_modules/monaco-editor/min/vs" } });
let editorInstance = window.editorInstance;

require(["vs/editor/editor.main"], function () {
  editorInstance = monaco.editor.create(
    document.getElementById("editorContainer"),
    {
      value: "",
      language: "",
      roundedSelection: false,
      scrollBeyondLastLine: false,
      readOnly: false,
      theme: "vs-dark",
      fontSize: 15,
    },
  );
});

"monacoEditor.js"内のgetElementById()以下のパラメーターについては、公式Documentationを参照、またはChatGPTに聞く必要あり。

MonacoEditorのお陰で、ブラウザ上で動作可能なエディタを自作する、もしくは有料のその他サービスを利用する工程を省けて、とても嬉しい限りである。