![MonacoEditor + Vue を使ってエディタを実装](/images/thumbnail/vue-logo.png)
MonacoEditor + Vue を使ってエディタを実装
2019-06-235 min read
目次
概要
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);
},
},
};
Recommends
New Posts
Hot posts!
Date
Tags
Author