[monaco editor官网] https://microsoft.github.io/monaco-editor/index.html
[github] https://github.com/Microsoft/monaco-editor

初始化安装

npm install monaco-editor --save
npm install monaco-editor-webpack-plugin --save-dev

webpack.base.conf.js添加配置（或vue.config.js添加配置）

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
...
module.exports = {
 ...
 plugins: [
   ...
   new MonacoWebpackPlugin()
 ]
};

vue.config.js添加配置（或webpack.base.conf.js添加配置）

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
/* editor */
config.plugin('monaceditor')
.use(MonacoWebpackPlugin, [{
   languages: ['json', 'sql', 'javascript', 'typescript'] //项目所使用的语言
}])

常用配置

readOnly：是否已读
minimap：是否显示索引地图
automaticLayout：编辑器自适应布局
formatOnPaste：复制粘贴的时候格式化
lineNumbersMinChars：显示行号的位数，控制行号显示的宽度
更多配置

this.monacoEditor = monaco.editor.create(
          this.$refs.editor,
          {
            value: this.value,//值
            language: this.language || 'sql',//设置语言
            formatOnPaste: true,//复制粘贴的时候格式化
            theme: 'vs-dark',//设置主题
            tabSize: 4,//缩进
            fontFamily: '微软雅黑',//字体
            automaticLayout: true,//编辑器自适应布局
            overviewRulerBorder: false,
            scrollBeyondLastLine: false,//滚动配置，溢出才滚动
            lineNumbersMinChars: 3,//显示行号的位数
            minimap: { enabled: this.minimap }//是否显示索引地图
          }
        )

更新配置

this.monacoEditor.updateOptions({ readOnly: value })

获取值和赋值

//获取值
this.monacoEditor.getValue()
//赋值
this.monacoEditor.setValue(this.value)

格式化

sql语言格式化

引入插件sql-formatter

//安装 npm i sql-formatter
import sqlFormatter from 'sql-formatter'
this.monacoEditor.setValue(sqlFormatter.format(this.value))

json,javascript等语言格式化

// 初始化格式化需要添加setTimeout，格式化才有效；非初始化则不需要
setTimeout(() => {
  this.monacoEditor.getAction('editor.action.formatDocument').run()
}, 500)

失焦时更新值

this.monacoEditor.onDidBlurEditorText(() => {
   this.$emit('update', this.monacoEditor.getValue())
})

监听值变化

this.monacoEditor.onDidChangeModelContent(e => {
   this.$emit('update', this.monacoEditor.getValue()) //使value和其值保持一致
}

智能提示

const suggestions = [{
    label: 'simpleText',//展示
    insertText: 'simpleText'//实际输入到editor
}, {
    label: 'simpleText1',
    insertText: 'simpleText1'
}]
monaco.languages.registerCompletionItemProvider(this.language, {
   provideCompletionItems: () => {
     return { suggestions: suggestions }
  },
  triggerCharacters: [':'] //触发智能提示关键词
 }))

容易出现的bug

智能提示重复
原因：monaco.languages.registerCompletionItemProvider注册时，由于monaco.languages为全局对象，重复实现实例，导致智能提示重复
解决办法：
1.一种语言只注册一次
2.失焦时将suggestions_ = []，聚焦时suggestions_ = suggestions

this.monacoEditor.onDidBlurEditorText(() => {
   this.suggestions_ = [] // 解决多个编辑器suggestions缓存问题
   this.$emit('update', this.monacoEditor.getValue())
})
this.monacoEditor.onDidFocusEditorText(() => {
   this.suggestions_ = this.suggestions // 解决多个编辑器suggestions缓存问题
})

使用json语言，worker.js引用报错
解决办法：可参考应用2，手动引用

vue应用

1.SQL Editor

支持sql语言
支持格式化
支持智能提示
支持placeholder
支持获取选中内容
支持自定义主题
支持监听值变化

2.多语言Editor

支持json,sql,javascript,自定义语言
支持格式化
支持智能提示
支持自定义语言
支持失焦更新值
支持编辑器自适应

manaco editor