背景
某天產(chǎn)品要求在項(xiàng)目的某個(gè)頁(yè)面添加一個(gè)代碼編輯器,包含編輯器常見(jiàn)的功能??赐晷枨?,想到了強(qiáng)大的Monaco Editor。按照官方文檔進(jìn)行配置開(kāi)發(fā),就在自己覺(jué)得大功告成之際,右擊編輯框,發(fā)現(xiàn)功能菜單是英文狀態(tài),然后就開(kāi)啟了我的右鍵功能菜單漢化之路。

問(wèn)題剖析
在Monaco Editor的整個(gè)使用配置過(guò)程中,我沒(méi)有添加關(guān)于本地語(yǔ)言的配置,所以目前使用的應(yīng)該是默認(rèn)配置。
所以目前解決問(wèn)題的思路是:
查看官方API文檔尋找關(guān)于本地語(yǔ)言的配置
尋找可以進(jìn)行本地語(yǔ)言配置的第三方插件/庫(kù)
按照以上思路首先在Monaco Editor官方文檔中進(jìn)行一番搜索嘗試無(wú)果后,開(kāi)始轉(zhuǎn)向相關(guān)第三方插件/庫(kù)的尋找,最終找到了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);
// 先漢化語(yǔ)言,再加載monaco才能漢化成功,使用import方式無(wú)法漢化
// 需要使用require方式引入monaco-editor
const monaco = require('monaco-editor/esm/vs/editor/editor.api');
monaco.editor.create(document.getElementById('root'), { language: 'xml' });
效果圖如下:

從效果圖我們發(fā)現(xiàn)功能菜單的”命令面板“是中文的了,但是”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中可以配置想要的語(yǔ)言,例如de、zh-cn等
loader.init().then(monaco => {
monaco.editor.create(document.querySelector("#mxlContainer"), {
value: '',
language: 'xml',
});
});
至此已經(jīng)完成。瀏覽下效果圖

從效果圖來(lái)看已經(jīng)達(dá)到了我們的目標(biāo)。但仔細(xì)看上方代碼發(fā)現(xiàn)我們用的monaco實(shí)例是monaco-editor/loader自動(dòng)從CDN下載后返回的,
如果我們想通過(guò)npm包的方式使用應(yīng)該怎么做呢?廢話不多說(shuō),直接上代碼
import loader from '@monaco-editor/loader';
import * as monaco from 'monaco-editor';
// 通過(guò)config方法我們可以配置我們使用的資源是通過(guò)非CDN方式引入
loader.config({ monaco });
// 需要注意本地語(yǔ)言(locales)的配置一定放在loader.config({ monaco })后邊,否則設(shè)置的locales會(huì)被npm包的monaco配置覆蓋,導(dǎo)致設(shè)置locales失敗
loader.config({ "vs/nls": { availableLanguages: { "*": "zh-cn" } } });
loader.init().then(monacoInstance => {
// 通過(guò)loader.config({monaco})的配置后,此處的monacoInstance其實(shí)是我們 import * as monaco from 'monaco-editor'進(jìn)來(lái)的npm包
monacoInstance.editor.create(document.querySelector("#mxlContainer"), {
value: '',
language: 'xml',
});
});
版本
"monaco-editor": "^0.30.1"
"monaco-editor/loader": "^1.3.2"
"node": "v14.15.4"
"webpack": "v4.28.4"
小結(jié)
monaco-editor/loader會(huì)自動(dòng)處理配置和加載monaco源碼,并且它的使用方式與項(xiàng)目打包方式解耦,只需在需要使用的文件中引入即可。使用方式靈活,適用范圍更加廣闊。
審核編輯 黃宇
-
編輯器
+關(guān)注
關(guān)注
1文章
822瀏覽量
31961 -
Editor
+關(guān)注
關(guān)注
0文章
20瀏覽量
14339
發(fā)布評(píng)論請(qǐng)先 登錄
怎么清除不用的桌面右鍵菜單功能
有圖有真相,Orcad Capture V16.3漢化版。有興趣的同學(xué)趕早!
Protel99SE菜單完全漢化包,解決網(wǎng)上下載的漢化菜單部分菜...
動(dòng)態(tài)創(chuàng)建右鍵自定義快捷菜單
關(guān)于控件右鍵菜單的那個(gè)勾怎么顯示
【干貨技巧】AD18如何漢化菜單標(biāo)題?
如何漢化電子仿真軟件Multisim 7菜單
如何清除多余的不用的桌面右鍵菜單

評(píng)論