monaco vue Download - monaco vue Source Code Download

monaco-vue

Utilisez monaco-editor chargé à partir de CDN dans les vue 2 et 3, pas besoin de regrouper.

Anglais | 简体中文

Pourquoi

Le monaco-editor ne prend pas très bien en charge ESM, ce qui entraîne des fichiers volumineux lorsque le code est regroupé.

Mais l'équipe officielle a écrit un chargeur sur des fichiers de chargement paresseux de l'éditeur à distance, afin que nous puissions charger les fichiers d'un CDN pour l'utiliser.

Si vous souhaitez toujours importer des fichiers monaco-editor à partir de node_modules et les regrouper dans votre code (sans utiliser de chargement à distance), vous devrez utiliser un outil de regroupement. Voir ici.

Installation

npm i @guolao/vue-monaco-editor

Vue <= 2.6.14 Exige que @ vue / composition-API soit installé.

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

N'oubliez pas d'enregistrer le plugin @vue/composition-api !

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

Vue . use ( VueCompositionAPI )

Bien sûr, vous pouvez également utiliser UNPKG.

Usage

Inscription mondiale

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

Inscription locale

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

Et puis, utilisez-le.

Éditeur

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

Éditeur de 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 >

Accessoires et événements et machines à sous

Éditeur

Nom	Taper	Défaut	Description	remarque
valeur	`string`		Valeur du modèle actuel, peut utiliser `v-model:value`	`v-model:value`
langue	`string`		Toute langue du modèle actuel	Langues soutenues par `monaco-editor` , Voir ici
chemin	`string`		Chemin vers le modèle actuel
DefaultValue	`string`		Valeur par défaut du modèle actuel
DefaultLanguage	`string`		Langue par défaut du modèle actuel	Langues soutenues par `monaco-editor` Voir ici
par défaut	`string`		Chemin par défaut du modèle actuel	`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
thème	`vs` \| `vs-dark`	`vs`	Le thème de l'éditeur de Monaco.
doubler	`number`		Nombre de lignes pour sauter
options	`object`	`{}`	IstandaloneEditorConstructionOptions
services de mise en œuvre	`object`	`{}`	IditorOverrideServices
sauvegarder	`boolean`	`true`	Enregistrer l'état de vue du modèle (position de défilement, etc.) après les modifications du modèle	Un `path` unique doit être configuré pour chaque modèle
largeur	`number` \| `string`	`100%`	Largeur du conteneur
hauteur	`number` \| `string`	`100%`	hauteur du conteneur
nom de classe	`string`		Nom de la classe de conteneur intérieur
@beForemount	`(monaco: Monaco) => void`		Exécuter avant la création de l'instance de l'éditeur (n'utilisez pas `@before-mount` dans Vue2, détail)
@monter	`(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`		exécuter après la création de l'instance de l'éditeur
@changement	`(value: string \| undefined, event: monaco.editor.IModelContentChangedEvent) => void`		exécuter lorsque la valeur modifiée change
@valider	`(markers: monaco.editor.IMarker[]) => void`		exécuter lorsqu'une erreur de syntaxe se produit	`monaco-editor` prend en charge les langues vérifiées par syntaxe ici
`#default`	`slot`	`'loading...'`	statut de chargement	Lors du chargement des fichiers à partir de CDN, l'affichage de l'état de chargement sera plus convivial
`#failure`	`slot`	`'load failed'`	statut de défaillance	Exemple: Erreur du réseau CDN

Éditeur de DIFF

Nom	Taper	Défaut	Description
original	`string`		La valeur source originale (éditeur de gauche)
modifié	`string`		La valeur de source modifiée (éditeur de droite)
langue	`string`		Langue pour les deux modèles - original et modifié (toutes les langues qui sont prises en charge par monaco-éditeur)
OriginAllanguage	`string`		Cet accessoire vous donne la possibilité de spécifier la langue de la source d'origine séparément, sinon, il obtiendra la valeur de la propriété linguistique.
ModifiedLanguage	`string`		Cet accessoire vous donne la possibilité de spécifier la langue de la source modifiée séparément, sinon, il obtiendra la valeur de la propriété linguistique.
OriginalModelpath	`string`		Chemin pour le modèle "original". Sera passé comme troisième argument à `.createModel` Méthode - `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))`
ModifiedModelpath	`string`		Chemin pour le modèle "modifié". Sera passé comme troisième argument à `.createModel` Méthode - `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))`
thème	`vs` \| `vs-dark` \| `string`	`vs` ( `vs` thème est égal au thème `light` )	Le thème de l'éditeur de Monaco. Définissez de nouveaux thèmes de `monaco.editor.defineTheme` .
options	`object`	`{}`	IstandalonEdiffEditorConstructionOptions
largeur	`number` \| `string`	`100%`	Largeur du conteneur
hauteur	`number` \| `string`	`100%`	Hauteur du conteneur
nom de classe	`string`		Nom de la classe de conteneur intérieur
@beForemount	`(monaco: Monaco) => void`		Exécuter avant la création de l'instance de l'éditeur (n'utilisez pas `@before-mount` dans Vue2, détail)
@monter	`(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void`		Exécuter après la création de l'instance de l'éditeur
`#default`	`slot`	`'loading...'`	Statut de chargement
`#failure`	`slot`	`'load failed'`	Statut de défaillance

Crochets

useMonaco utilisez @ monaco-éditeur / chargeur pour charger monaco-editor à partir du CDN.

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

Monnaie

vue-monaco-editor utilise @ monaco-éditeur / chargeur pour charger le monaco-editor à partir du CDN (le processus de chargement du loader est asynchrone).

La configuration du loader est globale, pour être configurée une fois.

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

Package NPM

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

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

Vite

Si vous utilisez vite , vous devez le faire (voir # 1791 (commentaire) pour plus de détails).

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

Rouleau

Si vous utilisez Rollup , vous pouvez utiliser le plugin fourni par le plugin rollup-plagin-monaco-éditeur.

Webpack

Si vous utilisez webpack , monaco-editor fournit officiellement un plugin webpack appelé Monaco-Editor-Webpack-Plugin, que vous pouvez installer et utiliser.