0
  • 聊天消息
  • 系統(tǒng)消息
  • 評(píng)論與回復(fù)
登錄后你可以
  • 下載海量資料
  • 學(xué)習(xí)在線課程
  • 觀看技術(shù)視頻
  • 寫文章/發(fā)帖/加入社區(qū)
會(huì)員中心
創(chuàng)作中心

完善資料讓更多小伙伴認(rèn)識(shí)你,還能領(lǐng)取20積分哦,立即完善>

3天內(nèi)不再提示

Monaco Editor使用時(shí)右鍵功能菜單漢化

京東云 ? 來(lái)源:jf_75140285 ? 作者:jf_75140285 ? 2024-07-19 16:28 ? 次閱讀
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

背景

某天產(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)啟了我的右鍵功能菜單漢化之路。

image.png

問(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' });

效果圖如下:

image.png

從效果圖我們發(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)完成。瀏覽下效果圖

image.png


從效果圖來(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)目打包方式解耦,只需在需要使用的文件中引入即可。使用方式靈活,適用范圍更加廣闊。

審核編輯 黃宇

聲明:本文內(nèi)容及配圖由入駐作者撰寫或者入駐合作網(wǎng)站授權(quán)轉(zhuǎn)載。文章觀點(diǎn)僅代表作者本人,不代表電子發(fā)燒友網(wǎng)立場(chǎng)。文章及其配圖僅供工程師學(xué)習(xí)之用,如有內(nèi)容侵權(quán)或者其他違規(guī)問(wèn)題,請(qǐng)聯(lián)系本站處理。 舉報(bào)投訴
  • 編輯器
    +關(guān)注

    關(guān)注

    1

    文章

    822

    瀏覽量

    31961
  • Editor
    +關(guān)注

    關(guān)注

    0

    文章

    20

    瀏覽量

    14339
收藏 0人收藏
加入交流群
微信小助手二維碼

掃碼添加小助手

加入工程師交流群

    評(píng)論

    相關(guān)推薦
    熱點(diǎn)推薦

    怎么清除不用的桌面右鍵菜單功能

    -----------------------------------------------------------------------@ ECHO 很多顯卡在裝了驅(qū)動(dòng)之后,桌面右鍵會(huì)多出一項(xiàng)或多項(xiàng)菜單,這些功能
    發(fā)表于 05-07 08:58

    有圖有真相,Orcad Capture V16.3漢化版。有興趣的同學(xué)趕早!

    Orcad CaptureV16.3 V1漢化測(cè)試版,效果圖如下!親自試了一下,主菜單沒(méi)有漢化,作者描述漢化會(huì)導(dǎo)致程序不穩(wěn)定,菜單錯(cuò)位。下拉
    發(fā)表于 11-13 17:41

    labview做一個(gè)右鍵功能菜單

    我想用labview做一個(gè)右鍵功能菜單誰(shuí)會(huì)啊求助 我是新人
    發(fā)表于 11-28 09:53

    Protel99SE菜單完全漢化包,解決網(wǎng)上下載的漢化菜單部分菜...

    `Protel99SE菜單完全漢化,解決網(wǎng)上下載的漢化菜單部分菜單項(xiàng)缺失的問(wèn)題,英語(yǔ)水平有限,有些翻譯可能不是特別貼切;
    發(fā)表于 07-22 23:05

    右鍵菜單出故障?

    點(diǎn)擊鼠標(biāo)右鍵彈出菜單,有時(shí)候出現(xiàn)控件屬性,這個(gè)是怎么回事,無(wú)法解決?
    發(fā)表于 09-16 11:03

    動(dòng)態(tài)創(chuàng)建右鍵自定義快捷菜單

    程序運(yùn)行菜單一樣,當(dāng)針對(duì)某對(duì)象的操作項(xiàng)比較多的時(shí)候,比較適合用右鍵快捷菜單來(lái)代替多個(gè)控件,用來(lái)精簡(jiǎn)界面。(2)比較符合人右鍵查看功能的操作習(xí)
    發(fā)表于 09-15 00:06

    關(guān)于控件右鍵菜單的那個(gè)勾怎么顯示

    我知道可以右鍵從高級(jí)功能里自定義這個(gè)菜單,但是不知道怎么做出像默認(rèn)控件的這種前面還有一個(gè)√的。另外還想問(wèn)一下,如果我菜單只有兩個(gè)選項(xiàng),怎么才可以讓其中一個(gè)顯示√,另一個(gè)不顯示。當(dāng)點(diǎn)擊另
    發(fā)表于 12-12 01:11

    【干貨技巧】AD18如何漢化菜單標(biāo)題?

    如果漢化最合適我們電工咯,那有何高招呢? 見(jiàn)下文:執(zhí)行菜單:Tools --> Preferences,彈出以下界面:接著選打鉤,彈出以下界面,按OK,再OK保存,最后關(guān)閉AD軟件,重新啟動(dòng),就可以看到菜單
    發(fā)表于 11-27 19:33

    如何漢化電子仿真軟件Multisim 7菜單

    如何漢化電子仿真軟件Multisim 7菜單:電子仿真軟件Multisim7 功能強(qiáng)大,使用方便,越來(lái)越受到廣大電子愛(ài)好者的喜歡,它必將在電子仿真和電路設(shè)計(jì)領(lǐng)域得到廣泛應(yīng)用。有讀者來(lái)信詢
    發(fā)表于 10-23 08:15 ?93次下載

    如何清除多余的不用的桌面右鍵菜單

    如何清除多余的桌面右鍵菜單   復(fù)制下面內(nèi)容,保存為XX.bat,運(yùn)行就就可以。怎么使用
    發(fā)表于 05-07 08:57 ?6565次閱讀
    如何清除多余的不用的桌面<b class='flag-5'>右鍵</b><b class='flag-5'>菜單</b>

    如何添加右鍵菜單

    如何添加右鍵菜單 1、在所有的文件右鍵菜單中加入命令 (1).打開(kāi)“HKEY_CLASSES_ROOT*”;
    發(fā)表于 09-11 18:21 ?1.7w次閱讀

    JAVA教程之右鍵彈出菜單

    JAVA教程之右鍵彈出菜單,很好的學(xué)習(xí)資料。
    發(fā)表于 03-31 11:13 ?13次下載

    屏蔽超文本瀏覽框右鍵菜單

    易語(yǔ)言是一門以中文作為程序代碼編程語(yǔ)言學(xué)習(xí)例程:易語(yǔ)言-屏蔽超文本瀏覽框右鍵菜單
    發(fā)表于 06-06 17:36 ?3次下載

    Labview自定義右鍵快捷菜單功能實(shí)用小技巧

    Labview自定義右鍵快捷菜單功能實(shí)用小技巧
    發(fā)表于 02-11 11:27 ?27次下載

    谷歌Chrome瀏覽器新增功能:生成隨機(jī)右鍵菜單密碼

    據(jù)悉,Google已于Canary版本Chrome瀏覽器添加了“Password manual fallback”的實(shí)驗(yàn)性標(biāo)志,支持用戶通過(guò)右鍵菜單生成密碼建議。
    的頭像 發(fā)表于 05-14 09:46 ?1554次閱讀

    電子發(fā)燒友

    中國(guó)電子工程師最喜歡的網(wǎng)站

    • 2931785位工程師會(huì)員交流學(xué)習(xí)
    • 獲取您個(gè)性化的科技前沿技術(shù)信息
    • 參加活動(dòng)獲取豐厚的禮品