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 [email protected] -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 | — | — |

事件

| 事件名 | 说明 | 参数 | | ------ | ---------- | ------------ | | change | 改变时触发 | value, event |

方法

| 事件名 | 说明 | 参数 | | ------ | ---------- | ------------ | | destroyMonaco | 组件再离开时会自动销毁，此方法提供手动销毁 | — |

插槽

| 参数 | 说明 | | ------ | -------- | | header | 头部插槽 | | footer | 底部插槽 |