ホーム>Web サイト構築リソース>その他のリソース
ダウンロード

モナコビュー

VUE 2＆3でCDNからロードされたmonaco-editorを使用してください。バンドリングする必要はありません。

英語| 简体中文

なぜ

monaco-editor ESMをあまりうまくサポートしていないため、コードがバンドルされると大きなファイルが発生します。

しかし、公式チームはエディターの怠zyなロードファイルをリモートで書き留めているため、CDNからファイルをロードして使用できます。

node_modulesからmonaco-editorファイルをインポートし、それらをコードにバンドルする（リモートロードを使用せずに）引き続きインポートする場合は、バンドリングツールを使用する必要があります。こちらをご覧ください。

インストール

npm i @guolao/vue-monaco-editor

vue <= 2.6.14では、 @vue/composition-apiをインストールする必要があります。 

npm i @guolao/vue-monaco-editor @vue/composition-api

@vue/composition-apiプラグインを登録することを忘れないでください！ 

 import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'

Vue . use ( VueCompositionAPI )

もちろん、UNPKGを使用することもできます。

使用法

グローバル登録

 import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp ( App )
app . use ( VueMonacoEditorPlugin , {
  paths : {
    // You can change the CDN config to load other versions
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

ローカル登録

 // main.ts
import { loader } from '@guolao/vue-monaco-editor'
loader . config ( {
  paths : {
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs' ,
  } ,
} )

// editor.vue
import { VueMonacoEditor } from '@guolao/vue-monaco-editor'
export default {
  components : { VueMonacoEditor } ,
}

そして、それを使用します。

エディタ

< template >
  < vue-monaco-editor
    v-model:value = " code "
    theme = " vs-dark "
    :options = " MONACO_EDITOR_OPTIONS "
    @mount = " handleMount "
  />
</ template >

< script lang="ts" setup>
import { ref , shallowRef } from ' vue '

const MONACO_EDITOR_OPTIONS = {
  automaticLayout: true ,
  formatOnType: true ,
  formatOnPaste: true ,
}

const code = ref ( ' // some code... ' )
const editor = shallowRef ()
const handleMount = editorInstance => ( editor . value = editorInstance )

// your action
function formatCode() {
  editor . value ?. getAction ( ' editor.action.formatDocument ' ). run ()
}
</ script >

DIFFエディター

< template >
  < vue-monaco-diff-editor
    theme = " vs-dark "
    original = " // the original code "
    modified = " // the modified code "
    language = " javascript "
    :options = " OPTIONS "
    @mount = " handleMount "
  />
</ template >

< script lang="ts" setup>
import { ref , shallowRef } from ' vue '

const OPTIONS = {
  automaticLayout: true ,
  formatOnType: true ,
  formatOnPaste: true ,
  readOnly: true ,
}

const diffEditor = shallowRef ()
const handleMount = diffEditorInstance => ( diffEditor . value = diffEditorInstance )

// get the original value
function getOriginalValue() {
  return diffEditor . value . getOriginalEditor (). getValue ()
}

// get the modified value
function getModifiedValue() {
  return diffEditor . value . getModifiedEditor (). getValue ()
}
</ script >

小道具とイベントとスロット

エディタ

名前タイプデフォルト説明述べる
価値string現在のモデルの値は、 v-model:valueを使用できますv-model:value
言語string現在のモデルのすべての言語monaco-editorがサポートする言語は、こちらをご覧ください
パスstring現在のモデルへのパス
defaultValue string現在のモデルのデフォルト値
DefaultLanguage string現在のモデルのデフォルト言語monaco-editorビューでサポートされている言語はこちら
DefaultPath string現在のモデルのデフォルトパスmonaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))
テーマvs | vs-dark vsモナコ編集者のテーマ。
ラインnumberジャンプする行の数
オプションobject {} ISTANDALONEEDITORCONSTRUCTIONOPTIONS
オーバーライデスサービスobject {} IeditorOverRideservices
SaveViewState boolean trueモデルの変更後にモデルの表示状態（スクロール位置など）を保存しますモデルごとに一意のpathを構成する必要があります
幅number | string 100%コンテナ幅
身長number | string 100%コンテナの高さ
className string内部コンテナクラス名
@beforemount (monaco: Monaco) => voidエディターインスタンスが作成される前に実行する（Vue2で@before-mount 、詳細を使用しないでください）
@マウント(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => voidエディターインスタンスが作成された後に実行します
@変化(value: string | undefined, event: monaco.editor.IModelContentChangedEvent) => void変更された値が変更されたときに実行します
@validate (markers: monaco.editor.IMarker[]) => void構文エラーが発生したときに実行しますmonaco-editorここで構文チェックされた言語ビューをサポートしています
#default slot 'loading...'読み込みステータスCDNからファイルをロードすると、読み込みステータスを表示する方がフレンドリーになります
#failure slot 'load failed'障害ステータス例：CDNネットワークエラー

DIFFエディター

名前タイプデフォルト説明
オリジナルstring元のソース値（左編集者）
修正string変更されたソース値（右エディター）
言語string両方のモデルの言語 - オリジナルと修正（Monaco -Editorによってサポートされているすべての言語）
Originallanguage stringこの小道具は、元のソースの言語を個別に指定する機会を提供します。そうしないと、言語プロパティの価値が得られます。
ModifiedLanguage stringこの小道具は、変更されたソースの言語を個別に指定する機会を提供します。そうでない場合、言語プロパティの価値が得られます。
OriginalModelPath string 「オリジナル」モデルのパス。 .createModelメソッドへの3番目の引数として渡されますmonaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))
ModifiedModelPath string 「変更された」モデルのパス。 .createModelメソッド - monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))の3番目の引数として渡されます。
テーマvs | vs-dark | string vs （ vsテーマはlightテーマに等しい）モナコ編集者のテーマ。 monaco.editor.defineThemeによる新しいテーマを定義します。
オプションobject {} ISTANDALONEDIFFEDITRCONSTRUCTIONOPTIONS
幅number | string 100%コンテナ幅
身長number | string 100%コンテナの高さ
className string内部コンテナクラス名
@beforemount (monaco: Monaco) => voidエディターインスタンスが作成される前に実行する（Vue2で@before-mount 、詳細を使用しないでください）
@マウント(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => voidエディターインスタンスが作成された後に実行します
#default slot 'loading...'読み込みステータス
#failure slot 'load failed'障害ステータス

フック

useMonaco @Monaco-Editor/Loaderを使用して、CDNからmonaco-editorをロードします。 

< template >
  < div ref = " containerRef " ></ div >
</ template >

< script lang="ts" setup>
import { ref , onUnmounted , watchEffect , nextTick } from ' vue '
import { useMonaco } from ' @guolao/vue-monaco-editor '

const containerRef = ref ()
const { monacoRef, unload } = useMonaco ()

// watch once
const stop = watchEffect (() => {
  if ( monacoRef . value && containerRef . value ) {
    nextTick (() => stop ())
    monacoRef . value . editor . create ( containerRef . value , { ... })
  }
})

/*
  When the component will be unmount,
  If the monaco instance is not successfully loaded,
  You need to manually unload.
*/
onUnmounted (() => ! monacoRef . value && unload ())
</ script >

CDN

vue-monaco-editor @Monaco-Editor/Loaderを使用してCDNからmonaco-editorをロードします（ loaderの負荷プロセスは非同期です）。

loaderの構成はグローバルであり、1回だけ構成されます。 

 import { createApp } from 'vue'
import { install as VueMonacoEditorPlugin } from '@guolao/vue-monaco-editor'

const app = createApp ( App )
app . use ( VueMonacoEditorPlugin , {
  paths : {
    // You can change the CDN config to load other versions
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} ) 
 import { loader } from "@guolao/vue-monaco-editor"

// loaded from CDN
loader . config ( {
  paths : {
    vs : 'https://cdn.jsdelivr.net/npm/[email protected]/min/vs'
  } ,
} )

// configurable for different languages
loader . config ( { "vs/nls" : { availableLanguages : { "*" : "de" } } } )

// or
loader . config ( {
  paths : {
    vs : "..." ,
  } ,
  "vs/nls" : {
    availableLanguages : {
      "*" : "de" ,
    } ,
  } ,
} )

NPMパッケージ

node_modulesからmonaco-editorファイルをインポートし、それらをコードにバンドルする（リモートロードを使用せずに）引き続きインポートする場合は、バンドリングツールを使用する必要があります。 

 import * as monaco from "monaco-editor"
import { loader } from "@guolao/vue-monaco-editor"

// loaded monaco-editor from `node_modules`
loader . config ( { monaco } )

vite

viteを使用している場合は、これを行う必要があります（詳細については＃1791（コメント）を参照）。 

 import { loader } from "@guolao/vue-monaco-editor"

import * as monaco from "monaco-editor"
import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker"
import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker"
import cssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker"
import htmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker"
import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker"

self . MonacoEnvironment = {
  getWorker ( _ , label ) {
    if ( label === "json" ) {
      return new jsonWorker ( )
    }
    if ( label === "css" || label === "scss" || label === "less" ) {
      return new cssWorker ( )
    }
    if ( label === "html" || label === "handlebars" || label === "razor" ) {
      return new htmlWorker ( )
    }
    if ( label === "typescript" || label === "javascript" ) {
      return new tsWorker ( )
    }
    return new editorWorker ( )
  }
}

loader . config ( { monaco } )

ロールアップ

Rollupを使用している場合は、Plugin Rollup-Plugin-Monaco-Editorを提供するコミュニティを使用できます。

webpack

webpackを使用している場合、 monaco-editor正式にMonaco-Editor-Webpack-Pluginと呼ばれるwebpackプラグインを提供します。

インスピレーション

モナコフは、次のプロジェクトからのインスピレーションのおかげで可能になりました。

  • モナコローダー
  • モナコ反応

ライセンス

mit

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて