vue monaco editor

Vue-monaco-editor

!!!! Isso não é mantido !!!!

Componente do editor de Mônaco

Baseado Editor de Mônaco React

Configurar

npm install vue-monaco-editor --save

Uso simples de vue

 import MonacoEditor from 'vue-monaco-editor'

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

Adeços de componentes

Opção	Tipo	Padrão	Descrição
linguagem	Corda	javascript
altura	Número/string	100%
largura	Número/string	100%
código	Corda	// code n	Código inicial para mostrar
tema	Corda	vs-dark	VS, HC-Black ou VS-Dark
destacado	Array [objeto]	[{ number: 0, class: ''}]	Linhas para destacar com números e .classes
Changethrottle	Número (MS)	0	codeChange do acelerador emit
srcpath	Corda	""	Veja Webpack Use abaixo
EditorOptions	Objeto	Mesclado com padrões abaixo	Veja Opções do editor de Mônaco

Opções padrão do editor

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

Eventos de componentes

Esses eventos estão disponíveis para o componente pai

Evento	Retorna	Descrição
montado	editor [instância do editor]	Emitido quando o editor montou
Codechange	editor [instância do editor]	Emitido quando o código mudou

Exemplo

Implementação de componentes

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

Pai

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

Por padrão, o Monaco-Editor é carregado de um CDN usando require . Para usar uma cópia local do monaco-editor com Webpack, precisamos expor a dependência em nosso diretório de construção:

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

Adicione isso ao seu webpack.config.js:

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

Em seguida, especifique o caminho do diretório de compilação no srcPath Prop. Consulte src/App.vue para um exemplo.

Uso de dev

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

Edite src/App.vue