vue monaco editor

Vue-Monaco-Editor

!!!! Das ist nicht beibehalten !!!!

Monaco Editor Vue -Komponente

Basierend auf React Monaco Editor

Aufstellen

npm install vue-monaco-editor --save

Einfache Vue -Verwendung

 import MonacoEditor from 'vue-monaco-editor'

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

Komponentenquellen

Option	Typ	Standard	Beschreibung
Sprache	Saite	javascript
Höhe	Nummer/Zeichenfolge	100%
Breite	Nummer/Zeichenfolge	100%
Code	Saite	// code n	Erstcode zu zeigen
Thema	Saite	vs-dark	VS, HC-Black oder VS-Dark
hervorgehoben	Array [Objekt]	[{ number: 0, class: ''}]	Zeilen, die mit Zahlen und .classes hervorgehoben werden sollen
Changethrottle	Nummer (MS)	0	Gascodechange codeChange
srcPath	Saite	""	Siehe Webpack -Verwendung unten
Editoroptionen	Objekt	Fusioniert mit Standardeinstellungen unten	Siehe Monaco -Editoroptionen

Editor -Standardoptionen

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

Komponentenereignisse

Diese Veranstaltungen stehen der Elternkomponente zur Verfügung

Ereignis	Zurück	Beschreibung
montiert	editor [Editor Instance]	Emittiert, als der Herausgeber montiert ist
Codechange	editor [Editor Instance]	Emittiert, wenn sich der Code geändert hat

Beispiel

Komponentenimplementierung

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

Elternteil

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

Webpack -Nutzung

Standardmäßig wird Monaco-Eduitor aus einem asynrnigen CDN- require geladen. Um eine lokale Kopie von monaco-editor mit Webpack zu verwenden, müssen wir die Abhängigkeit in unserem Build-Verzeichnis aufdecken:

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

Fügen Sie dies zu Ihrem webpack.config.js hinzu:

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

Geben Sie dann den Build -Verzeichnispfad in der srcPath -Prop. Ein Beispiel finden Sie src/App.vue .

Dev Verwendung

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

Bearbeiten Sie src/App.vue