Monaco Editor教程（二十）：在编辑器的某个特定位置插入自定义的dom内容，图片，表单，表格，视频

前言

哇咔咔，这是我的第20篇Monaco教程，写完这一篇会暂时休息一段时间，练练字，存存稿，读读书，顺便修修文章。
目前全网成系统的monaco中文专栏应该只有我这一个，欢迎评论区打脸。自结束了GitLab CI/CD的专栏后，我就一直在利用业余时间学习Monaco相关的知识，一是为了弥补公司项目上的不足，二是看准了这东西以后肯定会大放异彩。不过目前它还是处于VS Code的光彩下。你说vscode大家都知道是啥，你说摩纳哥编辑器，大家就会问你，这是啥玩意。monaco editor是vscode的核心编辑器，vscode就是基于它开发出来的。

说实话，虽然写了20篇文章，但感觉还是只学到了一点皮毛，对于很多特性还没有时间去研究，去思考它们的使用场景，以及如何为项目赋能。 马上过年了，暂时休息一段时间，好好规划一下后面的内容。

在写这一篇文章之前其实有两个选题，一是介绍创建monaco的参数配置，从那100多个配置参数中找几十个常用参数 一一分析他们的作用和使用场景。另一个选题就是在编辑器中插入一下自定义的dom元素，包括实现一个评论区域，表单，弹层。前一个选题对新手很学习很有帮助，网上也有些零碎的文章介绍。后一个选题比较少。这也是我写这篇文章的原因。不为别的，只因很酷。

技术分析

前言写了500多字，在加300字就能当做高考作文了。
今天要解析的功能 是monaco中一个很重要的特性。就是在编辑器中加入一些自定义的dom元素。
如果你的公司使用gitlab 你可能在一个MR中见过这样的操作页面。