Download monaco vue - monaco vue Download do código -fonte

Monaco-Vue

Use monaco-editor carregado de CDN em Vue 2 e 3, não é necessário agrupar.

Inglês | 简体中文

Por que

O monaco-editor não suporta muito bem o ESM, o que resulta em arquivos grandes quando o código é agrupado.

Mas a equipe oficial escreveu um carregador para os arquivos de carregamento preguiçoso do editor remotamente, para que possamos carregar os arquivos de uma CDN para usá -lo.

Se você ainda deseja importar arquivos monaco-editor de node_modules e agrupar-os no seu código (sem usar carregamento remoto), precisará usar uma ferramenta de agrupamento. Veja aqui.

Instalação

npm i @guolao/vue-monaco-editor

Vue <= 2.6.14 Requer que @vue/composição-api seja instalado.

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

Não se esqueça de registrar o plugin @vue/composition-api !

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

Vue . use ( VueCompositionAPI )

Obviamente, você também pode 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 } ,
}

E então, use -o.

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

Adereços e eventos e slots

Editor

Nome	Tipo	Padrão	Descrição	observação
valor	`string`		Valor do modelo atual, pode usar `v-model:value`	`v-model:value`
linguagem	`string`		toda a linguagem do modelo atual	Idiomas apoiados pelo `monaco-editor` , veja aqui
caminho	`string`		caminho para o modelo atual
DefaultValue	`string`		valor padrão do modelo atual
defaultLanguage	`string`		linguagem padrão do modelo atual	Idiomas apoiados pela Visualização `monaco-editor` aqui
defaultPath	`string`		caminho padrão do modelo atual	`monaco.editor.createModel(..., ..., monaco.Uri.parse(defaultPath))`
tema	`vs` \| `vs-dark`	`vs`	O tema do editor de Mônaco.
linha	`number`		Número de linhas para pular
opções	`object`	`{}`	IStandaloneeditorConstructionOptions
Substituir Services	`object`	`{}`	IeditorSoverRideServices
SalveViewState	`boolean`	`true`	Salvar o estado de visualização do modelo (posição de rolagem, etc.) após as mudanças do modelo	Um `path` único precisa ser configurado para cada modelo
largura	`number` \| `string`	`100%`	largura de contêiner
altura	`number` \| `string`	`100%`	altura do recipiente
ClassName	`string`		Nome da classe de contêiner interno
@beforemount	`(monaco: Monaco) => void`		Execute antes que a instância do editor seja criada (não use `@before-mount` no VUE2, detalhes)
@mount	`(editor: monaco.editor.IStandaloneCodeEditor, monaco: Monaco) => void`		executar depois que a instância do editor foi criada
@mudar	`(value: string \| undefined, event: monaco.editor.IModelContentChangedEvent) => void`		executar quando a mudança de valor muda
@validar	`(markers: monaco.editor.IMarker[]) => void`		executar quando ocorre um erro de sintaxe	`monaco-editor` suporta Visualização de idiomas verificados por sintaxe aqui
`#default`	`slot`	`'loading...'`	status de carregamento	Ao carregar arquivos da CDN, a exibição do status de carregamento será mais amigável
`#failure`	`slot`	`'load failed'`	status de falha	Exemplo: erro de rede CDN

Editor de diff

Nome	Tipo	Padrão	Descrição
original	`string`		O valor original da fonte (editor esquerdo)
modificado	`string`		O valor da fonte modificado (editor direito)
linguagem	`string`		Idioma para os dois modelos - original e modificado (todos os idiomas suportados pelo Monaco -Editor)
OriginAldanguage	`string`		Este suporte oferece a oportunidade de especificar o idioma da fonte original separadamente; caso contrário, ele obterá o valor da propriedade do idioma.
ModifiedLanguage	`string`		Este suporte oferece a oportunidade de especificar o idioma da fonte modificada separadamente; caso contrário, ele obterá o valor da propriedade do idioma.
OriginalModelPath	`string`		Caminho para o modelo "original". Será aprovado como um terceiro argumento para `.createModel` Method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(originalModelPath))`
ModifiedModelPath	`string`		Caminho para o modelo "modificado". Será aprovado como um terceiro argumento para `.createModel` Method - `monaco.editor.createModel(..., ..., monaco.Uri.parse(modifiedModelPath))`
tema	`vs` \| `vs-dark` \| `string`	`vs` ( `vs` tema é igual ao tema `light` )	O tema do editor de Mônaco. Defina novos temas de `monaco.editor.defineTheme` .
opções	`object`	`{}`	ISTANDALONENDIFFEDITORCONSTRUCUÇÃO OPRIONS
largura	`number` \| `string`	`100%`	Largura de contêiner
altura	`number` \| `string`	`100%`	Altura do recipiente
ClassName	`string`		Nome da classe de contêiner interno
@beforemount	`(monaco: Monaco) => void`		Execute antes que a instância do editor seja criada (não use `@before-mount` no VUE2, detalhes)
@mount	`(editor: monaco.editor.IStandaloneDiffEditor, monaco: Monaco) => void`		Executar depois que a instância do editor foi criada
`#default`	`slot`	`'loading...'`	Status de carregamento
`#failure`	`slot`	`'load failed'`	Status de falha

Ganchos

useMonaco use @monaco-editor/carregador para carregar monaco-editor do 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/carregador para carregar o monaco-editor do CDN (o processo de carregamento do loader é assíncrono).

A configuração do loader é global, apenas para ser configurada uma 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" ,
    } ,
  } ,
} )

Pacote npm

Se você ainda deseja importar arquivos monaco-editor de node_modules e agrupar-os no seu código (sem usar carregamento remoto), precisará usar uma ferramenta de agrupamento.

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

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

Vite

Se você estiver usando vite , precisará fazer isso (consulte #1791 (comentar) para obter detalhes).

 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

Se você estiver usando Rollup , poderá usar a comunidade fornecida por plug-in plugin-plugin-monaco-editor.

Webpack

Se você estiver usando webpack , monaco-editor fornece oficialmente um plug-in webpack chamado Monaco-Editor-Webpack-Plugin, que você pode instalar e usar.