Monaco Editor教程(二十):在编辑器的某个特定位置插入自定义的dom内容,图片,表单,表格,视频

这篇具有很好参考价值的文章主要介绍了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中见过这样的操作页面。
文章来源地址https://www.toymoban.com/news/detail-414769.html

到了这里,关于Monaco Editor教程(二十):在编辑器的某个特定位置插入自定义的dom内容,图片,表单,表格,视频的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue集成Monaco Editor的使用,以及开发Python代码编辑器和Sql等

    ​微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的是,

    2024年02月11日
    浏览(55)
  • 富文本编辑器 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脚本编辑器 在无界中使用 鼠标点击不到

    背景A项目使用无界引入B项目 经排查,是B使用的的monaco脚本编辑器无法在A的无界框架中引入的问题。 经查询,需要修改monaco源码来使之能在无界中使用。 解决方案:https://github.com/Tencent/wujie/issues/205。 有三种解决方案: 1、在A的无界提供的jsloader插槽中加入代码,从而修改

    2024年02月22日
    浏览(37)
  • 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)
  • Editor.md-编辑器

    你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 我们对Markdown编辑器进行了一些功能拓展与语法支持,除了标准的Markdown编辑器功能,我们增加了如下几点新功能,帮助你

    2024年03月12日
    浏览(49)
  • Unity Editor 编辑器介绍

    Project 窗口 :列出所有的资源 Console 窗口 :日志输出 Hierarchy 窗口 :在Project 窗口选择一个 Scene 场景后,会在这个窗口显示这个构成这个场景的所有游戏对象 Inspector 窗口: 在 Hierarchy窗口 或 Project 窗口中选择任何一个资源,Inspector窗口 显示与这个资源相关的所有属性。 S

    2024年02月16日
    浏览(43)
  • uniapp中使用编辑器editor

    开发小程序时,想要在手机上添加编辑内容,使用u–textarea时,换行操作不显示,为此使用了uniapp自带的组件editor来实现: 具体可参考官网:https://uniapp.dcloud.net.cn/component/editor.html

    2024年02月07日
    浏览(44)
  • 微信小程序editor富文本编辑器

             在开发小程序的时候,需要用到发布文章这个功能,于是就需要使用富文本编辑器。而微信小程序则正好有editor这个组件,不过editor组件的功能,还需要我们自己去调用富文本编辑器的api去自定义。富文本在wxml中可使用rich-text nodes=\\\"{{ value }}\\\"/rich-text标签展示。想

    2024年02月09日
    浏览(68)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包