Monaco Editor编辑器教程
文章平均质量分 88
详细讲解Monaco Editor的各种特性,集成,以及自定义开发使用。帮助各位读者开发完善自己的WEB IDE。助你循循渐进地掌握微软编辑器Monaco。不定期上涨价格。
优惠券已抵扣
余额抵扣
还需支付
¥19.90
¥99.90
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
拿我格子衫来
《GitLab CI/CD 从入门到实战》作者,擅长GitLab CI/CD,ThingsBoard,Node-RED,Monaco Editor,数据可视化及浏览器脚本编写。熟练使用Docker,Kong,云原生相关组件。
展开
-
Monaco Editor教程(二二):monaco编辑器完整配置翻译及重点配置解析
本篇文章讲解一下创建Monaco编辑器时所有完整配置,算是一个比较浅显的入门文章。这里结合实际的项目业务场景介绍一些常用的,有可能修改的默认配置参数。Monaco已经默认了很多配置参数的值,而这些默认值应该适合大多数场景。那么多属性 不是一下子能给记下来的,完整地翻译下来也只是有个印象而已。又一个很大的好处就是可以用中文搜索啦。哈哈哈。。。。原创 2023-02-13 08:00:00 · 4765 阅读 · 2 评论 -
Monaco Editor教程(十七):代码信息指示器CodeLens配置详解
今天我们又学到了一种在编辑器中 添加辅助备注信息的方式。不用于之前介绍的Mark,codelens是占用编辑器虚拟行,却不是文件内容。原创 2022-11-21 08:00:00 · 3759 阅读 · 2 评论 -
Monaco Editor教程(二):前端为什么一定要学习monaco-editor
详细解释前端为什么要学习monaco-editor项目,学习web文本编辑器。学习monaco-editor的最佳路线,方法,技巧。原创 2022-09-28 17:31:05 · 3806 阅读 · 0 评论 -
仿GitLab MR 是的对比文件内容,可以动态显示,隐藏没有变化的文件内容
使用js实现 文件对比,动态显示隐藏 没有改变的文本。原创 2023-07-21 17:57:01 · 10246 阅读 · 1 评论 -
Monaco Editor编辑器教程(三二):使用中文菜单,配置编辑器国际化
最近有网页提问如何将编辑器的菜单改成中文的,简单写一篇文章。// 使用addExtraLib添加额外库,增强体验。原创 2023-07-18 11:17:15 · 4345 阅读 · 9 评论 -
Monaco Editor编辑器教程(三二):编辑器中有关事件的汇总,鼠标事件,内容变更,模型变更
在monaco 编辑器中,有很多事件,鼠标事件,滚动条事件,按键事件。鼠标事件中又区分点击,悬浮,移动事件,而点击事件又区分点击区域。本篇文章就来汇总地讲解一下Monaco编辑器汇总事件的用法以及相关API。原创 2023-05-18 07:30:00 · 3881 阅读 · 0 评论 -
Monaco Editor编辑器教程(三一):在编辑器中实现模拟调试的交互
最近有小伙伴咨询如何在编辑中实现 像vscode调试代码那样,可以打断点,可以高亮当前运行的一行。这样的需求并不多见,如果要做,那肯定是对编辑器做一个深层次的定制。一般很少很少会实现这种在浏览器中调试。目前我还没见过,如果有遇到过的朋友可以指点一下。我去学习一下。废话不多说,既然读者提出这样的要求,那肯定是有场景的。只是自己没有遇到过。于是自己调研了一番, 勉强使用与行高亮实现了。下面讲解一下。原创 2023-05-15 07:30:00 · 3834 阅读 · 8 评论 -
Monaco Editor编辑器教程(三十):将vue文件作为一种编程语言集成到monaco editor中,实现vue组件的语法,标签高亮。
最近在使用gitlab的web ide时发现当编写一个 vue组件时,文件的后缀名为.vue。在编辑器的右上角会显示当前的编程语言时vue,并且高亮语法或标签,格式化,折叠都表现很优秀。但是其实monaco是不支持vuejs的,作为一名前端开发者,我们有时需要在monaco编辑器中编写vue组件,所以我就利用业余时间尝试 在讲vuejs集成到monaco中。确切说vuejs并不是一个编程语言,它和html很类似,但也有很多差异,这里就不展开讲了。本文主要我是如何探索,实践将vuejs集成到monaco中的。原创 2023-05-09 08:00:00 · 3988 阅读 · 2 评论 -
Monaco Editor编辑器教程(二九):在monaco中引入额外ts类型库,增强编辑器体验
在之前的文章中,我们介绍了如何在monaco中为某一个方法增加注释,可以通过CodeLens 也可以通过Marker来显示某个变量,常量,或方法的文档。但这种方法不太适合大规模的库,比如一个js库有成千上百个方法,作为一名懒惰的程序员不可能将每一个方法都添加到monaco中。那么本篇文章就来给大家介绍一种借助TypeScript的类型声明文件,来增强编辑器的体验。该方法不仅能够显示某个方法的详细文档,还能在书写时自动完成某个方法。核心方法只有一个官方文档下面来详细介绍一下。原创 2023-05-08 08:00:00 · 4000 阅读 · 0 评论 -
Monaco Editor编辑器教程(二八):Monaco 与 VS Code 两个项目的联系与异同点
很多人知道前端代码编辑Monaco Editor 与VS Code 有关系,但却不清楚其中的细节,本篇文章就带大家了解一下两者的关系和异同点。优秀的产品 周边也都优秀。正所谓强将手下无弱兵。我们进入一个优秀的团队,接触一些优秀的人,对我们的人生规划 大有裨益。强行胡扯-_-原创 2023-04-27 07:00:00 · 11613 阅读 · 1 评论 -
Monaco Editor编辑器教程(二七):集成多个GitLab编辑器颜色样式主题
借助GitLab 源码,快速实现多个美观的主题配置。与web ide 的主题配置一致。原创 2023-04-18 07:45:00 · 3735 阅读 · 6 评论 -
Monaco Editor编辑器教程(二六):使用IContextKey动态开启command和action
由于Monaco的文档是使用TS的类型声明来生成的,在生成后必定会有很多属性的描述让人摸不到头脑,并且这些文档又是会混入一些VS Code才能用到的api。在看文档时,读者有时会既不知道这个属性具体影响的地方,也不清楚每个配置值有什么不同。有时一些属性只表明了该属性的值是一个string类型,至于值从哪里来,却没有解释。而今天的文章,就是由这样一个迷惑属性而来的。原创 2023-03-13 08:00:00 · 11593 阅读 · 2 评论 -
Monaco Editor 教程(二五):使用FindMatchs搜索结果批量增加代码注释
之前的文章中和大家介绍了如何为代码中的某个关键词,方法名,变量名增加Marker,之前的介绍的是,知道固定某个词的位置,直接增加marker即可,但如果我们不知道某个词的位置。这种情况下,我们可以通使用findMatch来查找对应的词,获取每个结果的位置后,再增加mark。下面实现一下通过查找某一个词,来批量增加marker。原创 2023-03-06 08:00:00 · 3833 阅读 · 0 评论 -
Monaco Editor编辑器教程(二四):编辑器中创建自定义dom区域 changeViewZones API的详解附实例
(ps:由于Monaoc 官网更新,很多0.34版本的链接都无效啦,mmp,大家如果遇到链接无法访问的情况,可以使用关键词去搜索。)本篇文章我们主要介绍changeViewZones的使用,这个api在之前的文章有粗浅的介绍。该API最主要的作用就是在编辑器中增加一块区域,注入自定义的dom元素,并且不会遮挡现有的编辑器内容。是"嵌入"到编辑器中的。GitLab中MR的对某行代码进行评论就是使用了该功能(后来我发现并不是)。此外我们还可以使用该功能,实现一个在编辑中编辑markdown图片链接来显示图原创 2023-02-27 09:00:20 · 10483 阅读 · 0 评论 -
Monaco Editor编辑器教程(二三):点击变量列表,与编辑器的光标处插入变量或方法,并进行特殊着色
最近有读者向我询问,在一个页面,做右侧有一个变量列表和方法列表,这些方法和变量有些是用户自己创建的,有些是系统内置的。要做的是点击变量或方法直接插入到右侧编辑器的当前光标处。除了插入到当前的光标处,还需要对插入的变量或方法进行一些特殊化显示。需要将这些方法名和变量名进行特殊的着色,并且设置一些自定义的备注或者mark。需求就是这样。下面我们就来分析并实现这一需求。像这样的需求,对于专门做编辑器的产品是很常见的。原创 2023-02-20 08:00:00 · 3789 阅读 · 6 评论 -
Monaco Editor教程(二一):在编辑器中实现 点击backspace 删除整个单词 删除块单词
在最近的一次前端周会上,组内一个同事分享了项目里使用monaco做的一个对比功能,在编辑器如何实现点击删除键,删除当前光标前或附近的完整的单词?具体场景是,在使用自动完成时,有一些单词是自动完成的,如果在插入这个备选项后,点击删除键,就是Backspace键,能够将这个备选项完整删除,而不是只删除一个字符。举个例子, 当我在编辑器中打出co时,待选项出现了一个console,这个是我选择它,并将它插入到编辑器中。这个时候光标时在单词e后面。原创 2023-02-06 16:05:00 · 3686 阅读 · 0 评论 -
有关Monaco的使用疑惑
学习monaoc中的一些疑惑,以及解开的疑惑。原创 2022-12-15 15:34:08 · 3674 阅读 · 0 评论 -
Monaco Editor教程(二十):在编辑器的某个特定位置插入自定义的dom内容,图片,表单,表格,视频
在monaco编辑器中,于特定位置插入自定义的dom元素。包括图片,表格,表单,视频。原创 2022-11-30 16:29:10 · 3852 阅读 · 5 评论 -
Monaco Editor教程(十九):编辑器自动完成建议项CompletionItem的配置详解
详细讲解monaco editor中的自动补全配置,所有配置参数,completionitem参数详细解释。自定义自动完成规则。提升编辑用户体验。交互能力。原创 2022-11-28 08:00:00 · 3971 阅读 · 21 评论 -
Monaco Editor教程(十八):使用api来完成某些键盘操作,格式化,查找,显示右侧菜单等。
在monaco中使用api来完成某些键盘操作,格式化,查找,显示右侧菜单等。原创 2022-11-24 08:00:00 · 3924 阅读 · 7 评论 -
Monaco Editor教程(十六):缩略图minimap的配置详解
详细解析monaco中minimap的详细配置。在大文件和表现文件结构有很好的用处。原创 2022-11-17 08:00:00 · 3841 阅读 · 0 评论 -
Monaco Editor教程(十五):createModel时使用Uri来自动匹配文件内容对应的源码模型。
前面我们已经讲解过,如果要将一个文件内容显示到monaco编辑器中,必须要创建一个model,这个model就是语言模型。它可以使用官方的编程语言规则,自动地为为我们分层,着色。我们之前是这样用的。第一个参数是要显示的文本内容,二个参数是编程语言, 如’python’,‘javascript’,‘java’,‘sql’。由于文件的扩展名是多种多样的,如在一个Git仓库中,有一个’index.vue’文件,那么我们该使用哪个语言模型来渲染那? 用javascript,还是html?再比如’index.js原创 2022-11-09 08:00:00 · 3715 阅读 · 0 评论 -
Monaco Editor教程(十四):monaco中的位置区间Range类型的详细解释
在了解了monaco中有关位置Position的定义后,大家都是知道每一个Position都指向monaco中的一个行列,这对于定位是很基础的功能,如果我们要一个编辑器中单词的位置,Position就不太好描述了,因为每个单词都会有一个起始Position与一个结束Position。那么这个时候我们就可以使用Range来描述一个编辑器中一段位置。在Range中开始行列必须小于等于结束行列。Range相关的一共有二个定义,一个是单纯描述Range属性的接口IRange和类Range。原创 2022-11-07 08:00:00 · 3693 阅读 · 0 评论 -
Monaco Editor教程(十三):在指定位置插入或替换文本
这表明我们可以在调用这个方法时可以一次完成多次操作,可以执行多次插入和替换。第二个参数computeUndoEdits 是用于是否将本次的操作添加到编辑器的操作栈中,如果为true,那么久可以实现撤销的动作。编辑器底层的搜索替换也是在指定位置替换文本。在编辑器中,开发者有时需要在指定位置添加或替换一些文本,比如在文件头部添加版权说明,在文件末尾增加一些辅助信息,applyEdits方法有二个参数,第一个是operations, 它的类型是。'// @拿我格子衫来''// @拿我格子衫来'原创 2022-11-04 08:00:00 · 3956 阅读 · 0 评论 -
Monaco Editor教程(十二):使用Marker来增加分词注释,标记,优化编辑器交互体验
在编辑器中有很多交互,其中一种交互就是当鼠标放到一个class上,显示该类的定义,该类的行数,注释,这在monaco中很常见,有时这个class并不是在当前文件定义的,而是在其他未打开的文件中定义的。如下图鼠标放到insertSpaces 上,会显示该属性的上传路径,类型定义,以及备注。上面这个是一个使用自定义Marker设置的分词备注。对于一个较大的项目来说,在使用类,方法,参数时,这些注释能够极大地帮助开发者,排查错误,准确调用方法,参数定义。这种分词注释的适用场景有很多,其中一个场景时,在原创 2022-11-04 08:00:00 · 3826 阅读 · 0 评论 -
Monaco Editor教程(十一):monaco中的位置信息Position类型详解
在monaco编辑器中,每个字符都有自己的位置,而位置是整个编辑器中的地基,没有它就无法为某个单词定位,无法获取光标位置,无法比较两个单词的位置信息,无法确定选区的位置。所以理解Position 位置是一件很重要的事情。理解其含义及作用也很简单,monaco一共提供了二个类,来实现,IPosition与Position,下面一起详细来看一下。IPosition 的定义非常简单,/**/**/**}IPosition 只存在二个属性,一个行号,一个是列号。原创 2022-11-03 08:00:00 · 3736 阅读 · 0 评论 -
Monaco Editor教程(十):如何系统学习monaco editor
系统学习monaco editor 编辑器monaco的重要组成部分思维导图,架构图原创 2022-10-11 08:00:00 · 3913 阅读 · 2 评论 -
Monaco Editor教程(九):聚焦到编辑器的指定位置,某行,某列
monaco editor 混动到指定列,指定行。 分享文件编辑器中的指定行。原创 2022-09-30 18:41:45 · 3861 阅读 · 0 评论 -
Monaco Editor教程(八): 实现添加自定义命令,添加自定义菜单action功能
在编辑器中实现自定义指令 自定义右侧菜单项原创 2022-09-30 18:40:18 · 4045 阅读 · 10 评论 -
Monaco Editor教程(七): 实现版本对比功能
使用monaco editor实现版本对比功能,最简单的实现文本对比功能原创 2022-09-30 18:39:00 · 3938 阅读 · 14 评论 -
Monaco Editor教程(六):切换主题,及自定义主题功能的实现
monaco editor 切换主题,设置自定义主题配置参数,api详解原创 2022-09-30 18:35:47 · 4387 阅读 · 0 评论 -
Monaco Editor教程(五): 实现同时多文件编辑,tab切换
使用monaco 实现多文件同时编辑,切换文件tab页。优化交互体验。原创 2022-09-30 16:08:39 · 3926 阅读 · 0 评论 -
Monaco Editor教程(四):设置或获取内容,并监听内容的改变
编辑器设置值,改变语言模型,获取值原创 2022-09-30 15:29:44 · 4474 阅读 · 0 评论 -
Monaco Editor教程(三):开启 Hello World demo示例
详细介绍monaco-editor 编辑器的hello world 示例。详解其中的参数,资源加载顺序,配置参数。原创 2022-09-28 17:50:03 · 3744 阅读 · 0 评论 -
Monaco Editor教程(一): 开源项目 monaco-editor 开启本地开发环境
讲解在本地搭建monaco-editor的开发环境,官方。以及项目资源目录介绍。欢迎订阅原创 2022-09-28 17:18:22 · 3902 阅读 · 5 评论