![](https://img-blog.csdnimg.cn/direct/0daa6ca627684061a0a44ea933cd1c72.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Web IDE技术讲解
文章平均质量分 90
以 Web Container 、monaco-editor、Terminal 实现在线web代码编辑器,类似 Web VS Code
~朴:shu
这个作者很懒,什么都没留下…
展开
-
Monaco Editor 中文文档整理(超详细、超全面、带demo示例)
对 Monaco Editor 官网的译文,翻译目前最新版本 V0.49.0,全网最全API,共计 500 + 文章,保持了与官网一致的目录结构,针对特定API提供了示例DEMO,方便用户更快速了解Monaco Editor 的使用。原创 2024-07-11 09:58:48 · 2832 阅读 · 0 评论 -
Web IDE 在线编辑器综合实践(Web IDE 技术探索 三)
前面两篇文章,我们简单讲述了 WebContainer/api 、Terminal 的基本使用,离完备的在线代码编辑器就差一个代码编辑了。今天通过 monaco editor ,来实现初级代码编辑功能,讲述的是整个应用的搭建,并不单独针对monaco editor的使用哈,因为Monaco editor 确实有些难度,仅在使用到的API 、功能模块上做讲解。如果大家有需要,可以留言,会考虑后期做一篇monaco的保姆级教程。原创 2024-06-05 17:31:12 · 1367 阅读 · 3 评论 -
Terminal Web终端基础(Web IDE 技术探索 二)
一个由 Vue 构建的支持多内容格式显示的网页端命令行窗口插件,支持表格、json、代码等多种消息格式,支持自定义消息样式、命令行库、键入搜索提示等,模拟原生终端窗口支持 ← → 光标切换和 ↑ ↓ 历史命令切换。原创 2024-05-21 09:44:39 · 1588 阅读 · 1 评论 -
WebContainer/api 基础(Web IDE 技术探索 一)
随着web技术的发展,在网页端直接运行node.js、实现微型操作系统已经不再是难事。今天介绍的 WebContainers就是一个基于浏览器的运行时,用于执行 Node.js 应用程序和操作系统命令,它完全运行在您的浏览器页面中,提供了文件系统、运行进程的能力,同时内置了 nodejs、npm/yarn/pnpm 等包管理器。也就是说,基于WebContainers,可以直接在网页端运行 node -v、npm install、npm run dev等命令,甚至能对文件系统进行操作。原创 2024-05-20 16:56:48 · 1411 阅读 · 1 评论