vue monaco Download - vue monaco Source Téléchargement

vue monaco

Autres ressources

v1.2.2

Télécharger

vue-monaco

Monaco Editor est l'éditeur de code qui alimente le code, maintenant il est disponible en tant que composant Vue <MonacoEditor> grâce à ce projet.

Installer

npm install vue-monaco

Ou

yarn add vue-monaco

Usage

Utilisez la version ESM avec WebPack

Utilisez le monaco-éditeur-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' ]
    } )
  ]
}

Puis utilisez le composant:

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

Utiliser la version 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 >

Lors du chargement de monaco-éditeur à partir d'un CDN, vous devez modifier require.config pour ressembler à ceci:

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

Accessoires

options : Le deuxième argument de monaco.editor.create .
value : un raccourci pour définir options.value .
theme : un raccourci pour définir options.theme .
language : un raccourci pour définir options.language Language.
amdRequire : Charge monaco-éditeur utilisant la fonction de style AMD donné.
diffEditor : boolean indique qu'il s'agit d'un diffeditor, false par défaut.

Événements composants

`editorWillMount`

Paramètres:
- monaco : monaco module

Appelé avant de monter l'éditeur.

`editorDidMount`

Paramètres:
- editor : IStandaloneCodeEditor pour l'éditeur normal, IStandaloneDiffEditor pour l'éditeur Diff.

Appelé lorsque l'éditeur est monté.

`change`

La valeur de l'éditeur est mise à jour.

Paramètres:
- value : Nouvelle valeur de l'éditeur.
- event : L' event d' onDidChangeModelContent .

Événements de rédacteur

Vous pouvez écouter directement les événements de l'éditeur comme ceci:

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

Reportez-vous à cette page pour tous les événements de l'éditeur.

Méthodes

getEditor(): IStandaloneCodeEditor : renvoyez l'instance de l'éditeur.

Utilisez ref pour interagir avec le composant MonacoEditor afin d'accéder aux méthodes: <MonacoEditor ref="editor" /> , alors this.$refs.editor.getEditor() sera disponible.

Utilisez le diffeditor

Utilisez diffEditor Prop pour indiquer qu'il s'agit d'un DIFFEDITOR, utilisez l'hélice original pour définir le contenu de l'éditeur d'origine, utilisez value Prop pour définir le contenu de l'éditeur modifié.

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

Dans ce cas, le getEditor() du composant renvoie l'instance IStandaloneDiffEditor , tandis que vous pouvez utiliser getModifiedEditor() pour obtenir l'éditeur modifié qui est une instance IStandaloneCodeEditor .