当前位置: 首页> 游戏> 评测 > 前端网页代码编辑器 Monaco Editor

前端网页代码编辑器 Monaco Editor

时间:2025/7/11 1:30:15来源:https://blog.csdn.net/suu_an/article/details/142201860 浏览次数:0次

前端网页代码编辑器 Monaco Editor

Monaco Editor

Monaco Editor 是由 Microsoft 开发的一款基于 Web 技术的开源代码编辑器,它是 Visual Studio Code 编辑器的核心。Monaco Editor 可以嵌入到网页中,提供类似于 Visual Studio Code 的编辑体验。

  • 官方地址:https://microsoft.github.io/monaco-editor/

  • 项目地址:https://github.com/microsoft/monaco-editor

如下截图是其显示 SQL 的实现效果。

image-20240913032352661

Vue 项目中使用 Monaco Editor

创建 Vue 项目

使用脚手架创建 vue 项目

vue create sql_editor

img.png

安装路由插件。

npm install vue-router

在 main.js 中引入路由配置。

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 确保正确引入路由Vue.config.productionTip = false;new Vue({
router, // 注入路由
render: h => h(App),
}).$mount('#app');

在 src 目录下创建 router/index.js 文件,写入如下路由。

import Vue from 'vue';
import VueRouter from 'vue-router';
import sqlPage from '../views/sqlPage.vue';Vue.use(VueRouter);const routes = [// 这里需要提前创建vue文件,src/views/sqlPage.vue{path: '/sql',name: 'sql',component: sqlPage,},
];const router = new VueRouter({mode: 'history',routes,
});export default router;

运行项目之后报错,如下所示。

img_1.png

 原因是 Vue 和 Vue Router 的版本不兼容。

  • Vue 2 需要使用 Vue Router 3.x
  • Vue 3 需要使用 Vue Router 4.x

这里重新安装 vue-router@3 即可。

npm install vue-router@3

再次运行项目,正常无报错。

image-20240913033548788

安装 Monaco Editor 插件

npm install vue-monaco@1.2.2
npm install monaco-editor-webpack-plugin@1.9.0
npm install monaco-editor@0.19.0

这里的版本兼容问题较多,如上版本是成功实现的一版,建议不要使用最新版本进行测试。

img_3.png

 安装完成插件后,需要在 vue.config.js 中引入 monaco-editor-webpack-plugin,代码如下所示:

const { defineConfig } = require('@vue/cli-service');
const MonacoEditorPlugin = require('monaco-editor-webpack-plugin');module.exports = defineConfig({transpileDependencies: true,// 这里是新添加的插件configureWebpack: {plugins: [new MonacoEditorPlugin({// https://github.com/Microsoft/monaco-editor-webpack-plugin#options// Include a subset of languages supportlanguages: ['javascript', 'css', 'html', 'typescript', 'sql']})]}
});

Vue 页面中引入 Monaco Editor

这一步也即应用插件到 vue 项目中,完整代码如下所示。

<template><MonacoEditor class="editor" v-model="code" language="sql" />
</template><script>
import MonacoEditor from 'vue-monaco'export default {components: {MonacoEditor},data() {return {code: 'const noop = () => {}'}}
}
</script><style>
.editor {width: 1200px;height: 800px;
}
.monaco-editor .view-lines {text-align: left !important;
}
</style>

实现的效果如下所示。

image-20240913033041302

关键字:前端网页代码编辑器 Monaco Editor

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: