<MonacoEditor>

<input> や <textarea>と同じように、エディタの表示には <MonacoEditor> が使えます。

プレビュー

コード

値の設定・取得

<template>
  <MonacoEditor
 v-model
="value
" />
</template>

<script lang="ts" setup>
const value
 = ref
('')
</script>

代替表示

<template>
  <MonacoEditor>
    Loading...
  </MonacoEditor>
</template>

<MonacoEditor> の子要素がエディタの読み込み中に表示されます。

プロパティ

langstring

plaintext

用いるプログラミング言語です。options.language の値を上書きします。
使用可能な言語の一覧はこちらにあります。

optionsIStandaloneEditorConstructionOptions

monaco.editor.createの第2引数として渡される設定です。エディタが表示された後に変更することもできます。
使用可能な設定の一覧はこちらにあります。

modelUrimonaco.Uri

モデルを識別するURIです。

イベント

interface Emits
 {
  (event
: 'update:modelValue', value
: string): void
  (event
: 'load', editor
: monaco
.editor
.IStandaloneCodeEditor
): void
}

load

エディタの読み込みが完了したときに、IStandaloneCodeEditorを引数として呼び出されます。

`<MonacoEditor>`の`Ref`の使用

useTemplateRef(またはref) と $editor を用いることで、エディタのインスタンスに直接アクセスできます。

<template>
  <MonacoEditor
 ref
="editorRef
" />
</template>

<script lang="ts" setup>
import { MonacoEditor
 } from '#components'
const editorRef
 = useTemplateRef
<InstanceType
<typeof MonacoEditor
>>('editorRef')

// あいさつアクションをエディタに追加する例
editorRef
.value
?.$editor
.addAction
({
  id
: 'hello-world',
  label
: 'Hello world',
  run
: function (ed
) {
    alert('Hello world!')
  }
})
</script>

UIのカスタマイズ

<MonacoDiffEditor> は、2つのファイルの差分を表示するために利用します。

このページの目次

値の設定・取得
代替表示
プロパティ
イベント
<MonacoEditor>のRefの使用

Star on GitHub Create Issues