monaco-editor的使用，以及在webpack汉化

已于 2023-03-08 14:36:13 修改
阅读量5.7k 收藏 10
点赞数 3
分类专栏： 踩坑 文章标签： webpack 前端 node.js vscode monaco-editor
于 2022-02-21 10:08:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/izhuoo/article/details/123040800
版权
本文介绍了如何在webpack项目中使用monaco-editor进行汉化，包括引入`monaco-editor-esm-webpack-plugin`和`monaco-editor-nls`，以及解决键盘监听事件失效和loaders加载问题。此外，还提到了通过特定版本降低冲突，并利用terser-webpack-plugin优化打包大小。
摘要由CSDN通过智能技术生成

汉化

wabpack端需要额外引入 `monaco-editor-esm-webpack-plugin`，`monaco-editor-nls`，并且要在monaco之前，manaco要改成require的方式引入，不然右键菜单不生效。

import { setLocaleData } from "monaco-editor-nls";
import zh_CN from "monaco-editor-nls/locale/zh-hans";
setLocaleData(zh_CN);

// import * as monaco from "monaco-editor";
const monaco = require('monaco-editor/esm/vs/editor/editor.api');

各个依赖版本，package.json: 

{
  "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"
  },
}

loaders加载问题

新版本monaco-editor （编辑文字时最新的是0.31）会有 loaders的加载问题&#

