Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

什么是Monaco Editor？

​微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，两者的平台不一样，monaco基于浏览器，而VSCode基于electron，所以功能上VSCode更加健全，并且性能比较强大。

官方文档：Monaco Editor

也可以在它提供的Playground玩一会：Monaco Editor

Github地址：monaco-editor/samples at main · microsoft/monaco-editor · GitHub 

开始使用

本文采用的是webpack编译，所以以下都是基于webpack来说明。

基本功能，首先，我们需要安装monaco-editor和monaco-editor-webpack-plugin，并且版本要对应，不然会报错：Module parse failed: Unexpected token (30:15)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

1. npm install monaco-editor@0.30.0 -S
3. npm install monaco-editor-webpack-plugin@6.0.0 -D

创建一个子组件并引入monaco-editor

3. <script>
4. import * as monaco from "monaco-editor";
6. export default {
7. name: "Monaco",
8. data() {
9. return {
10. monacoEditor: null,
11. };
12. },
13. mounted() {
14. this.init();
15. },
16. methods: {
17. init() {
18. // 使用 - 创建 monacoEditor 对象
19. this.monacoEditor = monaco.editor.create(this.$refs.main, {
20. theme: "vs-dark", // 主题
21. value: "console.log(1111)", // 默认显示的值
22. language: "javascript",
23. folding: true, // 是否折叠
24. foldingHighlight: true, // 折叠等高线
25. foldingStrategy: "indentation", // 折叠方式 auto | indentation
26. showFoldingControls: "always", // 是否一直显示折叠 always | mouseover
27. disableLayerHinting: true, // 等宽优化
28. emptySelectionClipboard: false, // 空选择剪切板
29. selectionClipboard: false, // 选择剪切板
30. automaticLayout: true, // 自动布局
31. codeLens: false, // 代码镜头
32. scrollBeyondLastLine: false, // 滚动完最后一行后再滚动一屏幕
33. colorDecorators: true, // 颜色装饰器
34. accessibilitySupport: "off", // 辅助功能支持 "auto" | "off" | "on"
35. lineNumbers: "on", // 行号 取值： "on" | "off" | "relative" | "interval" | function
36. lineNumbersMinChars: 5, // 行号最小字符 number
37. enableSplitViewResizing: false,
38. readOnly: false, //是否只读 取值 true | false
39. });
40. },
41. },
42. };
43. script>
45. <style lang="scss" scoped>style>

在父组件中使用

3. <script>
4. import PayTest from "./components/paytest.vue";
5. import PayConfig from "./components/config.vue";
6. import monaco from "./components/monaco.vue";
8. export default {
9. components: { PayTest, PayConfig, monaco },
10. data() {
11. return {
12. activeName: "first",
13. };
14. },
15. methods: {
16. handleClick(tab, event) {
17. console.log(tab, event);
18. },
19. },
20. };
21. script>
23. <style lang="scss">
24. .app-container {
25. height: 100vh;
26. // overflow: auto;
27. overflow-y: scroll;
28. }
29. style>

最后启动项目实现的效果

最终的实现效果里我发现的功能有：

• 代码提示
• 代码高亮
• 右键有菜单

 代码搜索

 

其他配置

代码提示

根据上面的步骤引入调用后，是有代码提示的，效果如下：

重点来了！！！！
我在 vue.config.js 里配置了以下代码：

1. const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
3. module.exports = {
4. configureWebpack: {
5. plugins: [
6. new MonacoWebpackPlugin()
7. ]
8. }
9. };

代码提示一下子多了起来。

 

示例

完成以上的使用和配置后，接下来就可以实现一个在线编辑器了

还要配置下 vue.config.js

1. const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
3. module.exports = {
4. configureWebpack: {
5. plugins: [
6. new MonacoWebpackPlugin({ languages: ['javascript', 'typescript', 'html', 'css', 'json'] })
7. ]
8. }
9. };

实现效果