Monaco Editor教程（三）：开启 Hello World demo示例

背景

前面两篇文章分别向大家介绍了搭建monaco-editor的本地开发环境，以及为什么学习它。本篇文章我们就正式踏入学习阶段，希望我们大家都准备好坚定好自己的目标，守护好自己的信念。真正花上几个月时间，好好研究monaco-editor的使用和开发。

学习一个东西最简单的起步就是写一个Hello world了。本篇文章就向大家介绍使用monaco-editor写一个 Hello World 的案例，并详细介绍其中设计的参数与配置。

由于monaco-editor是一个非常庞大的项目，光是集成方式就至少5中以上，amd，esm，electron，webpack，ts，vite，requirejs。。。第一次接触我们就不要把步子迈那么大，本篇只讲在不使用任何框架下，单个纯html文件使用script标签来引入monaco-editor资源，并实现hello world示例。

Hello World

在单个html文件里实现一个monaco编辑器是非常简单的。但也有很多注意点。下面让我们一起看一下。

创建index.html

首先创建一个index.html 内容如下

<!D

Monaco Editor教程（三）：开启 Hello World demo示例相关推荐

Monaco Editor教程（十）：如何系统学习monaco editor
背景 monaco editor教程已经发布了九篇了,根据文章的数据来看,阅读量还不错,这说明学习monaco 的开发者还是不少的,之前讲解的知识点都是比较零碎的,你根据之前的几篇文章,也能做出一个简 ...
Monaco Editor教程（一）：开源项目 monaco-editor 开启本地开发环境
最近monaco editor的官网大改版,由原来的jquery,改成react.版本也从我之前的0.34.几个月一路做火箭,升到了v0.36.1 专栏里有些官网链接无法查阅了,但读者都可以根据链接中 ...
Monaco Editor教程（二十）：在编辑器的某个特定位置插入自定义的dom内容，图片，表单，表格，视频
前言哇咔咔,这是我的第20篇Monaco教程,写完这一篇会暂时休息一段时间,练练字,存存稿,读读书,顺便修修文章. 目前全网成系统的monaco中文专栏应该只有我这一个,欢迎评论区打脸.自结束了Gi ...
Monaco Editor教程（五）：实现同时多文件编辑，tab切换
背景上一篇我们讲解了如何设置编辑器的值,获取编辑器的值,以及监听编辑器的内容修改.这些功能对于基础的单文件修改,一次只修改一个文件的业务场景比较友好.但如果是复杂的场景,比如WEB IDE,同时打开 ...
Monaco Editor教程（六）：切换主题，及自定义主题功能的实现
背景在实现一个WEB IDE时有些用户需要定制主题的功能,比如白色主题切换为黑色,这样会看起来酷一些. monaco的默认主题效果黑色主题效果下面我们一起看一下如何实现切换主题切换主题详解切 ...
Monaco Editor教程（十八）：使用api来完成某些键盘操作，格式化，查找，显示右侧菜单等。
背景在一般的Web IDE中,我们需要将经常用到的一些操作放到顶部操作栏里,类似语雀的文档编辑. 代码编辑器,一般也会放一些查找,格式化,撤销,恢复.有些人喜欢用快捷键来进行这些操作,但由于mona ...
Monaco Editor教程（七）：实现版本对比功能
背景在具有版本控制功能的WEB IDE 中,提交代码时,会有一个版本对比的功能,你可以点击每一个修改的文件,然后对比基础版本与当前修改的版本,被修改的地方会有颜色区分.这对于一个修改大文件,修改内容 ...
Monaco Editor教程（九）：聚焦到编辑器的指定位置，某行，某列
背景在GitLab查看一个文件时,我们可以点击行号,从而获得一个锚点,如下图, 点击后在url上会加上这个一个标识 #L18 用户可以分享该链接,其他用户通过该链接进入页面后,浏览器会自动滑动到用户 ...
Monaco Editor教程（八）：实现添加自定义命令，添加自定义菜单action功能
背景在monaco编辑器中已经有了很多指令,这些指令极大地方便了我们的编辑工作,比如用于查询的Ctrl+F 有时为了满足业务的需要我们需要自己添加一些指令,比如在按下End键,弹出提示编辑器的一些统 ...

Monaco Editor教程（三）：开启 Hello World demo示例

背景

Hello World

创建index.html

Monaco Editor教程（三）：开启 Hello World demo示例相关推荐

最新文章

热门文章