<MonacoEditor>
<input>
や <textarea>
と同じように、エディタの表示には <MonacoEditor>
が簡単に使えます。
値の設定・取得
<template>
<MonacoEditor v-model="value" />
</template>
<script lang="ts" setup>
const value = ref('')
</script>
代替表示
<template>
<MonacoEditor>
Loading...
</MonacoEditor>
</template>
<MonacoEditor>
の子要素がエディタの読み込み中に表示されます。
プロパティ
lang
- デフォルト値:
plaintext
配色に用いるプログラミング言語です。options.language
の値を上書きします。
使用可能な言語の一覧はこちらにあります。
options
- Default:
{ automaticLayout: true }
monaco.editor.create
の第2引数として渡される設定です。
エディタが表示された後に変更することもできます。
使用可能な設定の一覧はこちらにあります。
イベント
interface Emits {
(event: 'update:modelValue', value: string): void
(event: 'load', editor: monaco.editor.IStandaloneCodeEditor): void
}
load
エディタの読み込みが完了したときに、IStandaloneCodeEditor
を引数として呼び出されます。
<MonacoEditor>
のRef
の使用
ref
と $editor
を用いることで、エディタのインスタンスに直接アクセスできます。
<template>
<MonacoEditor ref="editorRef" />
</template>
<script lang="ts" setup>
import { MonacoEditor } from '#build/components'
const editorRef = ref<InstanceType<typeof MonacoEditor>>()
// あいさつアクションを追加するには...
editorRef.value?.$editor.addAction({
id: 'hello-world',
label: 'Hello world',
run: function (ed) {
alert('Hello world!')
}
})
</script>