Monaco Editor学习记录

最新推荐文章于 2024-07-11 12:19:23 发布
最新推荐文章于 2024-07-11 12:19:23 发布
阅读量344 收藏
点赞数
文章标签： javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/danggang0317/article/details/108881338
版权
本文档介绍了如何开始使用Monaco Editor，包括通过命令行或VUE UI进行安装，以及在Vue项目中初始化编辑器的详细步骤。
摘要由CSDN通过智能技术生成

Monaco Editor学习记录

开始使用

安装

1.通过命令行安装 ：

npm install monaco-editor -S

2.通过VUE ui安装：
在这里插入图片描述

在模块引用

import * as monaco from 'monaco-editor';

<div class
最低0.47元/天 解锁文章
qianbw-Blog
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Monaco Editor编辑器教程（二三）：点击变量列表，与编辑器的光标处插入变量或方法，并进行特殊着色
知无涯
02-20 3766
最近有读者向我询问，在一个页面，做右侧有一个变量列表和方法列表，这些方法和变量有些是用户自己创建的，有些是系统内置的。要做的是点击变量或方法直接插入到右侧编辑器的当前光标处。除了插入到当前的光标处，还需要对插入的变量或方法进行一些特殊化显示。需要将这些方法名和变量名进行特殊的着色，并且设置一些自定义的备注或者mark。需求就是这样。下面我们就来分析并实现这一需求。像这样的需求，对于专门做编辑器的产品是很常见的。
Monaco Editor系列（二）Hello World 初体验
weixin_45855469的博客
04-03 1224
前言：上一篇文章我主要分享了从 Monaco Editor 入口文件以及官方提供的示例项目入手，对一部分源码进行剖析，以及分享了初始化阶段代码的大致执行步骤，这一篇了来讲一下我们要用 Monaco Editor 的时候该怎么用。其中会涉及到一些 API，我会对 API 的源码进行深入的解析，但不保证能完全看懂 😂。这种复杂的源码，不要着急，实在深入不下去，就换一个入口，继续探究，最后你学到的东西会呈网状交织在一起，覆盖到所有的代码。
Monaco Editor系列（四）版本对比、自定义右键菜单、光标滚动
weixin_45855469的博客
04-18 2906
在 Monaco 中，已经有很多现成的很好用的快捷键，例如 crtl+f 搜索代码。Monaco 其实还提供了接口，允许我们自定义命令。另外右键菜单里面的命令，和快捷键往往都是一对一的关系右键出来的菜单项的专业术语叫做Action。所以我们这一章就来学一学怎么自定义命令以及Action菜单项吧！我们来实现一个简单的命令，alert 弹出一句话添加自定义命令的方法是为了方便大家点击链接跳转，以后我就直接贴官网的文档链接啦！这个方法需要接受一个参数，类型为。
Monaco Editor 中文文档整理（超详细、超全面、带demo示例）
~朴：shu的博客
07-11 2883
对 Monaco Editor 官网的译文，翻译目前最新版本 V0.49.0，全网最全API，共计 500 + 文章，保持了与官网一致的目录结构，针对特定API提供了示例DEMO，方便用户更快速了解Monaco Editor 的使用。
Monaco Editor使用时右键功能菜单汉化
最新发布
Alice_124的博客
07-11 253
按照官方文档进行配置开发，就在自己觉得大功告成之际，右击编辑框，发现功能菜单是英文状态，然后就开启了我的右键功能菜单汉化之路。按照以上思路首先在Monaco Editor官方文档中进行一番搜索尝试无果后，开始转向相关第三方插件/库的寻找，最终找到了monaco-editor-esm-webpack-plugin和monaco-editor/loader。在Monaco Editor的整个使用配置过程中，我没有添加关于本地语言的配置，所以目前使用的应该是默认配置。vue.config.js文件。
Vue + monaco-editor
scelmx的博客
03-23 9254
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、monaco-editor是什么？二、使用步骤1.安装依赖2.编写组件总结 前言 最近接手了一个新项目，这个项目中有一个需求点就是需要展示json，并且可能还要编辑展示代码，然后我就去调研了关于代码编辑器的有关技术，经过对比决定使用monaco-editor。 提示：以下是本篇文章正文内容，下面案例可供参考 一、monaco-editor是什么？ monaco-editor一款代码编辑器，是微软开源的一个web编辑器，v
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
03-27
总的来说，React-Monaco-Editor是React开发中的一个强大工具，结合提供的源码和案例，开发者不仅可以快速地在项目中集成代码编辑功能，还能深入学习Monaco Editor和React组件化的实践技巧。通过不断研究和实践，你...
Java学习笔记
11-02
"Java学习笔记"中的"Java eclipse，设置字体的简单介绍"这部分内容主要聚焦于如何自定义和优化Eclipse的工作空间以提高代码阅读和编写体验。在Eclipse中，调整字体不仅关乎个人偏好，还对长时间编程时的眼睛舒适度有...
笔记本
02-12
8. **代码编辑器组件**：如Monaco Editor，提供类似VS Code的代码编辑体验。 9. **交互式编程**：Jupyter Notebook的实现，如CodeMirror或Ace Editor，提供代码执行和输出显示。 10. **存储和持久化**：利用...
SQLEditor:它是sql查询的编辑器，他可以加载，读取，保存和搜索查询
05-02
JavaScript库如ace.js或Monaco Editor等可以作为基础，构建具有上述功能的交互式编辑器界面。此外，通过AJAX技术，编辑器可以与后端服务器通信，执行SQL查询并获取返回结果。 在课程项目中，SQL编辑器可以用于教授...
Graph:[EXPERIMENTAL]一个强大，美观，可编程和丰富的图形编辑器，适用于学生，数据科学家，数学家以及任何想玩图的人！
05-27
4. **代码编辑器**：集成的代码编辑器可能采用了Monaco-Editor，这是由Microsoft开发的开源代码编辑组件，广泛用于VS Code等项目。Monaco-Editor提供了语法高亮、自动完成、错误检查等功能，提升了代码编写体验。 5...
vue使用Monaco editor
热门推荐
技术改变生活
07-08 1万+
1、项目中使用monaco-editor首先要安装 npm install monaco-editor -S 2、在组件中引用并使用：初始化、更改内容、销毁 <template> <div ref="container" style="height: 360px;width: 100%;"></div> </template> <script> import * as monaco from 'monaco-editor' ex
vue2引入monaco-editor，封装以及常见问题踩坑总结
qq_37325838的博客
03-04 3198
十分重要，首先，要找到跟当前vue版本匹配的monaco-editor版本，我是用的是vue2.x，尝试了最高支持的版本是monaco-editor 0.30.1，同时要实现代码提示需要引入与之匹配的的monaco-editor-webpack-plugin，这里我引入的是 6.0.0，亲测能完美实现代码提示。这几天使用业务中有一个需求是需要做代码在线编辑，因此对比了下首先想到了monaco-editor，但是实测引入到项目中会遇到一些坑点，因此将引入流程和坑点进行梳理。
mysql kindediter_Monaco Editor 使用入门
weixin_29970399的博客
01-19 704
以前项目是用ace编辑器的，但是总有些不敬人意的地方。前端事件看见的VS Code编辑器Monaco Editor准备更换下，下面介绍一些使用中遇到的一点问题。代码提示1.项目引用import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';项目中引用了editor.api.js，但是这个文件不包含一些默认的语言和插件，所以在使用...
vue2 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
m0_37378152的博客
10-11 5296
vue2 monoca-editor使用SQL：自动补全、自定义颜色、格式化代码、标记错误
Monaco Editor 的基本使用及 Vue 组件封装
paper_umbrella的博客
06-26 988
monaco-editor代码编辑器
vue2项目 monaco-editor 使用心得
valsedefleurs的博客
04-26 2170
现总结一下在vue2项目安装使用monaco-editor走过的一些弯路。
摩纳哥编辑器 monaco editor 中文示范 react 版本
ITer_hua的博客
04-02 6719
1、网上react 版本的样例很少，更多的是使用 react-monaco-editor 的react版本，担心封装的不够强大，于是在react 里用的原生组件 代码示例如下，可供参考 class Index extends React.Component { componentDidMount() { const { path, value, language, onValu...
monaco editor 在React中的使用 封装成组件
shuxiaoxii的博客
03-04 1590
import React, {useEffect, useRef, useState} from 'react'; import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'; /** * 2021年2月26日 13:20:14 * MonacoEditor 组件 * props详情 请看下方 const { style = .....} * */ function App(props) { const { .
monaco editor教程
06-08
Monaco Editor 是一款由微软开发的基于浏览器的代码编辑器，它的核心部分是来自 Visual Studio Code 的编辑器核心 - VS Code Editor。Monaco Editor 具有高级代码...希望这些资源能够帮助你学习和使用 Monaco Editor。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值