参考
Vue项目中使用高亮编辑器（Monaco）: https://blog.csdn.net/breavo_raw/article/details/88080451
一、monaco安装和插件配置
安装monaco
npm install monaco-editor -S
安装monaco-editor-webpack-plugin
npm install monaco-editor-webpack-plugin -S
配置monaco-editor-webpack-plugin插件
在build/webpack.base.conf.js中新增如下配置
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
plugins: [
new MonacoWebpackPlugin()
]
}
二、组件化
1.template
<template>
<div ref="editorContainer" class="editor-container">
<div ref="editor" class="monaco-editor"></div>
</div>
</template>
script
- 引入
monaco和element-resize-detector
// 高亮编辑器
import * as monaco from 'monaco-editor'
// 监控组件尺寸变化
// 安装: npm install element-resize-detector --save
import elementResizeDetectorMaker from 'element-resize-detector'
- 组件参数定义
export default {
props: {
value: String, // 需要高亮的代码
language: String, // 语言类型
readOnly: Boolean // 是否自读，true：自读，不可修改；false：可以修改
},
data () {
return {
languages: ['apex', 'azcli', 'bat', 'clojure', 'coffee', 'cpp', 'csharp', 'csp', 'css', 'dockerfile', 'fsharp', 'go', 'handlebars', 'html', 'ini', 'java', 'javascript', 'json', 'less', 'lua', 'markdown', 'msdax', 'mysql', 'objective', 'perl', 'pgsql', 'php', 'postiats', 'powerquery', 'powershell', 'pug', 'python', 'r', 'razor', 'redis', 'redshift', 'ruby', 'rust', 'sb', 'scheme', 'scss', 'shell', 'solidity', 'sql', 'st', 'swift', 'typescript', 'vb', 'xml', 'yaml'],
themes: ['vs', 'hc-black', 'vs-dark'],
theme: 'vs-dark', // 编辑器风格
editorOptions: {
selectOnLineNumbers: true,
roundedSelection: false,
readOnly: this.readOnly, // 只读
cursorStyle: 'line', // 光标样式
automaticLayout: false, // 自动布局
glyphMargin: true, // 字形边缘
useTabStops: false,
fontSize: 28, // 字体大小
autoIndent: false // 自动布局
}
}
}
}
- 新建初始化方法
methods: {
initEditor () {
let self = this
self.$refs.editor.innerHTML = ''
self.monacoEditor = monaco.editor.create(self.$refs.editor, {
value: self.currentValue,
language: self.language,
theme: self.theme, // vs, hc-black, or vs-dark
readOnly: self.readOnly,
editorOptions: self.editorOptions
})
self.$emit('onMounted', self.monacoEditor)// 编辑器创建完成回调
self.monacoEditor.onDidChangeModelContent(function (event) { // 编辑器内容changge事件
self.currentValue = self.monacoEditor.getValue()
self.$emit('onCodeChange', self.monacoEditor.getValue(), event)
})
// 自定义键盘事件
self.monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_S, function () {
self.$emit('onCommit', self.monacoEditor.getValue(), self.monacoEditor)
})
self.monacoEditor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyMod.Alt | monaco.KeyCode.KEY_S, function () {
// 自定义快捷操作
})
}
}
- 数据双向绑定
computed: {
// v-model 实现数据双向绑定
currentValue: {
get: function () {
return this.value
},
set: function (value) {
this.$emit('input', value)
}
}
}
- 挂载时初始化以及父元素尺寸监控
mounted () {
this.initEditor()
let erd = elementResizeDetectorMaker()
let that = this
erd.listenTo(that.$refs.editorContainer, function (el) {
that.$nextTick(function () {
// 使echarts尺寸重置
that.initEditor()
})
})
}
- 设置配置修改的方法
methods: {
changeLanguage (val) {
monaco.editor.setModelLanguage(this.monacoEditor.getModel(), val)
},
changeTheme (val) {
monaco.editor.setTheme(val)
},
changeOptions () {
// 修改配置
this.monacoEditor.updateOptions(this.editorOptions)
}
}
- 样式设置，尺寸跟随父元素变化
.editor-container {
height: 100%;
position: relative;
}
.monaco-editor{
height: 100%;
position: relative;
}
三、使用
<template>
<div class="my-editor">
<wb-editor v-model="value" language="python"></wb-editor>
</div>
</template>
import WbEditor from '@/components/wbEditor'
export default {
name: 'index',
components: {WbEditor},
data () {
return {
value: 'map(lambda x, y: x + y, [1, 3, 5, 7, 9], [2, 4, 6, 8, 10])'
}
}
}
四、效果
