Unduh vue monaco - Unduh Kode Sumber vue monaco

vue monaco

Sumber daya lainnya

v1.2.2

Unduh

Vue-Monaco

Editor Monaco adalah editor kode yang Powers vs Code, sekarang tersedia sebagai komponen VUE <MonacoEditor> Berkat proyek ini.

Memasang

npm install vue-monaco

Atau

yarn add vue-monaco

Penggunaan

Gunakan versi ESM dengan Webpack

Gunakan 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' ]
    } )
  ]
}

Kemudian gunakan komponen:

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

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

Saat memuat monako-editor dari CDN, Anda perlu mengubah require.config agar terlihat seperti ini:

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

Alat peraga

options : Argumen kedua monaco.editor.create .
value : Pintasan untuk mengatur options.value Nilai.
theme : Pintasan untuk mengatur options.theme .
language : Pintasan untuk mengatur options.language .
amdRequire : Muat editor monako menggunakan fungsi AMD-style yang diberikan.
diffEditor : boolean menunjukkan bahwa ini adalah difeditor, false secara default.

Acara Komponen

`editorWillMount`

Params:
- Modul monaco : monaco module

Dipanggil sebelum memasang editor.

`editorDidMount`

Params:
- editor : IStandaloneCodeEditor untuk editor normal, IStandaloneDiffEditor untuk editor diff.

Dipanggil saat editor dipasang.

`change`

Nilai editor diperbarui.

Params:
- value : Nilai Editor Baru.
- event : event dari onDidChangeModelContent .

Acara Editor

Anda dapat mendengarkan acara editor secara langsung seperti ini:

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

Lihat halaman ini untuk semua acara editor.

Metode

getEditor(): IStandaloneCodeEditor : Return the Editor instance.

Gunakan ref untuk berinteraksi dengan komponen MonacoEditor untuk mengakses metode: <MonacoEditor ref="editor" /> , lalu this.$refs.editor.getEditor() akan tersedia.

Gunakan difeditor

Gunakan Prop diffEditor untuk menunjukkan bahwa ini adalah difeditor, gunakan prop original untuk mengatur konten untuk editor asli, gunakan value prop untuk mengatur konten untuk editor yang dimodifikasi.

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

Dalam hal ini, getEditor() mengembalikan instance IStandaloneDiffEditor , sementara Anda dapat menggunakan getModifiedEditor() untuk mendapatkan editor yang dimodifikasi yang merupakan instance IStandaloneCodeEditor .