@lianpf/monaco-editor-vue

Monaco Editor for Vue.

Installation

npm install @lianpf/monaco-editor-vue --save
npm install monaco-editor-webpack-plugin --save

Using with Webpack or Vue CLI

添加 Monaco Webpack plugin monaco-editor-webpack-plugin 到你项目中的 webpack.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
  plugins: [
    new MonacoWebpackPlugin({
      // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      languages: ['javascript']
    })
  ]
}

如果你项目中使用的是 Vue CLI 而不是webpack, 你需要配置 vue.config.js:

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  chainWebpack: config => {
    config.plugin('monaco-editor').use(MonacoWebpackPlugin, [
      {
        // Languages are loaded on demand at runtime
        languages: ['json', 'javascript', 'html', 'xml']
      }
    ])
  }
}

基本用法

<template>
  <div id="editor">
    <monaco-editor
      v-model="value"
      width="800"
      height="500"
      theme="vs-dark"
      language="json"
      :options="options"
      @change="onChange"
    ></monaco-editor>
  </div>
</template>

<script>
import MonacoEditor from 'monaco-editor-vue'
export default {
  name: 'Editor',
  components: {
    MonacoEditor
  },
  data() {
    const defaultValue = [
      '{',
      '\t"type": "form",',
      '\t"title": "表单",',
      '\t"children":',
      '\t\t{',
      '\t\t\t"label": "文本框1",',
      '\t\t\t"type": "text1",',
      '\t\t\t"name": "text1"',
      '\t\t},',
      '\t"controls": [',
      '\t\t{',
      '\t\t\t"label": "文本框",',
      '\t\t\t"type": "text",',
      '\t\t\t"name": "text"',
      '\t\t},',
      '\t\t{',
      '\t\t\t"type": "select",',
      '\t\t\t"label": "选项",',
      '\t\t\t"name": "select",',
      '\t\t\t"options": [',
      '\t\t\t\t{',
      '\t\t\t\t\t"label": "选项A",',
      '\t\t\t\t\t"value": "A"',
      '\t\t\t\t},',
      '\t\t\t\t{',
      '\t\t\t\t\t"label": "选项B",',
      '\t\t\t\t\t"value": "B"',
      '\t\t\t\t}',
      '\t\t\t]',
      '\t\t}',
      '\t]',
      '}'
    ]
    return {
      defaultValue: defaultValue,
      value: defaultValue.join('\n'),
      options: {
        //Monaco Editor Options
      }
    }
  },
  methods: {
    onChange(value) {
      console.log(value);
    }
  }
}
</script>

Properties

如果你指定 value 属性, 组件则以受控模式运行。否则，它是非受控模式。

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------------------------------ | ------------- | --------------------------------------------------------- | ------- | | value | editor 中可以自动创建 model 的值(富文本字符串) | string | - | - | | width | editor 的宽度 | number | - | 100% | | height | editor 的高度 | number | - | 100% | | language | 编辑器中自动创建模型的初始语言 | string | 'javascript'、'json'、'html'等| 'javascript' | | theme | 编辑器的主题 | string | 'vs'、'vs-dark'、'hc-black' | 'vs' | | options | 基础功能外其他配置(可忽略) | object | - | - | | hoverOption | editor 悬停 tips(可忽略) | object | - | { show: false, tips: []} | | diffEditor | 是否启用 diff editor | boolean | - | false | | original | editor 中可以自动创建 original model 的值(可忽略) | string | - | - |

options

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------------------------------ | ------------- | --------------------------------------------------------- | ------- | | readOnly | 编辑器是否设置只读状态 | boolean | - | false | | 其他配置 | 参考 Monaco interface IEditorConstructionOptions. | - | - |

hoverOption

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------------------------------ | ------------- | --------------------------------------------------------- | ------- | | show | 是否展示悬停tips | boolean | - | false | | tips | 悬停tips config (Json 数组) | object[] | - | []

tips Item

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------------------------------ | ------------- | --------------------------------------------------------- | ------- | | lineNumber | 需要悬停 tip 的行数 | number | - | - | | text | 悬停 tip 文案 | string | - | -

Events & Methods

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------------- | ------------------------------------------------------ | ------------- | --------------------------------------------------------- | ------- | | editorBeforeMount(monaco) | 在 editor 加载安装好之前调用的 function (类似于 Vue 中的 beforeMount) | function | - | - | | editorMounted(editor, monaco) | 在 editor 加载安装好后调用的 function (类似于 Vue 中的 mounted) | function | - | - | | change(newValue, event) | 当前 model 的内容发生更改时所触发的事件 | function | - | - |

更多请参考 Monaco interface IEditor.

Use multiple themes

Monaco only supports one theme.

特殊功能示例

1、受控模式：默认创建 editor 中 model

关键参数：value: String

example: jsonCode. 以language='json'为例

// 默认初始值
var jsonCode = [
  '{',
  '\t"type": "form",',
  '\t"title": "表单",',
  '\t"controls": [',
  '\t\t{',
  '\t\t\t"label": "文本框",',
  '\t\t\t"type": "text",',
  '\t\t\t"name": "text"',
  '\t\t},',
  '\t\t{',
  '\t\t\t"type": "select",',
  '\t\t\t"label": "选项",',
  '\t\t\t"name": "select",',
  '\t\t\t"options": [',
  '\t\t\t\t{',
  '\t\t\t\t\t"label": "选项A",',
  '\t\t\t\t\t"value": "A"',
  '\t\t\t\t},',
  '\t\t\t\t{',
  '\t\t\t\t\t"label": "选项B",',
  '\t\t\t\t\t"value": "B"',
  '\t\t\t\t}',
  '\t\t\t]',
  '\t\t}',
  '\t]',
  '}'
].join('\n');

// 编辑器视觉展示格式
{
	"type": "form",
	"title": "表单",
	"controls": [
		{
			"label": "文本框",
			"type": "text",
			"name": "text"
		},
		{
			"type": "select",
			"label": "选项",
			"name": "select",
			"options": [
				{
					"label": "选项A",
					"value": "A"
				},
				{
					"label": "选项B",
					"value": "B"
				}
			]
		}
	]
}

2、悬停提示：editor 内 hover tip

关键参数：hoverOption: Object

example: hoverOptionExample

hoverOptionExample: {
  show: true, // 展示
  tips: [
    {
      lineNumber: 2, // 要展示 tip 的行
      text: 'Here is the tip on the 2 line' // 第2行所展示tip的内容
    },
    {
      lineNumber: 3,
      text: 'Here is the tip on the 3 line'
    },
    {
      lineNumber: 4,
      text: 'Here is the tip on the 4 line'
    }
  ]
}

3、Use the diff editor

关键参数：

• diffEditor: boolean
• original: object

<template>
  <div id="editor">
    <monaco-editor
      :diffEditor="true"
      original="..."
      // ...
    ></monaco-editor>
  </div>
</template>