最低0.47元/天 解锁文章
izhuoo
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
专栏目录
教大家怎么看monaco-editor的官方文档
04-17 3183
点进去，略过Enumerations（枚举）、Classes（类）、Interfaces（接口）、Type aliases（类型别名）、Events（事件）、Variables（变量）拉到下面，找到Function（功能）部分，主要是看create()，这个方法会在创建编辑器的时候初始化部分功能，这些功能在options里配置。点开具体参数，会有它的枚举值。如果不知道这个参数具体是干什么的，可以点开源代码Defined定义链接去看，里面注释的参数用途还是比较清楚的。
monaco-editor-webpack-plugin:摩纳哥编辑器的Webpack插件
05-06
Monaco编辑器Webpack加载程序插件 一个插件，可以简化加载的。 正在安装 npm install monaco-editor-webpack-plugin 使用 webpack.config.js ： const MonacoWebpackPlugin = require ( 'monaco-editor-webpack-plugin' ) ; const path = require ( 'path' ) ; module . exports = { entry : './index.js' , output : { path : path . resolve ( __dirname , 'dist' ) , filename : 'app.js' } , module : { rules : [ { test : / \.
Monaco Editor 中文文档整理（超详细、超全面、带demo示例）
~朴：shu的博客
07-11 3660
对 Monaco Editor 官网的译文，翻译目前最新版本 V0.49.0，全网最全API，共计 500 + 文章，保持了与官网一致的目录结构，针对特定API提供了示例DEMO，方便用户更快速了解Monaco Editor 的使用。
在webpack中使用monaco-editor
热门推荐
一名业余前端的博客
04-23 1万+
前言 我查过网上的教程，大部分都是基于vue或者react框架，很少有教程是基于纯粹的webpack来的，这篇文章记录我在webpack上使用monaco-editor的过程，以补充网上在这方面资料的缺失。本文章会根据我的开发随时进行更新。 使用 monaco的使用介绍，网上有很多，大家可以参考这篇文章进行大概的了解。 点击跳转 自己总结的使用过程 1、安装。 npm instal...
monaco-editor 汉化
08-08 5278
monaco-editor 汉化,带版本,实操可用
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-esm-webpack-plugin --save-dev npm install monaco-editor monaco-editor-webpack-plugin monaco-editor-nls 使用 webpack.config.js const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin'); module.exports = { entry: './index.js', output:
monacmonaco-editor使用
ronon77的专栏
01-29 1982
monaco-editor使用   monaco-editor是一款非常好用的web代码编辑器，那么如何把他加到自己的项目中呢。 1.下载插件 npm install monaco-editor@0.8.3 2.初始化编辑器值 1 2 <!--要绑定的对象--> <div id="container"></div...
monaco-editor-locales-plugin:用于monaco-editor语言环境设置的Webpack插件
05-06
用于monaco-editor语言环境设置的Webpack插件 安装 npm install --save-dev monaco-editor-locales-plugin 用法 webpack配置 module . exports = { ... plugins : [ new MonacoLocalesPlugin ( { /** * support...
用于 React 的 Monaco Editor - 在任何 React 应用程序中使用 monaco-editor
06-08
@monaco-editor/react · Monaco Editor for React · 在任何 React 应用程序中使用 monaco-editor，无需使用 webpack（或 rollup/parcel/etc）配置文件/插件:high_voltage: 多模型编辑器已经支持； 享受它 :party_...
vue-monaco：Vue.js的MonacoEditor组件
02-06
维摩纳哥 是支持VS Code的代码编辑器，由于此项目，现在可以作为Vue组件<MonacoEditor> 。 安装 npm install vue-monaco 要么 yarn add vue-monaco 用法 将ESM版本与Webpack一起使用 使用 ： // webpack.config.js const MonacoEditorPlugin = require ( 'monaco-editor-webpack-plugin' ) module . exports = { plugins : [ new MonacoEditorPlugin ( { //
monaco-editor-sources:原始码修改，部分汉化-修改
03-24
摩纳哥编辑 摩纳哥编辑器是为提供支持的代码编辑器，对功能进行了更好的描述。 请注意，该存储库不包含代码编辑器的源代码，仅包含将所有内容打包在一起并运送monaco-editor npm模块的脚本。 试试看 尝试编辑器。 正在安装 $ npm install monaco-editor 你会得到： 内部esm ：编辑器的ESM版本（例如与webpack兼容） 内部dev ：AMD捆绑销售，未缩小 一min ：AMD捆绑并缩小 内min-maps ：源映射为min monaco.d.ts ：这指定了编辑器的API（这实际上是版本，其他所有内容都被认为是私有的，可能会随发行版而中断）。 建议针对dev版本进行开发，而在生产环境中则建议使用min版本。 文献资料 了解如何将编辑器与这些集成在一起。 。 了解如何使用编辑器API并在尝试自己的自定义。 浏览或直接从阅读。 阅读以确保
Monaco Editor编辑器教程（三二）：使用中文菜单，配置编辑器国际化
知无涯
07-18 4280
最近有网页提问如何将编辑器的菜单改成中文的，简单写一篇文章。// 使用addExtraLib添加额外库，增强体验。
monaco-editor 中文文档
暗影刀客的博客
04-27 9226
monaco-editor是微软出一个编辑器，其中最为出名的是vscode的就是基于它来研发出来的，但是因为他的英文文档不是和好用，如果有需要，可以看这个中文文档：monaco-editor-dcos
monaco,monaco-editor,monaco-editor-webpack-plugin,
叮当的猫猫的博客
08-04 1678
总之，Monaco是一个包含了Monaco Editor和Monaco Language Server两个项目的总称，Monaco Editor是Monaco项目中的一个部分，Monaco Language Server是支持多种语言的语言服务器，它们可以相互配合使用，提供更加智能的代码提示和语法检查等功能。它类似于VS Code编辑器中的编辑器部分，提供了丰富的编辑器功能和各种语言的语法高亮、智能提示、代码折叠、代码补全等功能，并具有高度的可扩展性和灵活性。
Monaco Editor (vite/webpack + ts + vue项目使用)
yyXieDaiMa的博客
06-23 7653
微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的。VS Code(基于electron) 包含了文件管理、版本控制、插件等功能，是一款桌面软件。Monaco Editor （基于浏览器）可以看作是一个编辑器控件，只提供了基础的编辑器与语言相关的接口，可以被
Monaco Editor使用时右键功能菜单汉化
最新发布
cnzzs的博客
07-19 584
背景某天产品要求在项目的某个页面添加一个代码编辑器，包含编辑器常见的功能。看完需求，想到了强大的Monaco Editor。按照官方文档进行配置开发，就在自己觉得大功告成之际，右击编辑框，发现功能菜单是英文状态，然后就开启了我的右键功能菜单汉化之路。问题剖析在Monaco Editor的整个使用配置过程中，我没有添加关于本...
Monaco Editor Webpack Loader Plugin
禅与计算机程序设计艺术
04-07 1万+
Monaco Editor Webpack Loader Plugin A plugin to simplify loading the Monaco Editor with webpack. Installing npm install monaco-editor-webpack-plugin Using webpack.config.js: const MonacoWebpackPlug...
如何通过monaco-editor-webpack-plugin使react-monaco-editor代码高亮
04-27
可以通过以下步骤使用 `monaco-editor-webpack-plugin` 实现 `react-monaco-editor` 的代码高亮： 1. 安装 `monaco-editor-webpack-plugin` 和 `monaco-editor` ``` npm install monaco-editor-webpack-plugin monaco-editor --save-dev ``` 2. 在 webpack 配置文件中引入 `monaco-editor-webpack-plugin`，并添加插件 ```javascript const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { // ... plugins: [ // ... new MonacoWebpackPlugin(), ], }; ``` 3. 在 `react-monaco-editor` 组件中添加 `language` 和 `theme` 属性 ```javascript import MonacoEditor from 'react-monaco-editor'; class App extends React.Component { render() { const code = 'console.log("Hello, world!")'; const options = { selectOnLineNumbers: true, language: 'javascript', // 添加 language 属性 theme: 'vs-dark', // 添加 theme 属性 }; return <MonacoEditor width="800" height="600" language="javascript" theme="vs-dark" value={code} options={options} />; } } ``` 这样就可以实现 `react-monaco-editor` 的代码高亮了。
评论 9
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值