首先使用
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");
设置完以上配置后，汉化成功效果如下：
用于monaco-editor语言环境设置的Webpack插件
npm install --save-dev monaco-editor-locales-plugin
webpack配置
module . exports = {
plugins : [
new MonacoLocalesPlugin ( {
* support languages list, .eg ["de"]
* embed language base on monaco-editor@0.14.6
* all available embed languages: de,es,fr,it,ja,ko,ru,zh-cn,zh-tw
npm i monaco-editor-textmate
如果尚未安装对等项依赖项，请安装
npm i monaco-textmate monaco-editor onigasm
import { loadWASM } from 'onigasm' // peer dependency of 'monaco-textmate'
import { Registry } from 'monaco-textmate' // peer dependency
import { wireTmGrammars } from 'monaco-editor-textmate'
export async function liftOff ( ) {
await loadWASM ( `path/to/onigasm.wa
monaco-editor是微软出一个编辑器，其中最为出名的是vscode的就是基于它来研发出来的，但是因为他的英文文档不是和好用，如果有需要，可以看这个中文文档：monaco-editor-dcos
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:
！ 文档尚未更新，正在进行中...
简单的钩子即可在任何React应用中使用
无需Webpack插件或AMD加载程序，同时无需构建工具即可保持对Monaco Web-Worker的全面支持
与网络工作者一起使用的简单API。
无头（只需钩子），因此您可以：
随心所欲地渲染（它只是一个div，可根据需要设置样式）
确定如何呈现加载状态（ loading 由和挂钩返回）
使用基础的monaco对象，例如 API， 实例和文本实例
在useEffect挂钩中使用上述对象以useEffect自定义功能
受到启发。
Pika CDN上的Availabe。 下面有一个使用它的简单示例（没有构建工具，只需将此复制到任何地方，您就可以了）。
正在进行中：有关设置语言提供商的文档，例如包裹，next.js，vanilla
useMonacoEd
vite使用monaco-editor汉化，vue react怎么设置monaco-editor中文。我们可以使用这个插件进行汉化，vite-plugin-monaco-editor-nls不过在我使用的时候并没有汉化成功，发现这个已经是很老的包了。于是自己修复了一下pr给作者了。...
更多内容请参考：在webpack中使用monaco-editorhttps://www.cnblogs.com/zzsdream/p/14088741.html
wabpack端需要额外引入 `monaco-editor-esm-webpack-plugin`，`monaco-editor-nls`，并且要在monaco之前，manaco要改成require的方式引入，不然右键菜单不生效。
import { setLocaleData } from "monaco-editor-nls";
什么是Monarch
Monarch 是 Monaco Editor 自带的一个语法高亮库，通过它，我们可以用类似 Json 的语法来实现自定义语言的语法高亮功能。本文将通过编写一个简单的自定义日志语言（下文简称 log ）来介绍 Monarch 的使用。
首先，我们需要在 monaco 里注册一下我们的 log 语言。
monaco.languages.register({ id:...
以前项目是用ace编辑器的，但是总有些不敬人意的地方。前端事件看见的VS Code编辑器Monaco Editor准备更换下，下面介绍一些使用中遇到的一点问题。代码提示1.项目引用import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';项目中引用了editor.api.js，但是这个文件不包含一些默认的语言和插件，所以在使用...
前言：1.MongoDB是一个独立的服务器;如MySQL或PostreSQL 一样，MongoDB提供侦听端口以便接入。它提供了用于查询，创建，更新和删除的工具。从理论上讲，你使用它的工作方式相同：连接，执行任务并关闭连接
2.它是基于文档的，而不是基于表格的;MongoDB 没有结构化语言。如果你想创建一个新的文档类型，你不用做任何事来告诉数据库关于这些数据的结构，而仅仅是存到数据库中即可。简单的
