Cafe-monaco NPM

Cafe-Monaco

😊 基于 Vue 2.0 开发；
👍 使用 Monaco Editor 0.30.0
😘 支持代码对比；

线上例子：Demo

安装

NPM

npm i cafe-monaco -S

Webpack 打包

使用 monaco-editor-webpack-plugin

由于组件使用 monaco-editor 的版本为 0.30.0，所以请安装 6.0.0版本的 monaco-editor-webpack-plugin。

npm i monaco-editor-webpack-plugin@6.0.0 -D

webpack.config.js 配置：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      languages: ['abap', 'apex', 'azcli', 'bat', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'graphql', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'kotlin', 'less', 'lua', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sql', 'st', 'swift', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']
    })
  ]
}

vue.config.js 配置：

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
  chainWebpack: config => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        languages: ['abap', 'apex', 'azcli', 'bat', 'cameligo', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'graphql', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'kotlin', 'less', 'lua', 'markdown', 'mips', 'msdax', 'mysql', 'objective-c', 'pascal', 'pascaligo', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sophia', 'sql', 'st', 'swift', 'tcl', 'twig', 'typescript', 'vb', 'xml', 'yaml']
      }
    ])
  }
}

全局使用

// main.js
import Vue from 'vue'
import App from './App.vue'
// ...
import cafeMonaco from 'cafe-monaco'
Vue.use(cafeMonaco)
// ...
new Vue({
  el: '#app',
  render: h => h(App)
})

<template>
  <cafe-monaco v-model="code" height="800px" width="800px"></cafe-monaco>
</template>

<script>
  export default {
    data() {
      return {
        code:'',
      };
    },
  }
</script>

局部引入

基本用法

<template>
  <monaco v-model="code" height="800px" width="800px"></monaco>
</template>

<script>
  import monaco from 'cafe-monaco'
  export default {
    data() {
      return {
        code:'',
      };
    },
    components:{
      monaco
    }
  }
</script>

代码对比

设置 diff-editor 开启对比模式，需要定义 original。

<template>
  <monaco
    v-model="code"
    :diff-editor="true"
    :original="original"
    :width="500"
    :height="300"
    language="javascript"
  ></monaco>
</template>

<script>
  import monaco from 'cafe-monaco'
  export default {
    data() {
      return {
        code: 'aaa',
        original: 'aaa',
      };
    },
  };
</script>

属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	String	—	—
width	编辑器宽度	String, Number	—	100%
height	编辑器高度	String, Number	—	100%
theme	主题	String	—	vs
language	语言	String	—	html
diff-editor	代码对比模式	Boolean	—	false
original	对比代码，在开启 `diff-editor` 后可以使用	String	—
options	编辑器配置	Object	可查看：Monaco Editor Options	—
read-only	只读模式	Boolean	—	false
minimap	代码地图模式	Boolean	—	true
editorBeforeMount	编辑器初始化前回调，参数 `monaco`	Function	—	—
editorMounted	编辑器初始化后回调，参数 `editor`,`monaco`	Function	—	—