Monaco Editor
文章平均质量分 97
一棵开花的树,枝芽无限靠近你
学习使我快乐!
展开
-
Monaco Editor系列(八)插入自定义DOM、删除指定位置的单词、给特定单词着色
在编辑器中插入DOM的使用场景还是挺常见的,例如查找单词的时候复现出来的查找框编辑时候浮现出来的建议列表以及 gitlab 中,给别人的合并请求添加修改建议的小框框可以发现上面几个框框虽然都是独立于编辑区域的,但是显示上还是有区别的,搜索的框框和建议列表框框是浮在编辑器上的,给合并请求提建议的框框是插入到上下两行的中间的,会把两行撑开,并且不会占用行号。所以其实 monaco 的编辑器之外的DOM有两种,一种是,一种是。原创 2024-06-19 18:04:12 · 370 阅读 · 0 评论 -
Monaco Editor系列(七)代码信息指示器CodeLens、使用API触发键盘事件、自动完成配置
本篇文章主要介绍了三个功能CodeLens 代码信息提示器的配置和自动补全配置很类似,都是隶属于 languages 命名空间,从函数名上看,都是通过注册 Provider 的方式,增加配置,里面传参也很类似,第一个参数都是语言,第二个是配置项CodeLens 和 Markers 很类似,都是提供代码提示的,帮助开发者更好的理解代码,但是 Markers 是鼠标浮动到代码上才会出现,并且可以显示的内容比较多,CodeLens 直接显示在代码里面,占据独立一行,但是不占用行号,复制时不会被复制到剪切板中。原创 2024-06-05 11:38:49 · 870 阅读 · 4 评论 -
Monaco Editor系列(六)Range详解、Uri 自动匹配语言模型、缩略图 miniMap 配置
前情回顾:一鼓作气,再鼓,再鼓!!哈哈哈。争取早日占领 Monaco 领地。上一篇文章讲到的三个功能分别是 Position 类型、设置 markers、指定位置插入或替换内容涉及到的知识点:⛈️ 获取光标位置:⛈️ 获取某个位置处的单词:这一篇文章继续来探索更多的功能吧!遨游在 monaco editor 的世界里是不是很快乐啊哈哈哈哈(bushi,大佬写的非常好,是少有的成系列的学习 Monaco Editor 的学习资料,并且有很多总结性的东西都给总结好了。原创 2024-06-04 10:42:52 · 708 阅读 · 0 评论 -
Monaco Editor系列(五)Position 类型详解、设置Marker、指定位置插入或替换文本
前情回顾:上一篇文章主要探索了三个功能点,分别是版本对比功能、新建命令和菜单项和滚动条滚动的功能,涉及到的方法在这里稍稍的回顾一下。这样把所有的方法列出来,等到真正使用 Monaco 的时候,就比较方便了🪡 创建版本对比的编辑器 `monaco.editor.createDiffEditor(容器, 配置)`🪡 给 `diffEditor` 设置内容 `editor.setModel({original:旧版本model, modified:新版本model})`原创 2024-04-20 11:42:17 · 1012 阅读 · 2 评论 -
Monaco Editor系列(四)版本对比、自定义右键菜单、光标滚动
在 Monaco 中,已经有很多现成的很好用的快捷键,例如 crtl+f 搜索代码。Monaco 其实还提供了接口,允许我们自定义命令。另外右键菜单里面的命令,和快捷键往往都是一对一的关系右键出来的菜单项的专业术语叫做Action。所以我们这一章就来学一学怎么自定义命令以及Action菜单项吧!我们来实现一个简单的命令,alert 弹出一句话添加自定义命令的方法是为了方便大家点击链接跳转,以后我就直接贴官网的文档链接啦!这个方法需要接受一个参数,类型为。原创 2024-04-18 15:56:43 · 1581 阅读 · 0 评论 -
Monaco Editor系列(三)修改内容、多文件编辑、自定义主题
前言:上一篇文章讲了如何在我们下载的源码项目中,增加一个自己的路由页面供我们自由发挥,下面的若干篇文章,我会和大家一起探索 Monaco Editor 的 API,探索 Monaco Editor 的功能。Monaco Editor 的官方文档特别的简便,这也是学习来困难的原因之一。但是学习它一定是非常有价值的。接下来继续本篇文章的探索吧!一起加油吧!原创 2024-04-16 18:05:28 · 1959 阅读 · 0 评论 -
Monaco Editor系列(二)Hello World 初体验
前言:上一篇文章我主要分享了从 Monaco Editor 入口文件以及官方提供的示例项目入手,对一部分源码进行剖析,以及分享了初始化阶段代码的大致执行步骤,这一篇了来讲一下我们要用 Monaco Editor 的时候该怎么用。其中会涉及到一些 API,我会对 API 的源码进行深入的解析,但不保证能完全看懂 😂。这种复杂的源码,不要着急,实在深入不下去,就换一个入口,继续探究,最后你学到的东西会呈网状交织在一起,覆盖到所有的代码。原创 2024-04-03 14:00:33 · 1052 阅读 · 0 评论 -
Monaco Editor系列(一)启动项目与入门示例解析
本篇从 Monaco Editor 下载、启动开始,顺着入口文件以及示例 Hello World 项目的脉络,学习了源码的执行过程。学习这种大型项目的源码一定要有耐心,另外就是在学习的过程中需要查漏补缺,遇到不会的东西补一补,慢慢的积累。原创 2024-03-20 19:10:31 · 3374 阅读 · 0 评论