vue monaco editor

vue-monaco-editor

! Esto no se mantiene!

Componente de vue editor de monaco

Basado en el editor React Monaco

Configuración

npm install vue-monaco-editor --save

Uso simple de Vue

 import MonacoEditor from 'vue-monaco-editor'

// use in component
export default {
  components : {
    MonacoEditor
  }
} 

Accesorios de componentes

Opción	Tipo	Por defecto	Descripción
idioma	Cadena	javascript
altura	Número/cadena	100%
ancho	Número/cadena	100%
código	Cadena	// code n	Código inicial para mostrar
tema	Cadena	vs-dark	VS, HC-Black o Vs-Dark
destacado	Matriz [objeto]	[{ number: 0, class: ''}]	Líneas para resaltar con números y .classes
cambio	Número (MS)	0	EMITO codeChange DEL ALTACIÓN
srcpath	Cadena	""	ver Webpack Use a continuación
editorOptions	Objeto	Fusionado con los valores predeterminados a continuación	Ver opciones de editor de Mónaco

Opciones predeterminadas del editor

defaults: {
  selectOnLineNumbers : true ,
  roundedSelection : false ,
  readOnly : false ,
  cursorStyle : 'line' ,
  automaticLayout : false ,
  glyphMargin : true
} 

Eventos componentes

Estos eventos están disponibles para el componente principal

Evento	Devolución	Descripción
montado	editor [instancia del editor]	Emitido cuando el editor ha montado
CodeChange	editor [instancia del editor]	Emitido cuando el código ha cambiado

Ejemplo

Implementación de componentes

< MonacoEditor
    height="600"
    language="typescript"
    : code = " code "
    : editorOptions = " options "
    @ mounted = " onMounted "
    @ codeChange = " onCodeChange "
    >
</ MonacoEditor >

Padre

 module . exports = {
  components : {
    Monaco
  } ,
  data ( ) {
    return {
      code : '// Type away! n' ,
      options : {
        selectOnLineNumbers : false
      }
    } ;
  } ,
  methods : {
    onMounted ( editor ) {
      this . editor = editor ;
    } ,
    onCodeChange ( editor ) {
      console . log ( editor . getValue ( ) ) ;
    }
  }
} ; 

Uso de Webpack

Por defecto, el monaco-editor se carga a partir de un CDN de forma asincronosa utilizando require . Para usar una copia local de monaco-editor con Webpack, necesitamos exponer la dependencia en nuestro directorio de compilación:

npm install copy-webpack-plugin --save-dev

Agregue esto a su webpack.config.js:

 const CopyWebpackPlugin = require ( 'copy-webpack-plugin' ) ;
module . exports = {
  plugins : [
    new CopyWebpackPlugin ( [
      {
        from : 'node_modules/monaco-editor/min/vs' ,
        to : 'vs' ,
      }
    ] )
  ]
} ;

Luego, especifique la ruta del directorio de compilación en el PROP srcPath . Consulte src/App.vue para un ejemplo.

Uso de desarrollo

 git clone [this repo] .
npm install
npm run dev

Editar src/App.vue