vue monaco Download - vue monaco Quellcode Download

vue monaco

Andere Ressourcen

v1.2.2

Herunterladen

Vue-Monaco

Monaco Editor ist der Code -Editor, der VS Code macht, jetzt als Vue -Komponente <MonacoEditor> dank dieses Projekts verfügbar.

Installieren

npm install vue-monaco

Oder

yarn add vue-monaco

Verwendung

Verwenden Sie die ESM -Version mit WebPack

Verwenden Sie Monaco-Eduitor-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' ]
    } )
  ]
}

Verwenden Sie dann die Komponente:

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

Verwenden Sie die AMD -Version

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

Beim Laden von Monaco-Editor von einem CDN müssen Sie die Forderung ändern. require.config , um so auszusehen:

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

Requisiten

options : Das zweite Argument von monaco.editor.create .
value : Eine Abkürzung zum Einstellen options.value .
theme : Eine Abkürzung zum Set options.theme .
language : Eine Verknüpfung zum Einstellen options.language .
amdRequire : Last Monaco-Eduitor unter Verwendung des gegebenen AMD-Stils erfordert Funktion.
diffEditor : boolean zeigt an, dass dies ein Diffeditor ist, der standardmäßig false .

Komponentenereignisse

`editorWillMount`

Parameter:
- monaco : monaco module

Angerufen, bevor er den Herausgeber montiert.

`editorDidMount`

Parameter:
- editor : IStandaloneCodeEditor für den normalen Redakteur, IStandaloneDiffEditor für Diff -Herausgeber.

Angerufen, wenn der Herausgeber montiert ist.

`change`

Der Editorwert wird aktualisiert.

Parameter:
- value : neuer Editorwert.
- event : Die event von onDidChangeModelContent .

Herausgeberereignisse

Sie können die Editor -Ereignisse direkt wie folgt anhören:

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

In dieser Seite finden Sie alle Editor -Ereignisse.

Methoden

getEditor(): IStandaloneCodeEditor : Return die Redakteurinstanz.

Verwenden Sie ref , um mit der MonacoEditor -Komponente zu interagieren, um auf Methoden zuzugreifen: <MonacoEditor ref="editor" /> , dann this.$refs.editor.getEditor()

Verwenden Sie den Diffeditor

Verwenden Sie diffEditor -Prop, um anzuzeigen, dass dies ein Differitor ist. Verwenden Sie original -Prop, um den Inhalt für den ursprünglichen Editor festzulegen. value Sie den Inhalt für den geänderten Editor.

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

In diesem Fall gibt der getEditor() der Komponente die Instanz IStandaloneDiffEditor zurück, während Sie getModifiedEditor() verwenden können, um den modifizierten Editor zu erhalten, der eine Instanz IStandaloneCodeEditor ist.