vue 代码编辑器monaco-editor使用

背景描述

接之前我写的那篇 在浏览器上使用JavaScript代码与以太坊RPC通讯 文章。因为我需要一个编辑器来写JavaScript。首先我找到了CodeMirror,然后我还找到了他用vue封装好的vue-codemirror,这是他的一些Demo展示。用了一段时间之后,感觉不是很顺手,而且由于Chrome浏览器的插件影响,导致我按回车键回换行两次,我当时认为这是CodeMirror在Chrome浏览器上的bug。因为当时我尝试用Edge浏览器没有发生这个问题。于是促使我去找另外的一个网页版代码编辑器,经过一番搜索,找到了微软的这个编辑器,因为我一直用Visual Studio Code做我的编辑器,先上图:

真是熟悉的感觉熟悉的味道啊!据说Visual Studio Code就是用的这个代码编辑器。如果你想体验,请去官网。支持主流语言,能跳转,格式化代码……反正 Visual Studio Code 上有的基本都有。

使用遇到的一些坑

重点来了,我也是折腾了一晚上才弄好。我是使用了一个Vue封装好的vue-monaco模块。首先按照他的步骤安装npm install vue-monaco好模块。然后这样使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<template>
<monaco-editor
class="editor"
v-model="code"
language="javascript">
</monaco-editor>
</template>

<script>
import MonacoEditor from 'vue-monaco'

export default {
components: {
MonacoEditor
},

data() {
return {
code: 'const noop = () => {}'
}
}
}
</script>

<style>
.editor {
width: 600px;
height: 800px;
}
</style>

结果出现了下面一系列的错误:
无法粘贴代码。主要表现在比如我在某些地方将代码复制好,没法粘贴到编辑器里面。解决方式在项目的根目录建一个vue.config.js文件,然后粘贴如下代码:

1
2
3
4
5
6
7
module.exports = {
configureWebpack: {
node: {
process: true,
}
}
}

浏览器console 报错:Cannot find module vs/language/typescript/tsWorker at webpackEmptyContext。表现功能不能正常使用,比如不能跳转到定义。解决方式是引入webpack,接上面的vue.config.js文件,全部内容如下:

1
2
3
4
5
6
7
8
9
10
11
const MonocoEditorPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
configureWebpack: {
node: {
process: true,
},
plugins: [
new MonocoEditorPlugin()
]
}
}

编辑器不随浏览器窗口自动调整大小。这个配置问题,给模块配置参数options即可,配置如下:

1
2
3
options: {
automaticLayout: true
}

更多配置可以参看官网的配置说明。

Cannot find module ‘monaco-editor\esm\vs\editor\contrib\fontZoom\fontZoom’。这个需要匹配的monaco-editormonaco-editor-webpack-plugin模块。使用限定版本安装如npm i monaco-editor@0.13.1 monaco-editor-webpack-plugin@1.4.0即可。

编辑器无法显示菜单无法输入等。这个问题找了好久才找到。一直我认为是编辑器在Chrome浏览器上面不兼容。因为我在公司的Chrome浏览器不行,用Edge浏览器却正常。但是后来发现我家里的Chrome浏览器却是正常的,于是我想到可能是Chrome浏览器插件的问题。我一个插件一个插件的屏蔽,然后测试,终于发现是插件Tampermonkey里面的脚本网页限制解除的锅,禁用此脚本全部功能就恢复了。

您的支持将鼓励我继续创作!
0%