写点什么

Monaco Editor 使用时右键功能菜单汉化

  • 2024-07-19
    北京
  • 本文字数:1499 字

    阅读完需:约 5 分钟

背景

某天产品要求在项目的某个页面添加一个代码编辑器,包含编辑器常见的功能。看完需求,想到了强大的 Monaco Editor。按照官方文档进行配置开发,就在自己觉得大功告成之际,右击编辑框,发现功能菜单是英文状态,然后就开启了我的右键功能菜单汉化之路。


问题剖析

在 Monaco Editor 的整个使用配置过程中,我没有添加关于本地语言的配置,所以目前使用的应该是默认配置。所以目前解决问题的思路是:

  1. 查看官方 API 文档寻找关于本地语言的配置

  2. 寻找可以进行本地语言配置的第三方插件/库

按照以上思路首先在 Monaco Editor 官方文档中进行一番搜索尝试无果后,开始转向相关第三方插件/库的寻找,最终找到了 monaco-editor-esm-webpack-plugin 和 monaco-editor/loader

解决方案

方案一:使用 monaco-editor-esm-webpack-plugin

依赖下载

npm install monaco-editor-esm-webpack-plugin --save-dev
npm install monaco-editor monaco-editor-webpack-plugin monaco-editor-nls
复制代码

vue.config.js 文件

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');configureWebpack: {    plugins: [        new MonacoWebpackPlugin()    ]}
复制代码

xx.vue 文件

import { setLocaleData } from 'monaco-editor-nls';import zh_CN from 'monaco-editor-nls/locale/zh-hans';setLocaleData(zh_CN);// 先汉化语言,再加载monaco才能汉化成功,使用import方式无法汉化// 需要使用require方式引入monaco-editorconst monaco = require('monaco-editor/esm/vs/editor/editor.api');
monaco.editor.create(document.getElementById('root'), { language: 'xml' });
复制代码

效果图如下:


从效果图我们发现功能菜单的”命令面板“是中文的了,但是”Copy“还是英文

方案二:使用 monaco-editor/loader

依赖下载

npm install @monaco-editor/loader
复制代码

xx.vue

import loader from '@monaco-editor/loader';loader.config({ 'vs/nls': { availableLanguages: { '*': 'zh-cn' } } }); // availableLanguages中可以配置想要的语言,例如de、zh-cn等loader.init().then(monaco => {    monaco.editor.create(document.querySelector("#mxlContainer"), {    value: '<params></params>',    language: 'xml',  });});
复制代码

至此已经完成。浏览下效果图


从效果图来看已经达到了我们的目标。但仔细看上方代码发现我们用的 monaco 实例是 monaco-editor/loader 自动从 CDN 下载后返回的,如果我们想通过 npm 包的方式使用应该怎么做呢?废话不多说,直接上代码

import loader from '@monaco-editor/loader';import * as monaco from 'monaco-editor';// 通过config方法我们可以配置我们使用的资源是通过非CDN方式引入loader.config({ monaco });// 需要注意本地语言(locales)的配置一定放在loader.config({ monaco })后边,否则设置的locales会被npm包的monaco配置覆盖,导致设置locales失败loader.config({ "vs/nls": { availableLanguages: { "*": "zh-cn" } } });loader.init().then(monacoInstance => {     // 通过loader.config({monaco})的配置后,此处的monacoInstance其实是我们 import * as monaco from 'monaco-editor'进来的npm包   monacoInstance.editor.create(document.querySelector("#mxlContainer"), {    value: '<params></params>',    language: 'xml',  }); });
复制代码

版本

"monaco-editor": "^0.30.1""monaco-editor/loader": "^1.3.2""node": "v14.15.4""webpack": "v4.28.4"

小结

monaco-editor/loader 会自动处理配置和加载 monaco 源码,并且它的使用方式与项目打包方式解耦,只需在需要使用的文件中引入即可。使用方式灵活,适用范围更加广阔。

发布于: 刚刚阅读数: 3
用户头像

拥抱技术,与开发者携手创造未来! 2018-11-20 加入

我们将持续为人工智能、大数据、云计算、物联网等相关领域的开发者,提供技术干货、行业技术内容、技术落地实践等文章内容。京东云开发者社区官方网站【https://developer.jdcloud.com/】,欢迎大家来玩

评论

发布
暂无评论
Monaco Editor使用时右键功能菜单汉化_京东科技开发者_InfoQ写作社区