Monaco Editor教程（二二）：monaco编辑器完整配置翻译及重点配置解析

9月前作者：拿我格子衫来分类：Toy博客阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了Monaco Editor教程（二二）：monaco编辑器完整配置翻译及重点配置解析。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

本篇文章讲解一下创建Monaco编辑器时所有完整配置，算是一个比较浅显的入门文章。
但由于一个Monaco的配置项多达150个，整篇文章耗费了我5天的下班时间，请读者自行点赞收藏。这里结合实际的项目业务场景介绍一些常用的，有可能修改的默认配置参数。Monaco已经默认了很多配置参数的值，而这些默认值应该适合大多数场景。

配置概览

目前最新的monaco版本是0.34.1。创建编辑器的参数类型为IStandaloneEditorConstructionOptions。
访问地址为。注意要选中左上角的Inherited与Externals。这样就可以看到所有的参数。
目前有150个，只比0.34.0版本多了2个。（文末有所有的参数及简单的中文解释）

不说别的，150个配置项，一个一个看过去，都要一天。更何况，有些配置项还是二维对象。像之前介绍的minimap。整体而言，文章的属性讲解内容可能没有明显的顺序可言。甚至有些零碎片面化，请耐心地读下去。

另外有些属性，官方的解释也很粗浅，更没有配备对应的示例，解释的不对，欢迎热心的读者在评论区纠正。对于重要，常用配置项，会配置一个简单示例。

常用配置

automaticLayout
autoClosingDelete
autoClosingBrackets文章来源地址https://www.toymoban.com/news/detail-424573.html

到了这里，关于Monaco Editor教程（二二）：monaco编辑器完整配置翻译及重点配置解析的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

Vue集成Monaco Editor的使用，以及开发Python代码编辑器和Sql等

微软之前有个项目叫做Monaco Workbench，后来这个项目变成了VSCode，而Monaco Editor（下文简称monaco）就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，交互以及UI上几乎是一摸一样的，有点不同的是，

2024年02月11日
浏览(53)
monaco脚本编辑器在无界中使用鼠标点击不到

背景A项目使用无界引入B项目经排查，是B使用的的monaco脚本编辑器无法在A的无界框架中引入的问题。经查询，需要修改monaco源码来使之能在无界中使用。解决方案：https://github.com/Tencent/wujie/issues/205。有三种解决方案： 1、在A的无界提供的jsloader插槽中加入代码，从而修改

2024年02月22日
浏览(37)
Monaco Editor安装，vue3中使用，自定义高亮，自定义提示，附完整代码

root中为高亮规则。[/curl/, {token: “string.escape”}]：表示 ‘curl’ 的高亮颜色为粉色高亮颜色参考：https://microsoft.github.io/monaco-editor/monarch.html 效果：效果： 1、父组件：HomeView.vue 父组件中传给子组件所需的组件高度、初始内容、高亮类型、是否只读子组件通过editorChange方法给

2024年02月16日
浏览(48)
monaco,monaco-editor,monaco-editor-webpack-plugin,

\\\"Monaco\\\"是包含了Monaco Editor和Monaco Language Server两个项目的总称，而\\\"Monaco Editor\\\"是Monaco项目中的一个部分，它是一款基于Web技术的高性能代码编辑器。 Monaco Language Server是一个支持多种语言的语言服务器，可以提供语法分析、代码补全、错误检查、重构等功能。Monaco Editor可以与

2024年02月14日
浏览(40)
富文本编辑器 VUE-QUILL-EDITOR 使用教程

1、NPM 导入 VUE-QUILL-EDITOR 2、引入 VUE-QUILL-EDITOR 在全局中引入在指定的 vue 文件中引入 3、在 VUE 中使用到这里一个默认的富文本编辑器已经导入使用了，如下图所视！一般的，我们在使用的时候并不需要这么多功能，可以适当的对编辑器配置项进行配置。可以根据自己的实际

2024年02月09日
浏览(62)
Sprite Editor图片编辑器的使用_unity基础开发教程

SpriteEditor是Unity引擎中的一个工具，用于创建和编辑2D图片。它提供了一系列功能，可以对图片进行剪裁、切割、翻转、旋转、调整大小等操作，以及设置图片的碰撞检测形状和渲染模式。 SpriteEditor可以帮助开发者将多张图片合并成动画精灵，并为每一帧设置播放时间和循环

2024年02月01日
浏览(41)
富文本编辑器 VUE-QUILL-EDITOR 使用教程（最全）

VUE-QUILL-EDITOR 基于 QUILL、适用于 VUE 的富文本编辑器，支持服务端渲染和单页应用，非常高效简洁。在全局中引入在指定的 vue 文件中引入到这里一个默认的富文本编辑器已经导入使用了，如下图所视！一般的，我们在使用的时候并不需要这么多功能，可以适当的对编辑器配

2024年02月04日
浏览(46)
monaco-editor基本使用以及monaco-editor封装成vue组件

以vue2项目为例安装依赖配置vue.config.js 使用monaco-editor前，需要先准备一个容器来挂载monaco-editor实例创建monaco-editor实例使用monaco.editor.create方法创建monaco-editor实例，create方法的第一个参数接收一个dom元素，第二个参数可选，接收一个IStandaloneEditorConstructionOptions配置对象关

2024年02月06日
浏览(42)
Vue3使用Monaco-editor

Monaco-editor，一个vs code 编辑器，需要将其集成到项目。不说闲话了，直接上代码。 npm地址：https://www.npmjs.com/package/monaco-editor 中文文档：https://aydk.site/editor/ vite.config.ts 首先先封装个hook如下： @/hooks/useMonacoEditor.hook.ts 然后调用上面 useMonacoEditor 封装editor编辑器组件 @/com

2024年02月06日
浏览(43)
vue3富文本编辑器vue-quill-editor、图片缩放ImageResize详细配置及使用教程

官网地址：https://vueup.github.io/vue-quill/ 效果图 1、安装 2、在vue.config.js中添加配置，否则quill-image-resize-module会出现Cannot read property ‘imports‘ of undefined报错问题 3、创建quillTool.js（用于添加超链接、视频） 4、完整代码

2024年02月04日
浏览(50)