@lianpf/monaco-editor-vue v1.1.0

@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 属性, 组件则以受控模式运行。否则，它是非受控模式。

options

hoverOption

tips Item

Events & Methods

更多请参考 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>