vue2.x中monaco-editor的使用说明

目录 vue2中使用monaco-editor 安装 配置 创建MonacoEditor公共组件 使用vue-monaco-editor遇到的坑 编辑器重复加载上次编辑器中的内容,不会被新的内容替代 编辑器editorOptions上的配置无法生效

vue2中使用monaco-editor

安装

注意两个库的版本指定

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

配置

vue.config.js中配置

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

创建MonacoEditor公共组件

<template>
? <div ref="editorContainer" class="editor"></div>
</template>

<script>
import * as monaco from 'monaco-editor';
export default {
? name: 'MonacoEditor',
? data() {
? ? return {
? ? ? code: '',
? ? ? editor: null
? ? }
? },
? mounted() {
? ? this.init()
? },
? methods: {
? ? init() {
? ? ? // 初始化编辑器
? ? ? this.editor = monaco.editor.create(this.$refs.editorContainer, {
? ? ? ? value: this.code,
? ? ? ? language: 'javascript',
? ? ? ? tabSize: 2,
? ? ? ? scrollBeyondLastLine: false,
? ? ? ? automaticLayout: true, // 自动布局
? ? ? ? readOnly: false
? ? ? })
? ? ? console.log(this.editor)
? ? ? // 监听内容变化
? ? ? this.editor.onDidChangeModelContent(() => {
? ? ? })
? ? ? // 监听失去焦点事件
? ? ? this.editor.onDidBlurEditorText((e) => {
? ? ? ? console.log(e)
? ? ? });
? ? },
? ? // 获取编辑框内容
? ? getCodeContext() {
? ? ? return this.editor.getValue()
? ? },
? ? // 自动格式化代码
? ? format() {
? ? ? this.editor.trigger('anything', 'editor.action.formatDocument')
? ? ? // 或者
? ? ? // this.editor.getAction(['editor.action.formatDocument']).run()
? ? },
? ? changeEditor() {
? ? ? if (this.editor === null) {
? ? ? ? this.init()
? ? ? }
? ? ? const oldModel = this.editor.getModel()
? ? ? const newModel = monaco.editor.createModel(
? ? ? ? this.code,
? ? ? ? 'javascript'
? ? ? )
? ? ? if (oldModel) {
? ? ? ? oldModel.dispose()
? ? ? }
? ? ? this.editor.setModel(newModel)
? ? }
? }
}
</script>

<style scoped>
.editor {
? width: 100%;
? min-height: 400px;
}
</style>

父组件中使用

<template>
? <div>
? ? <monaco-editor></monaco-editor>
? </div>
</template>

<script>
import MonacoEditor from '@/components/MonacoEditor'
export default {
? name: 'Test6',
? components: {
? ? MonacoEditor
? }
}
</script>

使用vue-monaco-editor遇到的坑

编辑器重复加载上次编辑器中的内容,不会被新的内容替代

直接上代码

给MonacoEditor加上属性key

?? ? ?<MonacoEditor
? ? ? ? width="100%"
? ? ? ? height="537"
? ? ? ? :key="randomkey"
? ? ? ? language="html"
? ? ? ? theme="vs-dark"
? ? ? ? :code="code"
? ? ? >
? ? ? </MonacoEditor>

每次重新给code赋值时，就重新获取一次随机数赋值给key

data() {
? ? return {
? ? ? randomkey: 123,
? ? }
? }
methods: {
?? ?// 每次重新给code赋值时，就重新调用一下下面这个方法
?? ?createRandomkey(){
? ? ? this.randomkey = Math.floor(Math.random()*(10,1000000012313))
? ? },
}

编辑器editorOptions上的配置无法生效

<MonacoEditor
? ? ? ? width="100%"
? ? ? ? height="537"
? ? ? ? :key="randomkey"
? ? ? ? language="html"
? ? ? ? theme="vs-dark"
? ? ? ? :code="code"
? ? ? ? :editorOptions="options"
? ? ? ? @mounted="seeOnMounted"
>
// 在data中设置无法生效
options: {
? ? ?readOnly: true
},

可以在@mounted方法中根据editor进行设置

seeOnMounted(editor) {
? ? ? this.seeEditor = editor
? ? ? this.seeEditor.updateOptions({
? ? ? ? readOnly: true, //是否只读
? ? ? })
? ? },

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于vue2.x中monaco-editor的使用说明的详细内容...