~朴：shu的博客

我们通过FileSystemFileHandle可以进行文件内容读取、修改文件内容等文件相关操作，同时，利用FileSystemDirectoryHandle提供的能力，可以实现点击上传并识别文件夹目录，对文件夹内文件进行内容读取，还利用DataTransferIt，实现了拖拽上传文件/文件夹，利用其能力，也能识别文件夹目录及对文件进行读取操作。同时，拖拽上传还支持纯文本哈，const data = e.dataTransfer?这也是一些白板、Canvas-Editor、流程图 从外部拖拽上传实现的原理。

对 Monaco Editor 官网的译文，翻译目前最新版本 V0.49.0，全网最全API，共计 500 + 文章，保持了与官网一致的目录结构，针对特定API提供了示例DEMO，方便用户更快速了解Monaco Editor 的使用。

前面两篇文章，我们简单讲述了 WebContainer/api 、Terminal 的基本使用，离完备的在线代码编辑器就差一个代码编辑了。今天通过 monaco editor ，来实现初级代码编辑功能，讲述的是整个应用的搭建，并不单独针对monaco editor的使用哈，因为Monaco editor 确实有些难度，仅在使用到的API 、功能模块上做讲解。如果大家有需要，可以留言，会考虑后期做一篇monaco的保姆级教程。

一个由 Vue 构建的支持多内容格式显示的网页端命令行窗口插件，支持表格、json、代码等多种消息格式，支持自定义消息样式、命令行库、键入搜索提示等，模拟原生终端窗口支持 ← → 光标切换和 ↑ ↓ 历史命令切换。

随着web技术的发展，在网页端直接运行node.js、实现微型操作系统已经不再是难事。今天介绍的 WebContainers就是一个基于浏览器的运行时，用于执行 Node.js 应用程序和操作系统命令，它完全运行在您的浏览器页面中，提供了文件系统、运行进程的能力，同时内置了 nodejs、npm/yarn/pnpm 等包管理器。也就是说，基于WebContainers，可以直接在网页端运行 node -v、npm install、npm run dev等命令，甚至能对文件系统进行操作。