vue monaco editor

vue-monaco-éditeur

!!!! Ce n'est pas maintenu !!!!

Composant de monaco éditeur Vue

Basé sur React Monaco Editor

Installation

npm install vue-monaco-editor --save

Utilisation simple de Vue

 import MonacoEditor from 'vue-monaco-editor'

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

Accessoires composants

Option	Taper	Défaut	Description
langue	Chaîne	javascript
hauteur	Numéro / chaîne	100%
largeur	Numéro / chaîne	100%
code	Chaîne	// code n	Code initial à afficher
thème	Chaîne	vs-dark	vs, hc-noir ou vs-dark
mis en évidence	Array [objet]	[{ number: 0, class: ''}]	Lignes à mettre en surbrillance avec les nombres et .classes
vomir	Numéro (MS)	0	Émetteur codeChange de l'accélérateur
srcpath	Chaîne	""	Voir WebPack Utilisation ci-dessous
EditorOptions	Objet	Fusionné avec des valeurs par défaut ci-dessous	Voir les options de l'éditeur Monaco

Options par défaut de l'éditeur

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

Événements composants

Ces événements sont disponibles pour le composant parent

Événement	Rendements	Description
monté	editor [instance éditeur]	Émis lorsque l'éditeur est monté
CodeChange	editor [instance éditeur]	Émis lorsque le code a changé

Exemple

Implémentation des composants

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

Mère

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

Utilisation de webpack

Par défaut, monaco-éditeur est chargé à partir d'un CDN en utilisant require . Pour utiliser une copie locale de monaco-editor avec WebPack, nous devons exposer la dépendance dans notre répertoire de construction:

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

Ajoutez ceci à votre webpack.config.js:

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

Ensuite, spécifiez le chemin du répertoire de build dans l'hélice srcPath . Voir src/App.vue pour un exemple.

Utilisation du développement

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

Modifier src/App.vue