monaco-editor^0.20.0 汉化

monaco-editor 汉化,需求拿到百度一番:

monaco editor 汉化 - 掘金

npm install monaco-editor-esm-webpack-plugin --save-dev
npm install monaco-editor monaco-editor-webpack-plugin monaco-editor-nls

webpack配置:

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin'); //使用require,esm版本

module.exports = {
    module: {
        rules: [
            {
                test: /\.js/,
                enforce: 'pre',
                include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
                use: MonacoWebpackPlugin.loader
            }
        ]
    },
    plugins: [
        new MonacoWebpackPlugin()
    ]
};

//设置语言包
import { setLocaleData } from "monaco-editor-nls";
import zh_CN from "monaco-editor-nls/locale/zh-hans";

setLocaleData(zh_CN)

//使用
//注意不要使用esm方式引入，webpack会提前打包，导致语言包设置失败，使用动态import
 const monaco = require("monaco-editor/esm/vs/editor/editor.api");
 const editor = monaco.editor.create(document.getElementById('monaco_editor'), {
    value: 'export const msg = "hello world"',
  });

装完发现版本太高.还有loader 报错等问题,

 继续搜:

monaco-editor的使用，以及在webpack汉化_izhuoo的博客-CSDN博客_monaco-editor

使用下面版本汉化:

{
  "dependencies": {
    ...
    "monaco-editor": "0.30.1",
    "monaco-editor-nls": "^2.0.0",
  },
  "devDependencies": {
    ...
    "monaco-editor-esm-webpack-plugin": "^2.0.0",
    "monaco-editor-webpack-plugin": "6.0.0"
  },
}

使用以上版本再加上之前的配置,完成汉化

ps：当我要实现代码触发复制粘贴剪切功能时新的问题来了， 代码触发复制/剪切/粘贴操作 触发代码如下

//editorInstance.trigger 一个参数无实际意义,可随意设置
editorInstance.trigger('source','editor.action.clipboardCopyAction'); 
editorInstance.trigger('source','editor.action.clipboardPasteAction');
//可用的操作可以列出： 
editorInstance.getActions().map(a => a.id)

然而editor.action.clipboardCopyAction，editor.action.clipboardPasteAction 在 "monaco-editor": "0.30.1"这个版本被移除，再次方了

参考新的版本安装，配置如下

package.json

{
  "dependencies": {
    "monaco-editor": "^0.20.0",
    "monaco-editor-nls": "^2.0.0",
    "monaco-editor-webpack-plugin": "^1.9.1",
  },
  "devDependencies": {
    "monaco-editor-esm-webpack-plugin": "^2.0.0"
  }
}

vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
 
module.exports = {
	configureWebpack: {
		module: {
			rules: [{
				test: /\.js/,
				enforce: 'pre',
				include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
				use: MonacoWebpackPlugin.loader
			}]
		},
		plugins: [
			new MonacoWebpackPlugin()
		]
	}
}

设置语言包

// 汉化 monaco
import { setLocaleData } from "monaco-editor-nls"
import zh_CN from "monaco-editor-nls/locale/zh-hans"
setLocaleData(zh_CN)
 
 
//先汉化语言，再加载monaco才能汉化成功，使用import方式无法汉化
//需要使用require方式引入monaco-editor
//import * as monaco from 'monaco-editor' 
const monaco = require("monaco-editor/esm/vs/editor/editor.api"); 

到这里可以使用复制剪辑功能