Download vue monaco - vue monaco Código -fonte Download

vue monaco

Outros recursos

v1.2.2

Baixar

Vue-monaco

O Monaco Editor é o editor de código que pode ver o código, agora está disponível como um componente VUE <MonacoEditor> graças a este projeto.

Instalar

npm install vue-monaco

Ou

yarn add vue-monaco

Uso

Use a versão ESM com 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' ]
    } )
  ]
}

Em seguida, use o 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 >

Use a versão 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 >

Ao carregar o Monaco-Editor de um CDN, você precisa alterar require.config para ficar assim:

 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');` ) } `
  }
}

Adereços

options : o segundo argumento de monaco.editor.create .
value : Um atalho para definir options.value .
theme : um atalho para definir options.theme .
language : um atalho para definir options.language .
amdRequire : Carregar Monaco-editor usando o estilo AMD requer função.
diffEditor : boolean indica que este é um difditor, false por padrão.

Eventos de componentes

`editorWillMount`

Params:
- monaco : monaco module

Chamado antes de montar o editor.

`editorDidMount`

Params:
- editor : IStandaloneCodeEditor PARA EDITOR NORMAL, IStandaloneDiffEditor PARA O DIFF EDITOR.

Chamado quando o editor é montado.

`change`

O valor do editor é atualizado.

Params:
- value : novo valor do editor.
- event : o event de onDidChangeModelContent .

Eventos do editor

Você pode ouvir os eventos do editor diretamente como este:

< 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 os eventos do editor.

Métodos

getEditor(): IStandaloneCodeEditor : Retorne a instância do editor.

Use ref para interagir com o componente MonacoEditor para acessar métodos: <MonacoEditor ref="editor" /> , então this.$refs.editor.getEditor() estará disponível.

Use o difditor

Use diffEditor Prop para indicar que este é um difditor, use o suporte original para definir o conteúdo do editor original, use o Prop value para definir o conteúdo do editor modificado.

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

Nesse caso, o componente getEditor() retorna a instância IStandaloneDiffEditor , enquanto você pode usar getModifiedEditor() para obter o editor modificado, que é uma instância IStandaloneCodeEditor .