代码编辑器之monaco editor

MonacoEditor编辑器

（一）简介

底层vscode开发的一款编辑器，各方面的样式功能基本与vscode一致。

（二）官方文档

Monaco Editor (microsoft.github.io)

（三）安装

安装时两者版本要对应，对应表在后面

npm install monaco-editor@0.30.1 --save-dev
npm install monaco-editor-webpack-plugin@6.0.0 --save-dev

（四）属性

以下是较为常见的属性

value: this.editorValue, // 编辑器初始显示文字
theme: 'CodeSampleTheme', // 官方自带三种主题vs, hc-black, or vs-dark
language: this.lang, // 语言支持自行查阅demo
overviewRulerBorder: false, // 滚动是否有边框
automaticLayout: true, // 自动布局
readOnly: false, // 是否只读
minimap: { // 关闭代码缩略图
  enabled: false // 是否启用预览图
},
lineNumbers: 'off', // 控制行号的显隐
scrollBeyondLastLine: false, // 禁用额外滚动区
scrollbar: {
  verticalScrollbarSize: 4, // 垂直滚动条宽度，默认px
  horizontalScrollbarSize: 4 // 水平滚动条高度
},
contextmenu: false // 禁用右键菜单

(五) 方法

挑选出使用频次较高的

• monaco.editor.setTheme(‘主题色名字’)    设置编辑器主题色
• this.editor.setModel(newModel)    将当前编辑器设置一个新的编辑器，当然在这之前需要声明一个新的编辑器，如下所示

  const newModel = monaco.editor.createModel(
    data, // 值
    this.lang // 语言
  )
  this.editor.setModel(newModel)

• this.editor.getValue()   获取当前编辑器的值

• this.editor.setValue()   设置当前编辑器的值

（六）使用方法

vue2（不建议，会存在问题，下面会交代）：

1. 安装依赖，参考（
2. 修改webpack.base.conf.js配置文件     

vue3（建议使用）：

1. 安装依赖，参考（三）
2. 修改vue.config.js配置文件

（七）遇到的问题

vue2：挂载插件存在问题，目前还未寻找到合适的解决方法，故建议vue2使用AceEditor编辑器

vue3：

1. Cannot find module ‘vs/editor/contrib/inlineHints/inlineHintsController’

monaco-editor和monaco-editor-webpack-plugin版本不匹配

图 对应表

1. Unexpected usage at EditorSimpleWorker.loadForeignModule

（八）代码应用

monacoEditor公共组件封装

<template>
  <div ref="editor" class="editor"></div>
</template>
<script>
import * as monaco from 'monaco-editor'
export default {
  props: {
    // 根据传过来的数据来设置编辑器语言
    lang: {
      type: String,
      default: ''
    },
    // 根据传过来的数据来设置编辑器的值
    val: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      editor: null,
      editorValue: this.val, // 编辑器的值
      editorShow: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      // 初始化编辑器
      this.editor = monaco.editor.create(this.$refs.editor, {
        value: this.editorValue, // 编辑器初始显示文字
        theme: 'CodeSampleTheme', // 官方自带三种主题vs, hc-black, or vs-dark
        language: this.lang, // 语言支持自行查阅demo
        overviewRulerBorder: false, // 滚动是否有边框
        automaticLayout: true, // 自动布局
        readOnly: false, // 是否只读
        minimap: { // 关闭代码缩略图
          enabled: false // 是否启用预览图
        },
        lineNumbers: 'off', // 控制行号的显隐
        scrollBeyondLastLine: false, // 禁用额外滚动区
        scrollbar: {
          verticalScrollbarSize: 4, // 垂直滚动条宽度，默认px
          horizontalScrollbarSize: 4 // 水平滚动条高度
        },
        contextmenu: false // 禁用右键菜单
      })
      // 自定义主题背景色
      monaco.editor.defineTheme('CodeSampleTheme', {
        base: 'vs',
        inherit: true,
        rules: [{ background: '#F6F6F7' }],
        colors: {
          // 相关颜色属性配置
          'editor.background': '#F6F6F7' // 背景色
        }
      })
      // 监听内容变化
      this.editor.onDidChangeModelContent(() => {
      })
      // 监听失去焦点事件
      this.editor.onDidBlurEditorText((e) => {
      })
    },
    // 设置并获取monaco编辑器的值
    setEditorValue (data) {
      const newModel = monaco.editor.createModel(
        data, // 值
        this.lang // 语言
      )
      this.editor.setModel(newModel)
      // 设置自定义的主题背景色
      monaco.editor.setTheme('CodeSampleTheme')
      // 获取monaco编辑器的值
      this.editorValue = this.editor.getValue()
      if (this.editorValue) {
        this.editorShow = true
      }
    }
  }
}
</script>
<style scoped lang="scss">
.editor {
  width: 100%;
  min-height: 100px;
}
</style>

其他组件中引用monacoEditor公共组件

其他组件中调用monacoEditor公共组件的方法和属性

this.$nextTick(_ => {
  this.$refs.codeEditor.setEditorValue(newValue) // 调用monaco组件的方法，设置monaco编辑器的值
  this.codeEditorShow = this.$refs.codeEditor.editorShow // 调用monaco组件的data，控制monaco编辑器的显隐
})

• 效果展示