Descarga monaco vue - Descarga del código fuente monaco vue

vide

Use monaco-editor cargado de CDN en Vue 2 y 3, sin necesidad de agruparse.

Inglés | 简体中文

Por qué

El monaco-editor no admite muy bien ESM, lo que da como resultado archivos grandes cuando el código está agrupado.

Pero el equipo oficial ha escrito un cargador a los archivos de carga perezosos del editor de forma remota, por lo que podemos cargar los archivos de un CDN para usarlo.

Si aún desea importar archivos monaco-editor desde node_modules y agruparlos en su código (sin usar la carga remota), deberá usar una herramienta de agrupación. Ver aquí.

Instalación

npm i @guolao/vue-monaco-editor

Vue <= 2.6.14 requiere que se instale @vue/composición-api.

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

¡No olvide registrar el complemento @vue/composition-api !

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

Vue . use ( VueCompositionAPI )

Por supuesto, también puedes usar UNPKG.

Uso

Registro global

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

Registro local

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

Y luego, úsalo.

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 >

Editor de diferencia

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

Propiedades y eventos y tragamonedas

Editor

Nombre	Tipo	Por defecto	Descripción	observación
valor	`string`		Valor del modelo actual, puede usar `v-model:value`	`v-model:value`
idioma	`string`		Todo el lenguaje del modelo actual	Idiomas compatibles con `monaco-editor` , Ver aquí
camino	`string`		ruta al modelo actual
Valor predeterminado	`string`		valor predeterminado del modelo actual
languaje de default	`string`		Lenguaje predeterminado del modelo actual	Idiomas compatibles con `monaco-editor` View aquí
Defaultpath	`string`		ruta predeterminada del modelo actual	`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
tema	`vs` \| `vs-dark`	`vs`	El tema del editor de Mónaco.
línea	`number`		número de líneas para saltar a
opción	`object`	`{}`	IstandaloneEditorConstructionOptions
servidumbre	`object`	`{}`	IEDITORTERRIDEVICES
saveViewState	`boolean`	`true`	Guardar el estado de vista del modelo (posición de desplazamiento, etc.) después de que cambie el modelo	Se debe configurar una `path` única para cada modelo
ancho	`number` \| `string`	`100%`	ancho de contenedor
altura	`number` \| `string`	`100%`	altura del contenedor
nombre de clase	`string`		Nombre de clase de contenedor interior
@borforemount	`(monaco: Monaco) => void`		Ejecutar antes de que se cree la instancia del editor (no use `@before-mount` en Vue2, detalle)
@montar	`(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`		ejecutar después de que se haya creado la instancia del editor
@cambiar	`(value: string \| undefined, event: monaco.editor.IModelContentChangedEvent) => void`		ejecutar cuando el cambio de valor cambiado
@validar	`(markers: monaco.editor.IMarker[]) => void`		ejecutar cuando ocurre un error de sintaxis	`monaco-editor` admite la vista de idiomas verificados de sintaxis aquí
`#default`	`slot`	`'loading...'`	estado de carga	Al cargar archivos desde CDN, mostrar el estado de carga será más amigable
`#failure`	`slot`	`'load failed'`	estado de falla	Ejemplo: error de red CDN

Editor de diferencia

Nombre	Tipo	Por defecto	Descripción
original	`string`		El valor de origen original (editor de izquierda)
modificado	`string`		El valor de origen modificado (editor derecho)
idioma	`string`		Idioma para ambos modelos: originales y modificados (todos los idiomas compatibles con Monaco -editor)
lenguaje de origen	`string`		Este accesorio le brinda la oportunidad de especificar el lenguaje de la fuente original por separado, de lo contrario, obtendrá el valor de la propiedad del idioma.
lenguaje modificado	`string`		Este accesorio le brinda la oportunidad de especificar el lenguaje de la fuente modificada por separado, de lo contrario, obtendrá el valor de la propiedad del idioma.
OriginalModelpath	`string`		Ruta para el modelo "original". Se aprobará como `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))` tercer argumento para `.createModel`
modificado	`string`		Ruta para el modelo "modificado". Se aprobará como `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))` tercer argumento para `.createModel`
tema	`vs` \| `vs-dark` \| `string`	`vs` ( `vs` , el tema es igual al tema `light` )	El tema del editor de Mónaco. Defina nuevos temas de `monaco.editor.defineTheme` .
opción	`object`	`{}`	IstandalonediffeditorconstructionOptions
ancho	`number` \| `string`	`100%`	Ancho de contenedor
altura	`number` \| `string`	`100%`	Altura del contenedor
nombre de clase	`string`		Nombre de clase de contenedor interior
@borforemount	`(monaco: Monaco) => void`		Ejecutar antes de que se cree la instancia del editor (no use `@before-mount` en Vue2, detalle)
@montar	`(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void`		Ejecutar después de que se haya creado la instancia del editor
`#default`	`slot`	`'loading...'`	Estado de carga
`#failure`	`slot`	`'load failed'`	Estado de falla

Manos

useMonaco use @monaco-editor/carger para cargar monaco-editor de la 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 >

CDN

vue-monaco-editor use @monaco-editor/cargador para cargar el monaco-editor del CDN (el proceso de carga del loader es asincrónico).

La configuración del loader es global, solo para configurarse una vez.

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

Paquete NPM

Si aún desea importar archivos monaco-editor desde node_modules y agruparlos en su código (sin usar la carga remota), deberá usar una herramienta de agrupación.

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

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

Vite

Si está utilizando vite , debe hacer esto (consulte el #1791 (comentario) para más detalles).

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

Acurrucado

Si está utilizando Rollup , puede usar el editor Rollup-Monaco-Monaco-Monaco de complemento proporcionado por la comunidad.

Pájaro web

Si está utilizando webpack , monaco-editor proporciona oficialmente un complemento webpack llamado Monaco-Editor-Webpack-Plugin, que puede instalar y usar.