monaco页面代码编辑器

最新推荐文章于 2024-06-26 10:17:01 发布
最新推荐文章于 2024-06-26 10:17:01 发布
阅读量275 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42635033/article/details/109652166
版权

表单校验用这个: https://github.com/farhadniaz/vue-joi-validation

文本编辑器用这个: https://github.com/egoist/vue-monaco

不爱吃香菜的蟹老板
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
monaco-editor：基于浏览器的代码编辑器
02-06
摩纳哥编辑 Monaco编辑器是为提供支持的代码编辑器，对功能进行了更好的描述。 请注意，该存储库不包含代码编辑器的源代码，仅包含将所有内容打包在一起并运送monaco-editor npm模块的脚本。 试试看 尝试编辑器。 正在安装 $ npm install monaco-editor 你会得到： 内部esm ：编辑器的ESM版本（例如与webpack兼容） 内部dev ：AMD捆绑销售，未缩小 一min ：AMD捆绑并缩小 内min-maps ：源映射为min monaco.d.ts ：这指定了编辑器的API（这是实际的版本，其他所有内容都视为私有的，并且可能随发行版而中断）。
微软的monaco代码编辑器
03-09 834
monaco代码编辑器是vscode前身，能编写js,css,c#,c,sql,c++,java等许多语言。 写了几个后台接口，能让前台编辑，保存后台js,css,html代码。有点vs的味道。
Monaco Editor 的基本使用及 Vue 组件封装
最新发布
paper_umbrella的博客
06-26 1240
monaco-editor代码编辑器
react-app框架——使用monaco editor实现online编辑html代码编辑器
热门推荐
编程知识分享，主打前端
01-18 2万+
大家好，我是yma16，本文分享关于 react-app框架——使用monaco editor实现online编辑html代码编辑器。monaco editor 编辑器Monaco Editor是一款功能强大的Web编辑器，由微软开发并使用在多个项目中。它是基于VS Code编辑器的核心组件，具有类似的功能和用户体验。轻量级：Monaco Editor具有出色的性能，可以快速加载和渲染大型文件。可定制性：用户可以通过添加自定义插件和主题来扩展和个性化编辑器。
monaco-html:摩纳哥编辑器HTML语言插件
05-06
摩纳哥HTML 摩纳哥编辑器HTML语言插件。 编辑HTML文件时，它提供以下功能： 代码完成 格式设定 文件重点 链接检测 语法高亮 HTML插件在内部使用节点模块，提供上述功能的实现。 也使用同一模块来增强HTML编辑体验。 问题 请在有关monaco-html问题。 正在安装 此npm模块捆绑并分发在npm模块中。 发展 git clone https://github.com/Microsoft/monaco-html cd monaco-html npm install . npm run watch 在您喜欢的浏览器中打开$/monaco-html/test/index.html 。 执照
monacoeditor一个基于浏览器的代码编辑器
08-10
一个基于浏览器的代码编辑器，采用VS Code开发
Asp.Net Core 使用Monaco Editor 实现代码编辑器
wdjnb的博客
01-05 1300
在项目中经常有代码在线编辑的需求，比如修改基于Xml的配置文件，编辑Json格式的测试数据等。我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能。Monaco Editor是著名的VSCode的前身，项目地址：Monaco Editor。本文介绍在Asp.Net Core项目中使用Monaco Editor实现代码编辑器功能。 安装 可以使用npm下载moaco-editor: npm install monaco-editor@0.31.1 我们需要的文件在node_m
monaco-react:适用于React的Monaco编辑器-在任何React应用程序中使用monaco编辑器，而无需使用webpack（或rollupparceletc）配置文件插件
04-03
适用于React的Monaco编辑器·可在任何应用程序中使用，而无需使用webpack （或rollup / parcel / etc / etc）配置文件/插件 :high_voltage: 已经支持； 好好享受 :party_popper: :party_popper: 版本v4在这里-要...
Monaco Editor源代码
03-18
Monaco Editor是一款由微软开发并开源的代码编辑器，它基于Visual Studio Code（VS Code）的核心技术，专门设计用于在浏览器环境下运行。Monaco Editor以其强大的功能和易用性，深受开发人员的喜爱，尤其适合在线...
react-monaco-editor摩纳哥的React编辑器-源码,案例可以借鉴
03-27
React-Monaco-Editor是一款基于Microsoft的Monaco Editor构建的React组件，它允许开发者在React应用中集成一个功能强大的代码编辑器，尤其适用于Web开发中的代码编辑、预览和调试场景。Monaco Editor是VS Code的核心...
Monaco Editor编辑器教程（三一）：在编辑器中实现模拟调试的交互
知无涯
05-15 3807
最近有小伙伴咨询如何在编辑中实现 像vscode调试代码那样，可以打断点，可以高亮当前运行的一行。这样的需求并不多见，如果要做，那肯定是对编辑器做一个深层次的定制。一般很少很少会实现这种在浏览器中调试。目前我还没见过，如果有遇到过的朋友可以指点一下。我去学习一下。废话不多说，既然读者提出这样的要求，那肯定是有场景的。只是自己没有遇到过。于是自己调研了一番， 勉强使用与行高亮实现了。下面讲解一下。
monaco-json:摩纳哥编辑器的JSON语言支持
05-06
摩纳哥JSON 摩纳哥编辑器的JSON语言插件。 编辑JSON文件时，它提供以下功能： 基于JSON模式或通过查看同一文件中的相似对象的代码完成 悬停，基于JSON模式 验证：语法错误和架构验证 格式设定 文件符号 语法高亮 匹配包含以下format: "color-hex"'的模式的所有属性的颜色修饰符format: "color-hex"' （非标准模式扩展名） 架构可以通过配置来提供。 请参阅以获取JSON插件提供的用于配置JSON语言支持的API。 JSON插件在内部使用节点模块，提供上述功能的实现。 也使用同一模块来增强JSON编辑体验。 问题 请在有关monaco-json问题。 正在安装 此npm模块捆绑并分发在npm模块中。 发展 git clone https://github.com/Microsoft/monaco-json npm install . 用
browser-ext-github-monaco：此扩展将著名的摩纳哥编辑器带到Github
01-30
GitHub的Monaco Markdown编辑器（Chrome / Firefox） [ ] [] 这个Chrome / Firefox扩展程序将著名的摩纳哥编辑器带到GitHub！ 摩纳哥特色 Markdown和代码段的语法突出显示 使用Tab键缩进，使用Shift + Tab键缩进整个选择 多光标编辑 以及更多 附加功能 按F11切换全屏。 如果有足够的空间，则全屏模式会预览降价活动。 Github功能 自动完成问题，提及和表情符号。 该扩展使用monaco编辑器替换了所有用于编写markdown的GitHub文本区域。 演示版 全屏模式 建造 您需要nodejs和yarn。 只需运行以下命令，即可在dist文件夹中生成extension.zip ： yarn yarn build
monaco-typescript, 摩纳哥编辑器的打字/javascript语言支持.zip
10-10
monaco-typescript, 摩纳哥编辑器的打字/javascript语言支持 摩纳哥打字机摩纳哥编辑器的简单绘图和JavaScript语言支持。 注意：这个项目关注单个文件场景，比如项目隔离( 如重命名 等等 ) 是外部的，而不是这个项目的范围，不支持这个项目。问题请在 monaco-editor 存储库
monachrome:Google Chrome扩展程序，可在任何网站中将文本区域转换为摩纳哥编辑器
05-22
莫纳chrome 一个Google Chrome扩展程序，可在任何网站中将文本区域转换为monaco编辑器。
Monaco Editor编辑器教程（三二）：编辑器中有关事件的汇总，鼠标事件，内容变更，模型变更
知无涯
05-18 3845
在monaco 编辑器中，有很多事件，鼠标事件，滚动条事件，按键事件。鼠标事件中又区分点击，悬浮，移动事件，而点击事件又区分点击区域。本篇文章就来汇总地讲解一下Monaco编辑器汇总事件的用法以及相关API。
monaco editor 代码高亮编辑器
c_x_m的博客
06-08 916
monaco editor
Monaco Editor系列（一）启动项目与入门示例解析
weixin_45855469的博客
03-20 6390
本篇从 Monaco Editor 下载、启动开始，顺着入口文件以及示例 Hello World 项目的脉络，学习了源码的执行过程。学习这种大型项目的源码一定要有耐心，另外就是在学习的过程中需要查漏补缺，遇到不会的东西补一补，慢慢的积累。
pyqt5 Monaco Editor 从0做一个代码编辑器
06-08
Monaco Editor是一个由微软开发的Web代码编辑器，支持语法高亮、自动补全、代码折叠等功能，可以用于开发各种类型的代码编辑器。在PyQt5中，我们可以使用QWebEngineView控件来嵌入Monaco Editor，实现一个代码编辑器。 以下是一个简单的示例，演示如何使用PyQt5和Monaco Editor创建一个代码编辑器： ```python import sys from PyQt5.QtWidgets import QApplication, QWidget, QVBoxLayout from PyQt5.QtWebEngineWidgets import QWebEngineView class CodeEditor(QWidget): def __init__(self): super().__init__() # 创建布局 layout = QVBoxLayout() # 创建Web视图 web_view = QWebEngineView(self) # 加载Monaco Editor网页 web_view.setHtml(''' <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Monaco Editor</title> <script src="https://cdn.jsdelivr.net/npm/monaco-editor/min/vs/loader.js"></script> <script> require.config({ paths: { 'vs': 'https://cdn.jsdelivr.net/npm/monaco-editor/min/vs' }}); require(['vs/editor/editor.main'], function() { var editor = monaco.editor.create(document.getElementById('editor'), { theme: 'vs-dark', language: 'python' }); }); </script> </head> <body> <div id="editor" style="height: 600px;"></div> </body> </html> ''') # 添加Web视图到布局 layout.addWidget(web_view) # 设置窗口布局 self.setLayout(layout) if __name__ == '__main__': app = QApplication(sys.argv) editor = CodeEditor() editor.show() sys.exit(app.exec_()) ``` 这个示例创建了一个PyQt5窗口，嵌入了Monaco Editor。在加载Monaco Editor网页时，我们指定了主题为“vs-dark”，语言为“python”。你可以根据自己的需求，修改主题和语言设置，来实现一个符合自己需求的代码编辑器。 需要注意的是，Monaco Editor是一个基于Web的编辑器，需要从远程服务器加载相关资源，因此在使用PyQt5嵌入Monaco Editor时，需要保证网络连接正常。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值