vue使用monaco editor汉化右键菜单示例

安装依赖插件

首先使用npm或者其他包管理工具安装依赖插件：

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

推荐安装的依赖版本对应：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"
  }
}

webpack.config.js 添加配置：（此处使用vue-cil3.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-editor-esm-webpack-plugin，引入monaco-editor-webpack-plugin无法汉化成功设置语言包

// 汉化 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");

设置完以上配置后，汉化成功效果如下：

以上就是vue使用monaco editor汉化右键菜单示例的详细内容，更多关于vue右键菜单汉化的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • Asp.Net Core 使用Monaco Editor 实现代码编辑器功能

    Asp.Net Core 使用Monaco Editor 实现代码编辑器功能

    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著名的VSCode的前身,项目地址:https://microsoft.github.io/monaco-editor/.本文介绍在Asp.Net Core项目中使用Monaco Editor实现代码编辑器功能. 安装 可以使用npm下载moaco-editor: npm install monaco

  • vue2.x中monaco-editor的使用说明

    目录 vue2中使用monaco-editor 安装 配置 创建MonacoEditor公共组件 使用vue-monaco-editor遇到的坑 编辑器重复加载上次编辑器中的内容,不会被新的内容替代 编辑器editorOptions上的配置无法生效 vue2中使用monaco-editor 安装 注意两个库的版本指定 npm install monaco-editor@0.30.1 --save-dev npm install monaco-editor-webpack-plugin@6.0.0

  • vue中实现Monaco Editor自定义提示功能

    这次接到一个需求,要在浏览器的 IDE 中支持自定义提示功能,如下所示: 可以看到,它可以根据用户输入的内容来一项一项排除,只显示完全匹配的那一项. 项目的框架是 Vue ,编辑器用的是 Monaco Editor . 什么是 Monaco Editor vscode 是我们经常在用的编辑器,它的前身是微软的一个叫 Monaco Workbench 的项目,而 Monaco Editor 就是从这个项目中成长出来的一个 web 编辑器,他们很大一部分的代码都是共用的,所以 Monaco Edit

  • Monaco Editor实现sql和java代码提示实现示例

    目录 monaco editor创建 sql提示(库表字段关联) java自定义联想 monaco editor创建 //创建和设置值 if (!this.monacoEditor) { this.monacoEditor = monaco.editor.create(this._node, { value: value || code, language: language, ...options }); this.monacoEditor.onDidChangeModelContent(e

  • Monaco Editor开发SQL代码提示编辑器实例详解

    目录 安装 简易 SQL 编辑器 相关功能 获取选中代码 替换选中代码 处理光标位置 自定义 SQL 库表提示,并保留原有 SQL 提示 编辑器 resize 编辑器设置主题 SQL 代码格式化 右键菜单汉化 记得销毁编辑器对象哦 踩坑 如何快速去看懂 Monaco Editor 安装 安装依赖,这里请注意版本 yarn add monaco-editor@0.29.1 yarn add monaco-editor-webpack-plugin@5.0.0 配置 webpack 插件 // vu

  • vue使用monaco editor汉化右键菜单示例

    vue使用monaco editor汉化右键菜单示例

    安装依赖插件 首先使用npm或者其他包管理工具安装依赖插件: npm install monaco-editor --save npm install monaco-editor-nls --save npm install monaco-editor-webpack-plugin --save npm install monaco-editor-esm-webpack-plugin --save-dev 推荐安装的依赖版本对应:package.json { "dependencies"

  • Vue中Table组件行内右键菜单实现方法(基于 vue + AntDesign)

    最近做的一个项目是基于 vue + AntDesign 的.由于项目要求,需要在 Table 组件的行内点右键的时候弹出菜单.在线演示地址及最终效果图如下: 在线演示地址>> 首先新建一个Table组件的实例: <a-table :columns="columns" :rowKey="record => { return record.INDEX;}" :dataSource="tableData" /> ... c

  • js禁止页面复制功能禁用页面右键菜单示例代码

    <body oncontextmenu="return false">禁用网页右键菜单,但是仍然可以使用快捷键复制. js代码禁用复制功能: 复制代码 代码如下: <script type="text/javascript"> document.body.onselectstart=document.body.oncontextmenu=function(){ return false;} </script> 注意这段代码必须放在

  • 打造个性化右键菜单—注册表使用全攻略之十三

    打造个性化右键菜单-注册表使用全攻略之十三 鼠标的右键选单中有很多快捷命令,给用户日常操作带来了极大的方便.但是,系统不可能做到将您所希望使用的命令都集成到右键选单中,有时您需要的命令根本就不存在,这就只能靠我们自己动手添加进去了.那么就让我们来看几个添加快捷命令的实例吧,只要把握了基本方法,我们就可以触类旁通,添加其他命令. 添加"关闭计算机" 一般我们都是通过点"开始"→"关闭系统"→"关闭计算机"→"确定&qu

  • vue 右键菜单插件 简单、可扩展、样式自定义的右键菜单

    今天分享的不是技术,今天给大家分享个插件,针对现有的vue右键菜单插件,大多数都是需要使用插件本身自定义的标签,很多地方不方便,可扩展性也很低,所以我决定写了一款自定义指令调用右键菜单(vuerightmenu) 安装  npm install rightmenu --save-dev   开始 //main.js import vue from "vue"; import rightMenu from "rightMenu"; vue.use(rightMenu)

  • 原生Vue 实现右键菜单组件功能

    Vue 原生实现右键菜单组件, 零依赖 快速安装 npm install vue-contextmenujs 使用 测试中使用的是 element-ui 图标 import Contextmenu from "vue-contextmenujs" Vue.use(Contextmenu); <template> <div id="app" style="width:100vw;height:100vh" @contextmenu

  • Vue+element-ui添加自定义右键菜单的方法示例

    1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件 <template> <el-button size="medium" @contextmenu.prevent.native="openMenu($event)"> ...... </template> 2.在页面编写右键菜单内容 <ul v-show="visible" :style="{left:left+'px'

  • vue添加自定义右键菜单的完整实例

    vue添加自定义右键菜单的完整实例

    一.写原生方法 1.在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > ... </li> 2.在页面编写右键菜单内容:

  • vue中如何自定义右键菜单详解

    在所编辑的页面,需要添加右键菜单的元素,绑定contextmenu事件,如下: <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" > </li> 在页面编写右键菜单内容: <ul v-show=&q

随机推荐