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（不建议，会存在问题，下面会交代）：
- 安装依赖，参考（
- 修改webpack.base.conf.js配置文件
vue3（建议使用）：
- 安装依赖，参考（三）
- 修改vue.config.js配置文件
（七）遇到的问题
vue2：挂载插件存在问题，目前还未寻找到合适的解决方法，故建议vue2使用AceEditor编辑器
vue3：
- Cannot find module ‘vs/editor/contrib/inlineHints/inlineHintsController’
monaco-editor和monaco-editor-webpack-plugin版本不匹配
图 对应表
- 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公共组件的方法和属性文章来源：https://www.toymoban.com/news/detail-831426.html
this.$nextTick(_ => {
this.$refs.codeEditor.setEditorValue(newValue) // 调用monaco组件的方法，设置monaco编辑器的值
this.codeEditorShow = this.$refs.codeEditor.editorShow // 调用monaco组件的data，控制monaco编辑器的显隐
})- 效果展示
文章来源地址https://www.toymoban.com/news/detail-831426.html
到了这里，关于代码编辑器之monaco editor的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
