vue monaco editor

Vue-Monaco-Editor

!!!!これは維持されていません!!!!

Monaco Editor Vueコンポーネント

React Monaco Editorに基づいています

設定

npm install vue-monaco-editor --save

簡単なVUE使用

 import MonacoEditor from 'vue-monaco-editor'

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

コンポーネントの小道具

オプション	タイプ	デフォルト	説明
言語	弦	javascript
身長	番号/文字列	100%
幅	番号/文字列	100%
コード	弦	// code n	表示する初期コード
テーマ	弦	vs-dark	VS、HC-Black、またはVS-Dark
強調表示されました	配列[オブジェクト]	[{ number: 0, class: ''}]	数字と.classesで強調表示する行
changethrottle	番号（MS）	0	スロットルcodeChangeエミット
srcpath	弦	""	以下のWebpackの使用を参照してください
編集	物体	以下のデフォルトとマージされました	Monaco Editor Optionsを参照してください

エディターのデフォルトオプション

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

コンポーネントイベント

これらのイベントは、親コンポーネントが利用できます

イベント	返品	説明
取り付けられています	editor [エディターインスタンス]	編集者がマウントされたときに放出されます
CodeChange	editor [エディターインスタンス]	コードが変更されたときに放出されます

例

コンポーネントの実装

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

親

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

Webパックの使用

デフォルトでは、Monaco-Editorは、 requireを使用して非同期にCDNからロードされます。 Webpackを使用してmonaco-editorのローカルコピーを使用するには、ビルドディレクトリの依存関係を公開する必要があります。

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

これをwebpack.config.jsに追加します：

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

次に、 srcPath Prop。のビルドディレクトリパスを指定します。例については、 src/App.vueを参照してください。

開発

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

src/App.vueを編集します