スポンサーリンク

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

スポンサーリンク
MonacoEditor + Vue を使ってエディタを実装 HTML
スポンサーリンク

スポンサーリンク

概要

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

紹介

デモ

AtCoder-JsDebugger

GitHub

GitHub - s-yoshiki/AtCoder-JsDebugger: AtCoder用のJSデバッガです。汎用的にも使えます。

セットアップ

Vue

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

vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで
vue-cli3のセットアップと開発サーバ起動からバンドルファイル生成まで
概要Vue.jsで作ったアプリをGitHub Pagesで公開する方法について。検証環境nodejs 11.10.0npm 6.7.0vue@cli 3.4.0nodejsとnpmの導入については省略します。vue@cl...

vue-monaco

ここを参考にしました。

GitHub - egoist/vue-monaco: MonacoEditor component for Vue.js
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をコピーしました