Monaco Editor教程(二二):monaco编辑器完整配置翻译及重点配置解析

这篇具有很好参考价值的文章主要介绍了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日
    浏览(55)
  • 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日
    浏览(51)
  • 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日
    浏览(42)
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程

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

    2024年02月09日
    浏览(67)
  • 富文本编辑器 VUE-QUILL-EDITOR 使用教程 (最全)

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

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

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

    2024年02月01日
    浏览(44)
  • 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日
    浏览(43)
  • 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日
    浏览(44)
  • 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日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包