vue monaco editor

Vue-Monaco-Editor

!!!! Ini tidak dipertahankan !!!!

Komponen editor monako

Berdasarkan editor React Monaco

Pengaturan

npm install vue-monaco-editor --save

Penggunaan Vue Sederhana

 import MonacoEditor from 'vue-monaco-editor'

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

Alat peraga komponen

Pilihan	Jenis	Bawaan	Keterangan
bahasa	Rangkaian	javascript
tinggi	Nomor/String	100%
lebar	Nomor/String	100%
kode	Rangkaian	// code n	Kode awal untuk ditampilkan
tema	Rangkaian	vs-dark	vs, hc-black, atau vs-dark
disorot	Array [objek]	[{ number: 0, class: ''}]	Baris untuk disorot dengan angka dan .classes
changethrottle	Nomor (MS)	0	Throttle codeChange memancarkan
srcpath	Rangkaian	""	Lihat Gunakan Webpack Di Bawah
Editoropsi	Obyek	Digabungkan dengan default di bawah ini	Lihat Opsi Editor Monako

Opsi default editor

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

Acara Komponen

Acara ini tersedia untuk komponen induk

Peristiwa	Kembali	Keterangan
dipasang	editor [instance editor]	Dipancarkan saat editor telah meningkat
Codechange	editor [instance editor]	Dipancarkan saat kode telah berubah

Contoh

Implementasi Komponen

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

Induk

 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 ( ) ) ;
    }
  }
} ; 

Penggunaan webpack

Secara default, monako-editor dimuat dari CDN secara asyncron menggunakan require . Untuk menggunakan salinan lokal monaco-editor dengan Webpack, kita perlu mengekspos ketergantungan di direktori build kami:

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

Tambahkan ini ke webpack.config.js Anda:

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

Kemudian, tentukan jalur Direktori Build di srcPath Prop. Lihat src/App.vue Sebagai contoh.

Penggunaan dev

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

Edit src/App.vue