MonacoEditor + Vue を使ってエディタを実装

目次

1. 概要
2. 紹介
3. セットアップ
4. usage

概要

Vue + MonacoEditorでJSのデバッガを作ってみました。 標準入出力(?)をサポートしています。とりあえず意味がわからないと思うのでデモをみてください。

紹介

デモ

https://s-yoshiki.github.io/AtCoder-JsDebugger/#/

GitHub

https://github.com/s-yoshiki/AtCoder-JsDebugger

セットアップ

Vue

Vueプロジェクトのセットアップはこの辺りを参考にしてください。

https://tech-blog.s-yoshiki.com/2019/02/1090/

vue-monaco

ここを参考にしました。

https://github.com/egoist/vue-monaco

yarn add vue-monaco

Usage

サンプルコード

<template>
  <monaco-editor class="editor" v-model="code" language="javascript" ref="editor" :theme="theme"></monaco-editor>
</template>

<script>
import MonacoEditor from "vue-monaco";

export default {
  components: {
    MonacoEditor
  },
  data() {
    return {
      code: "const noop = () => {}",
      theme: "vs-dark"
    };
  }
};
</script>

<style>
.editor {
  width: 600px;
  height: 800px;
}
</style>

ポイント

テーマカラーについて

themeに指定できるのは以下の3種類である。

• 'vs' (白)
• 'vs-dark' (黒)
• 'hc-black' (ハイライトカラー)

エディタのリサイズ

cssを調整して、縦・横幅を100%にしていたとしても、エディタはリサイズされません。 windowのリサイズを検知した瞬間に以下のようなメソッドを適用する必要があります。

window.addEventListener('resize', (e) => {
  this.$refs.editor.getMonaco().layout();
});

エディタの変更の検知

エディタの内容の変更についてはvueのwatchを使うのが良いでしょう。

変更を検知した瞬間に alert するサンプル

import MonacoEditor from 'vue-monaco';
export default {
  components: {
    MonacoEditor,
  },
  data() {
    return {
      code: '',
    };
  },
  watch: {
    code() {
      alert(this.code);
    },
  },
};