monaco-editor基本使用

前言

公司项目需要代码编辑器，多方参考之后用了monaco-editor。

一、monaco-editor是什么？

Monaco Editor 是微软开源的基于 VS Code 的代码编辑器，运行在浏览器环境中。

二、使用步骤

1.npm下载插件

//我下载的版本
npm i monaco-editor@0.28.1
npm i monaco-editor-webpack-plugin@4.2.0

2. vue.config.js配置

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {chainWebpack: (config) => {config.plugin('monaco').use(new MonacoWebpackPlugin({languages: ['javascript', 'css', 'html', 'typescript', 'json','sql','java']}))}
}

3.封装为vue组件

<template><div class="myEditor"><div ref="monacocontainer" class="container" :id="id"></div></div>
</template>
<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
export default {props: {codes: {type: [String,Object],default: function () {return ''}},
//可填的几种语言需要在vue.config.js先配置language: {type: String,default: function () {return 'javascript'}},editorOptions: {type: Object,default: function () {return {foldingStrategy: 'indentation', // 代码可分小段折叠selectOnLineNumbers: true,roundedSelection: false,readOnly: false,        // 只读cursorStyle: 'line',        // 光标样式automaticLayout: false, // 自动布局glyphMargin: true,  // 字形边缘useTabStops: false,fontSize: 28,       // 字体大小tabSize: 2, // tab 缩进长度autoIndent: true, // 自动布局minimap: {enabled: false, // 不要小地图},}}},theme: {type: String,default: function () {return 'vs'}},id: {type: Number,default: function () {return 0}}},data() {return {// theme: 'vs',codesCopy: null // 内容备份}},mounted() {this.initEditor()},methods: {initEditor() {let editorOptions=this.editorOptionslet base= {value: this.codesCopy || this.codes,language: this.language,theme: this.theme,}Object.assign(editorOptions, base)this.monacoEditor = monaco.editor.create(document.getElementById(this.id),editorOptions)this.$emit('mounted', this.monacoEditor)this.monacoEditor.onDidChangeModelContent((event) => {this.codesCopy = this.monacoEditor.getValue()this.$emit('codeChange', this.monacoEditor.getValue(), event)})}}
}
</script>
<style scoped>
.container {min-height: 330px;text-align: left;
}
</style>

4.页面引入

<template><MonacoEditor:codes="code":editorOptions="Options"theme="vs"language="json":key="randomkey"@mounted="onMounted":id="randomkey"></MonacoEditor>
</template>
//地址是封装为vue组件的页面地址
import MonacoEditor from "@/components/right/components/monacoEditor.vue";
export default {components: {MonacoEditor,},
data() {return {code:null,randomkey: 0,editor: null,Options: {selectOnLineNumbers: true,roundedSelection: false,readOnly: false,automaticLayout: true,glyphMargin: true,showFoldingControls: "always",formatOnPaste: true,formatOnType: true,folding: true,},}
},
methods: {
onMounted(val) {this.editor = val;},
}
}//每次数据更新前，先将randomkey设置为随机数
this.randomkey = Math.floor(Math.random() * (10, 1000000012313));
//给代码编辑赋值，data为数据，如果需要是字符串则需要JSON.parse；若要设置为空则改为{}
this.code = JSON.stringify(data, null, "\t");