为什么要集成Monaco Editor
Monaco Editor是微软开源的一款网页版的vscode编辑器，风格、操作方式几乎与vscode一致，Github地址：
https://github.com/microsoft/monaco-editor
。 由于项目中需要开发一个sql语句编辑器的功能，故采用monaco editor的解决方案。
安装monaco-editor
npm install monaco-editor --save
集成至页面
页面上添加一个div：
<div id="monaco-editor">
初始化monaco编辑器
import * as monaco from 'monaco-editor'
this.editor = monaco.editor.create(document.getElementById('monoco-editor'), {
value: '',
language: 'sql',
automaticLayout: true
按照以上操作后，页面即可集成monaco editor功能。
右键菜单增加自定义操作
需要调用addAction方法，文档：https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.istandalonecodeeditor.html#addaction ，实例代码如下：
this.editor.addAction({
id: 'file_formatter',
label: '格式化文档', // 菜单名称
keybindings: [monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KEY_F], // 快捷键
contextMenuGroupId: 'code_formatter',
run: () => {
// const content = this.editor.getValue()
// this.editor.setValue(format(content, { indent: ' ' }))
// TODO 添加格式化操作
本地化i18n
本地化采用monaco-editor-esm-webpack-plugin方式实现，Github地址：https://github.com/wang12124468/monaco-editor-esm-webpack-plugin 。
安装 monaco-editor-esm-webpack-plugin
npm install monaco-editor-esm-webpack-plugin --save-dev
安装 monaco-editor-nls
npm install monaco-editor-webpack-plugin monaco-editor-nls --save
修改 webpack.config.js
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
module.exports = {
entry: './index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js'
module: {
rules: [
test: /\.js/,
enforce: 'pre',
include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
use: MonacoWebpackPlugin.loader
test: /\.css$/,
use: ['style-loader', 'css-loader']
plugins: [
new MonacoWebpackPlugin()
import { setLocaleData } from 'monaco-editor-nls';
import zh_CN from 'monaco-editor-nls/locale/zh-hans';
// You must import/require after `setLocaleData`
setLocaleData(zh_CN);
import * as monaco from 'monaco-editor'
this.editor = monaco.editor.create(document.getElementById('monoco-editor'), {
value: '',
language: 'sql',
automaticLayout: true
为什么要集成Monaco EditorMonaco Editor是微软开源的一款网页版的vscode编辑器，风格、操作方式几乎与vscode一致，Github地址：https://github.com/microsoft/monaco-editor。 由于项目中需要开发一个sql语句编辑器的功能，故采用monaco editor的解决方案。开始使用安装monaco-editornpm install monaco-editor --save集成至页面页面上添加一个div：&.
虽然作为后台开发，但是前后端都是需要懂一些的～
那么问题来了，最近在写前端的过程中有这么一个需求，需要对网页中的json进行高亮显示，考虑到自己手动通过匹配修改dom会花费很多时间，于是灵（准）机（备）一（偷）动（懒），通过直接在网页内嵌入代码编辑器实现高亮（顺便还提供了许多额外的功能，哈哈）
然而配置过程并没有想象中那么顺利，这里记录配置的过程以及一些遇到的坑，方便以后在遇到时可以愉快的绕...
npm install monaco-editor --save-dev
npm install monaco-editor-webpack-plugin --save-dev
2.2配置vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack
注意两个库的版本指定
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 = {
configu
2. 安装融云WebIM SDK，可以使用npm或者直接引入CDN。
3. 在Vue项目中引入融云WebIM SDK，可以在main.js中全局引入，也可以在需要使用的组件中引入。
4. 初始化融云WebIM，包括设置App Key、连接状态监听等。
5. 实现用户登录功能，登录成功后获取用户信息，并将用户信息传递给融云WebIM，用于后续聊天功能。
6. 实现聊天功能，包括显示聊天列表、发送消息、接收消息等。
7. 可以根据需求定制聊天界面样式和功能，比如表情、图片、语音等。
8. 最后需要注意的是，融云WebIM需要在HTTPS环境下运行，因此需要确保Vue项目是在HTTPS环境下运行。
以上是一个大致的思路和步骤，具体实现过程中可能会遇到一些问题，可以参考融云WebIM官方文档或者在社区中提问。
