monaco vue Download - monaco vue Quellcode Download

Monaco-Vue

Verwenden Sie monaco-editor das von CDN in Vue 2 und 3 beladen ist, ohne dass es gebündelt werden muss.

Englisch | 简体中文

Warum

Der monaco-editor unterstützt ESM nicht sehr gut, was zu großen Dateien führt, wenn der Code gebündelt ist.

Das offizielle Team hat jedoch einen Loader für faule Ladedateien des Editors aus der Ferne geschrieben, sodass wir die Dateien von einem CDN für die Verwendung laden können.

Wenn Sie immer noch monaco-editor Dateien aus node_modules importieren und in Ihren Code bündeln (ohne das Laden von Remote), müssen Sie ein Bündelungswerkzeug verwenden. Siehe hier.

Installation

npm i @guolao/vue-monaco-editor

Vue <= 2.6.14 muss @vue/composition-api installieren.

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

Vergessen Sie nicht, das Plugin @vue/composition-api zu registrieren!

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

Vue . use ( VueCompositionAPI )

Natürlich können Sie auch UNPKG verwenden.

Verwendung

Globale Registrierung

 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'
  } ,
} )

Lokale Registrierung

 // 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 } ,
}

Und dann benutze es.

Editor

< 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 -Editor

< 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 >

Requisiten & Ereignisse & Slots

Editor

Name	Typ	Standard	Beschreibung	Bemerkung
Wert	`string`		Wert des aktuellen Modells kann `v-model:value`	`v-model:value`
Sprache	`string`		Alle Sprache des aktuellen Modells	Von `monaco-editor` unterstützte Sprachen, hier anzeigen
Weg	`string`		Pfad zum aktuellen Modell
StandardValue	`string`		Standardwert des aktuellen Modells
DefaultLanguage	`string`		Standardsprache des aktuellen Modells	Sprachen, die hier von `monaco-editor` View unterstützt werden
Standardpfad	`string`		Standardpfad des aktuellen Modells	`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
Thema	`vs` \| `vs-dark`	`vs`	Das Thema für den Monaco Editor.
Linie	`number`		Anzahl der Zeilen, zu denen sie springen sollen
Optionen	`object`	`{}`	IstandaloneEditorConstructionoptionen
übersteuern	`object`	`{}`	IEDITOROVERRIDEVICES
SaveViewState	`boolean`	`true`	Speichern Sie den Ansichtszustand des Modells (Bildlaufposition usw.) nach Modelländerungen	Für jedes Modell muss ein einzigartiger `path` konfiguriert werden
Breite	`number` \| `string`	`100%`	Containerbreite
Höhe	`number` \| `string`	`100%`	Containerhöhe
Klassenname	`string`		Name des inneren Containerklassens
@BeforeMount	`(monaco: Monaco) => void`		Führen `@before-mount` aus
@montieren	`(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`		Ausführen nach der Erstellung der Editorinstanz ausführen
@ändern	`(value: string \| undefined, event: monaco.editor.IModelContentChangedEvent) => void`		Führen Sie aus, wenn die geänderte Wertänderung ändert
@bestätigen	`(markers: monaco.editor.IMarker[]) => void`		Führen Sie aus, wenn ein Syntaxfehler auftritt	`monaco-editor` unterstützt hier die Syntax-überprüften Sprachenansicht
`#default`	`slot`	`'loading...'`	Ladestatus	Wenn Sie Dateien von CDN laden, ist das Anzeigen des Ladestatus freundlicher
`#failure`	`slot`	`'load failed'`	Fehlerstatus	Beispiel: CDN -Netzwerkfehler

Diff -Editor

Name	Typ	Standard	Beschreibung
Original	`string`		Der ursprüngliche Quellwert (linker Editor)
verändert	`string`		Der geänderte Quellwert (richtiger Editor)
Sprache	`string`		Sprache für beide Modelle - Original und modifiziert (alle Sprachen, die von Monaco -Eduitor unterstützt werden)
Originallanguage	`string`		Diese Requisite gibt Ihnen die Möglichkeit, die Sprache der ursprünglichen Quelle separat anzugeben. Andernfalls erhält sie den Wert der Spracheigenschaft.
ModifiedLanguage	`string`		Diese Requisite gibt Ihnen die Möglichkeit, die Sprache der geänderten Quelle separat anzugeben. Andernfalls erhält sie den Wert der Spracheigenschaft.
OriginalmodelPath	`string`		Pfad für das "Original" -Modell. Wird als drittes Argument an `.createModel` -Methode - `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))` übergeben.
ModifiedModelPath	`string`		Pfad für das "modifizierte" Modell. Wird als drittes Argument an `.createModel` -Methode - `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))` übergeben.
Thema	`vs` \| `vs-dark` \| `string`	`vs` ( `vs` THEME GEBEN `light` THEME)	Das Thema für den Monaco Editor. Definieren Sie neue Themen von `monaco.editor.defineTheme` .
Optionen	`object`	`{}`	IstandalonediffeditorConstructionoptionen
Breite	`number` \| `string`	`100%`	Containerbreite
Höhe	`number` \| `string`	`100%`	Containerhöhe
Klassenname	`string`		Name des inneren Containerklassens
@BeforeMount	`(monaco: Monaco) => void`		Führen `@before-mount` aus
@montieren	`(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void`		Ausführen nach der Erstellung der Editorinstanz ausführen
`#default`	`slot`	`'loading...'`	Ladestatus
`#failure`	`slot`	`'load failed'`	Fehlerstatus

Haken

useMonaco Verwenden Sie @Monaco-Eduitor/Loader, um monaco-editor aus dem CDN zu laden.

< 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 Verwenden Sie @Monaco-Editor/Loader, um den monaco-editor vom CDN zu laden (der Ladungsprozess des loader ist asynchron).

Die Konfiguration von loader ist global, nur einmal konfiguriert werden.

 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 -Paket

Wenn Sie immer noch monaco-editor Dateien aus node_modules importieren und in Ihren Code bündeln (ohne das Laden von Remote), müssen Sie ein Bündelungswerkzeug verwenden.

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

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

Vite

Wenn Sie vite verwenden, müssen Sie dies tun (finden Sie in #1791 (Kommentar) für Einzelheiten).

 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

Wenn Sie Rollup verwenden, können Sie die Community-Plugin Rollup-Plugin-Monaco-Eduditor verwenden.

Webpack

Wenn Sie webpack verwenden, bietet monaco-editor offiziell ein webpack Plugin namens Monaco-Eduitor-Webpack-Plugin, das Sie installieren und verwenden können.