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