vue monaco editor

VUE-MONACO-編輯

!!!!這是不維護的！ ！ ！ ！

摩納哥編輯VUE組件

基於React React摩納哥編輯

設定

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類別的線條
變形	數字（MS）	0	油門codeChange發射
SRCPATH	細繩	""	請參閱下面的WebPack使用
編輯	目的	與下面的默認合併	請參閱摩納哥編輯選項

編輯默認選項

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

Webpack使用

默認情況下，摩納哥編輯器是從CDN上加載的，使用require 。要使用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