Descargar vue monaco - Descargar el código fuente vue monaco

vue monaco

Otros recursos

v1.2.2

Descargar

vue-monaco

El editor de Monaco es el editor de códigos que Powers VS Code, ahora está disponible como un componente VUE <MonacoEditor> gracias a este proyecto.

Instalar

npm install vue-monaco

O

yarn add vue-monaco

Uso

Use la versión ESM con Webpack

Use Monaco-Editor-Webpack-Plugin:

 // webpack.config.js
const MonacoEditorPlugin = require ( 'monaco-editor-webpack-plugin' )

module . exports = {
  plugins : [
    new MonacoEditorPlugin ( {
      // https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      // Include a subset of languages support
      // Some language extensions like typescript are so huge that may impact build performance
      // e.g. Build full languages support with webpack 4.0 takes over 80 seconds
      // Languages are loaded on demand at runtime
      languages : [ 'javascript' , 'css' , 'html' , 'typescript' ]
    } )
  ]
}

Luego use el componente:

< template >
  < MonacoEditor class = " editor " v-model = " code " language = " javascript " />
</ template >

< script >
import MonacoEditor from ' vue-monaco '

export default {
  components : {
    MonacoEditor
  },

  data () {
    return {
      code : ' const noop = () => {} '
    }
  }
}
</ script >

< style >
.editor {
  width : 600 px ;
  height : 800 px ;
}
</ style >

Usar la versión AMD

 <!DOCTYPE html >
< html >
  < head >
    < meta http-equiv =" X-UA-Compatible " content =" IE=edge " />
    < meta http-equiv =" Content-Type " content =" text/html;charset=utf-8 " />
  </ head >
  < body >
    < div id =" app " > </ div >

    < script src =" https://unpkg.com/vue " > </ script >
    < script src =" https://unpkg.com/vue-monaco " > </ script >
    < script src =" monaco-editor/min/vs/loader.js " > </ script >
    < script >
      require . config ( { paths : { vs : 'monaco-editor/min/vs' } } )

      new Vue ( {
        el : '#app' ,
        template : `
          <monaco-editor
            style="width:800px;height:600px;border:1px solid grey"
            v-model="code" 
            language="javascript" 
            :amdRequire="amdRequire"
          />` ,
        data : {
          code : 'const noop = () => {}'
        } ,
        methods : {
          amdRequire : require
        }
      } )
    </ script >
  </ body >
</ html >

Al cargar Monaco-Editor de un CDN, debe cambiar require.config para verse así:

 require . config ( { paths : { vs : 'http://www.mycdn.com/monaco-editor/min/vs' } } )

// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
// the default worker url location (used when creating WebWorkers). The problem here is that
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script
window . MonacoEnvironment = {
  getWorkerUrl : function ( workerId , label ) {
    return `data:text/javascript;charset=utf-8, ${ encodeURIComponent ( `
        self.MonacoEnvironment = {
          baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
        };
        importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');` ) } `
  }
}

Accesorios

options : El segundo argumento de monaco.editor.create .
value : un atajo para establecer options.value .
theme : un atajo para establecer options.theme .
language : un atajo para establecer options.language .
amdRequire : Carga de monaco-editor utilizando el estilo AMD dado que requiere función.
diffEditor : boolean indica que este es un difeditor, false de forma predeterminada.

Eventos componentes

`editorWillMount`

Parámetros:
- monaco : monaco module

Llamado antes de montar el editor.

`editorDidMount`

Parámetros:
- editor : IStandaloneCodeEditor para editor normal, IStandaloneDiffEditor para el editor de Diff.

Llamado cuando el editor está montado.

`change`

El valor del editor se actualiza.

Parámetros:
- value : Valor del nuevo editor.
- event : El event de onDidChangeModelContent .

Eventos de editor

Puedes escuchar los eventos del editor directamente así:

< template >
  < MonacoEditor v-model = " code " @editorDidMount = " editorDidMount " />
</ template >

< script >
export default {
  methods : {
    editorDidMount ( editor ) {
      // Listen to `scroll` event
      editor . onDidScrollChange ( e => {
        console . log (e)
      })
    }
  },

  data () {
    return {
      code : ' ... '
    }
  }
}
</ script >

Consulte esta página para todos los eventos del editor.

Métodos

getEditor(): IStandaloneCodeEditor : devuelve la instancia del editor.

Use ref para interactuar con el componente MonacoEditor para acceder a los métodos: <MonacoEditor ref="editor" /> , entonces this.$refs.editor.getEditor() estará disponible.

Usa el difeditor

Use el PROP diffEditor para indicar que este es un difeditor, use el accesorio original para establecer el contenido para el editor original, use el valor value para establecer el contenido para el editor modificado.

< MonacoEditor
  language="javascript"
  : diffEditor = " true "
  : value = " code "
  : original = " originalCode "
/>

En este caso, el componente getEditor() devuelve la instancia IStandaloneDiffEditor , mientras puede usar getModifiedEditor() para obtener el editor modificado, que es una instancia IStandaloneCodeEditor .