スポンサーリンク

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

スポンサーリンク
HTML
スポンサーリンク

スポンサーリンク

概要

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

紹介

デモ

AtCoder-JsDebugger

GitHub

s-yoshiki/AtCoder-JsDebugger
AtCoder用のJSデバッガです。汎用的にも使えます。. Contribute to s-yoshiki/AtCoder-JsDebugger development by creating an account on GitHub.

セットアップ

Vue

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

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

vue-monaco

ここを参考にしました。

egoist/vue-monaco
MonacoEditor component for Vue.js. Contribute to egoist/vue-monaco development by creating an account on GitHub.
yarn add vue-monaco

Usage

サンプルコード






ポイント

テーマカラーについて

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)
        }
    },
}
タイトルとURLをコピーしました