去年针对WebShell做了编辑器功能，截止到目前才算是稳定。这里总结下
调研
- 终端类产品很少有做编辑器支持的，仅仅只是支持了SFTP。
设计
实现
这里列下关键的实现点
- 服务端SSH连接用户机器执行code-server安装运行
- 服务端SSH forward内网支持代理访问内网code-server服务
- 服务端搭建代理服务器接收浏览器请求再转发到用户机器从而访问code-server服务
写在最后
done!
WebShell中实现编辑器代理
本文是作者对WebShell中实现编辑器代理的介绍，包括WebShell中实现编辑器代理的优势、实现细节、相关资料等，这些步骤可以帮助作者提高WebShell中实现编辑器代理的效率。
- xterm-headless介绍
- 输入框实现自动补全效果
- WebShell下拷贝粘贴支持
- WebShell中实现命令面板
- WebShell中实现图片显示
- WebShell中实现SFTP文件管理
- WebShell中接入AI
- Linux下ls命令中的time-style参数
- xterm-addon-web-links使用
- WebShell中实现前端图片压缩
- WebShell中实现终端自定义背景图
- WebShell中实现网页添加到桌面
- OpenAI实现根据描述创建shell命令
- SFTP 续传完整指南：ssh2-sftp-client 断点续传实战教程
- 浏览器指纹
- Linux机器免密登录
- WebShell中获取任意文件所在当前目录
- ssh2连接时设置环境变量
- SSH2开启会话时指定启动文件可行性分析
- OpenCloudOS SSH连接执行报错
- Shell里判断CPU架构
- AI聊天中使用SSE
- xterm中的attachCustomKeyEventHandler
- FileReader读取大文件
- xterm终端写入欢迎信息
- $TERM介绍
- ssh2包介绍
- WebShell中实现右键文件下载
- ssh登录失败-Connection reset by peer
- SSH登录GitHub失败
- FreeBSD密码登录报错timeout
- WebShell中热键规划
- Ubuntu 22.04 SSH-RSA登录失败
- ssh2-sftp-client使用介绍
- WebShell中实现sz/rz上传下载
- iframe
- Web性能优化之重排重绘
- Web中HashRouter与BrowserRouter选择
- 关于Error Boundaries
- 网站添加opensearch
- 油猴使用
- node命令中的inspect
- 前端开发常用npm包
- JS中打开新页面方式
- guacamole-common-js
- 线上故障-隐藏的定时器问题
- Mousetrap使用指南
- Keyboard Lock API 怎么用？网页锁定键盘输入的使用指南
- css使用-has函数
- Shell安装使用
- WebShell实现终端搜索
- monaco-editor使用
- AntiDebug实现
- 升级博客主题:2.0
- 部署个人 chatgpt-telegram-bot
- ssh2-HTTPAgent源码阅读
- 了解OneKey硬件钱包
- Twitter Card分享配置
- 了解Ledger硬件钱包
- 个人 AI 常用的 MCP 清单及安装方法
- OpenClaw(小龙虾) 部署硬件要求：服务器配置推荐与性能需求指南
- OpenClaw(小龙虾) MCP 配置教程：如何让 AI 助手接入第三方工具
- 使用Tapd MCP
- 腾讯云静态资源迁移到 Cloudflare R2 完全指南
- 使用AI构建一个前后端项目
- 使用miniprogram Ci实现微信小程序自动发包
- Claude Code结合Exa MCP
- 使用Web Scraper爬取网页站点数据
- Antigravity + Figma MCP Server使用教程：免费AI前端开发工具配置指南
- 利用Claude Code创建Claude Skills
- Codex下自定义斜杠命令
- Claude Pro尼日利亚低价区订阅教程：最便宜的开通方法与支付指南
- 使用Gemini CLI
- WakaTime小程序客户端
- Waline评论实现邮件通知
- Claude Code下自定义斜杠命令
- Claude Code + Codex联合使用教程：双AI编程工具配置与实战指南
- Codex + Figma MCP Server配置教程：AI自动生成前端代码实战指南
- Claude Code + Figma MCP Server配置教程：AI驱动设计稿转代码
- PB生成 Grpc Web和Grpc SDK
- Claude桌面App配置Chrome DevTools MCP教程：AI调试网页完整指南
- 关于网页剪贴板拷贝失效问题
- 使用hugoblox
- OpenAI Codex是什么？安装配置与使用完全指南
- Claude Code ccstatusline 安装教程：实时监控额度、模型与使用情况
- Claude Code太贵怎么办？接入 DeepSeek 的低成本使用教程
- 使用corepack
- Claude Pro美区订阅教程：开通方法、支付方式与 Claude Code 使用说明
- 小程序头像昵称获取
- Claude Code是什么？安装、配置与使用完全指南
- 了解Tailwind
- 嵌套对象的keyof
- NotebookLM 音频播客实测：目前的几个缺点
- 如何使用API提交百度收录
- 博客从hexo迁移到hugo
- VSC下dart开发指南
- 使用taro开发小程序
- fvm使用指南
- TS编译打包
- 前端基础题-P3
- Webpack会有6吗
- React Hook Form使用指南
- nextjs项目构建发布速度优化
- EventEmitter中的once处理
- VSC WebView中加载node_modules资源
- VSC拓展国际化支持
- HTTP请求报文中的Host字段
- Cloudfare安全检查
- node-sass 停止维护
- Cursor中使用Firecrawl MCP
- GitLink for VSCode: 跨平台代码分享的无缝体验
- GitHub Action构建实时监控网页排名
- 网页开发-ios键盘底部显示搜索按钮
- ESLint使用指南
- WebPack插件实现变量名自动修改
- npm缓存
- openresty使用指南
- vite构建工具下前端浏览器兼容性处理
- 检测并删除项目中不用的依赖包
- 流水线优化-缓存目录
- Alfred实现一键打开VSCode项目
- 命令行git操作重复提示账号密码
- nodejs部署在多核机器上是否存在资源浪费
- 了解peerDependencies
- click-to-component源码阅读
- 通过GitHub教育认证，免费使用Copilot
- 利用click-to-component提升开发体验
- 了解JetBrains URL Scheme
- gzip压缩无效？
- react-hook-form中的useFieldArray
- iframe下实现站点免密登陆
- monaco-editor实现语法高亮
- Git Merge时选择哪个
- a标签中的自定义target
- 快速修复开源社区repo的bug
- 了解ua-parser-js
- 前端可视化图编辑技术
- babel-plugin-import介绍
- npm命令下的registry不work
- redux-logger tree shaking不work
- monaco-editor实现SQL代码补全
- 前端模块导入方式对打包体积的影响
- WEB中监听网络断开
- 了解ShellCheck
- Wave Terminal使用评测：这款开源终端到底好在哪？
- 本地登录Google虚拟机
- Webpack中自定义SourceMap生成
- tar: Ignoring unknown extended header keyword
- Shell中支持autosuggestion
- filesaver源码解读
- node项目下的安全组件扫描处理
- 浏览器network中的ping请求
- login shell
- 流写入文件时造成的文件内容被清空问题
- parseInt
- 通过腾讯云函数理解下serverless
- nodejs项目中下加载esmdule
- 了解shebang
- PowerShell常用命令
- Terminal的URL-Scheme支持
- GitHub开源项目提交PR
- Pnpm结合Vite进行本地包调试问题
- js中str.trim方法
- HTTP3使用指南
- hexo下常用插件
- GitHub Copilot CLI使用
- 文件下载引发的网页崩溃
- input文件上传时取消事件监听
- Cannot use import statement outside a module
- 关于npm publish发包
- Google Cloud免费试用3个月
- whoer中DNS查询原理
- alternate screen介绍
- 了解Makefile
- Linux文件权限
- 微信公众号上传GitHub图片失败
- 什么是终端模拟器
- 腾讯云API文档docset
- 小程序端海报绘制中图片空白问题
- npm开发依赖
- 拓展JetBrains Toolbox App browser extension
- Telegram Bot开发
- --help与man命令区别
- 博客服务迁移到腾讯云香港
- iTerm2结合tmux使用
- 域名转入转出
- 申请Github Sponsor
- storybook title自动追加前后缀
- 远程开发工具
- Whistle插件开发-remote-rules
- 第三方包中全局类型定义不work问题
- HTTPS证书吊销
- 文件上传accept的兼容性问题
- JS中实现私钥导出公钥
- React中的ref
- 组件库文档搭建-Storybook
- 群晖Chrome下载插件只支持HTTPS
- nginx njs实现上传
- StoryBook打包报错
- Docker拉取私服镜像
- CSS中的Alpha
- JS下的Composition Event
- Web Worker使用
- react-window使用
- 前端项目中增加全局常量设置
- 升级博客主题
- 前端项目代码批量替换域名问题
- 了解process.env.NODE_ENV
- grpc-web demo跑起来
- npm安装包-遇到的warn信息
- 利用工具提升前端代码质量-微信小程序
- 关于Whistle抓包HTTPS的疑问
- 微信小程序开发常见问题
- Hexo博客构建性能优化
- 了解RTL
- Docker Postgre部署问题
- Ionic开发
- 文件权限导致的nginx访问报错
- 线上问题-ERR_CONNECTION_CLOSED
- 给开源项目贡献TS类型声明
- 前端项目构建打包部署Docker部署化
- TypeScript中一些特殊类型
- 线上问题-渲染异常
- 前端压缩包下载遇到解压失败问题
- Mac中的.DS_Store
- react/display-name
- js arguments
- tsc编译到es3
- package.json中的sideEffects
- ZIP文件上传解析
- 开发Alfred JS SDK
- 了解redux-duck
- 开启GitHub两步验证
- 编写一个GitHub Action去统计仓库被star数
- 线上问题-HTTPS证书错误
- JS中的==运算符
- 了解CDN
- v8-debug安装
- 前端工作流之脚手架
- JS扫盲之原型链
- Webpack4升级至5
- 容易出错的export语句
- JS扫盲之Proxy，Reflect
- Web安全之CSRF
- 前端代码安全
- 自适应布局&响应式布局
- JS下的Promise
- 同源,CSP与CORS
- HTTP发展历程
- 傻傻分不清的splice与slice
- Array.join vs Template strings vs String concatenation
- 12306首页可以做的前端优化项
- window.opener
- js中的Maximum call stack size exceeded
- margin-top的百分比设置
- GitHub开源项目协作开发流程
- 利用工具提升前端代码质量-SonarQube
- 使用开源项目申请JetBrains License
- JavaScript数组中的undefined项
- 内联JavaScript实现事件绑定
- MySQL左连接查询记录行数
- GitHub项目被Star后，进行Telegram消息通知
- 前端表格性能优化
- yield与yield*区别
- TypeScript下拓展AxiosRequestConfig类型定义
- 前端存储方案
- Jenkins持续集成-发布NPM新包
- 泛域名证书申请
- 前端基础题-P2
- 前端基础题-P1
- Git快照是什么
- 需要注意的编码问题
- Web性能优化之降低渲染次数
- JIT vs AOT
- React componentWillUnmount的局限性
- TypeScript的Enum与ES6的Symbol
- rsync total size is 0 speedup is 0.00
- JavaScript中正则表达式-字面量VS构造函数
- 终端Shell配置网络代理
- 关于TypeScript的认识
- 生产数据库批量更新数据的一点实践
- 每日一题-写出页面渲染值
- 每日一题-修改代码不造成死循环
- Git log中的父子commit
- TypeScript升级到v4
- 美团网首页HTML源码阅读
- 利用工具提升前端代码质量-StyleLint
- Jenkins持续部署-邮件通知ChangeLog
- JavaScript事件循环
- 项目代码统计
- Pro Git读书记
- GitLab使用中的一些实践技巧
- 利用工具提升代码质量-规范化Git Commit
- Git配置之根据多Git仓库使用不同配置
- CI优化-自动发起MR
- ionic下Android环境搭建
- package.json中的一些使用技巧
- 双向数据绑定
- 闭包认知
- 懒加载原理
- 花式console
- HTML空格显示问题
- 浏览器原生支持JS Base64
- ESLint共享配置
- 常见算法题
- 软件度量-圈复杂度
- JS开发调试下的断言实践
- P标签中不能包含块级元素
- 废弃的componentWillReceiveProps
- react-intl v3升级
- 项目引入WebSocket-集群场景
- 页面字体闪烁问题
- no-nested-ternary
- 阿里巴巴Java开发手册阅读
- TypeScript装饰器实践
- 架构决策记录-ADR
- 谷歌工程实践-CR，MR
- 站点安全-CSP
- tslint迁移至eslint
- ts-loader迁移至babel-loader
- 提升Redux Saga报错可读性
- Redux Saga实现loading中间件
- Beginning CSS Preprocessors读书记
- 前端编程大小写风格问题
- React中事件处理器命名规范【译】
- window.open扫盲
- JS精度计算-big.js&mathjs选型
- 消灭TS项目中的Dead Code
- HAR 文件的使用指南：记录和分析网页请求
- React项目进行框架升级
- yarn.lock中的integrity
- 引入CheckStyle提升Java代码质量
- Redux State中的deep clone
- JavaScript method vs function vs member
- Git团队开发流程规范-MR冲突
- Effective JavaScript读书记
- Antd使用中的需注意的细节
- 关于CodeReview中代码覆盖范围的思考
- 我为什么讨厌lodash
- npm依赖模型
- Antd表格表头与内容单元格没对齐问题
- JS进行时间格式化
- redux-saga-promise
- regeneratorRuntime is not defined
- IDEA插件-NPM包版本历史
- TypeScript中implements与extends的区别
- NPMJS发布公共包
- 前端不要使用尤达表达式
- NPM间接依赖包版本问题
- TypeScipt中unknown与any区别
- Axios全局异常拦截与个性化异常处理
- Redux Saga辅助函数
- Duplicate identifier LibraryManagedAttributes
- React Props的只读性
- 聊聊HTTP库Axios
- 利用工具提升前端代码质量-版本自动化
- 前端包发布到npm私服
- Dictionary vs Map vs Object
- 将VSC打造成配合IDEA的工具
- React在TypeScript使用中的类型问题
- 前端API层治理
- TypeScript中的interface vs Type
- JetBrains IDE常用插件
- React调试-插件篇
- Redux-Thunk源码阅读
- 前端tree shaking
- React项目单元测试
- Jest单元测试配置
- JSX.Element vs React.ReactNode
- 前端路由设计
- 关于Redux-Saga中put操作的误解
- Webpack HMR介绍
- TSLint并不check TypeScript错误
- Redux-Saga中的异常处理
- 项目中Less与CSS modules的实践
- 家里群晖NAS DDNS设定
- IDEA打磨之路-Live Templates
- TypeScript下的类型转换
- 前端WEB字体使用介绍
- Jest下Less导入报错
- 前端React项目结构及一些约定
- 前端国际化文件拆分
- Angular7升级至8
- idea plugin开发
- Angular6升级至7
- 博客平台的自动化部署
- 【译】Redux Saga测试库比较
- 【译】JUnit测试下的Given-When-Then
- 记一次前端运行白屏
- dependencies vs devDependencies
- 利用工具提升前端代码质量
- Git下merge与rebase区别与选择
- React下的Redux使用
- 【译】JavaScript的一些核心概念
- 谈谈同步，异步与跨域
- Angular VS React【译】
- OpenConnect怎么用？用 Shell 简化连接与登录流程
- 聊聊Babel与TSC
- 【译】Node10新在哪
- Docker常用命令
- 将博客服务迁移到国内服务器
- 【译】Promises vs Observables
- 【译】TypeScript vs. JavaScript: 应该移植项目到TypeScript吗?
- Angular项目中如何引入第三方JS
- Cannot find module inherits
- Docker初次尝试
- hexo-error
- [译]Boostrap3 vs 4
- 基于Hexo创建博客写作平台
- Nginx配置只支持域名访问WEB
- 给网站上HTTPS
- Nginx透传用户IP
- [译]Angular1 2 区别
- Angular5升级至6
- 前端静态资源版本控制
- 移动端前端调试
- oh my zsh 配置文件未加载
- Jenkins持续集成-war包部署
- http请求中的referer
- Linux文件系统
- expressjs中的next理解
- Mac在Zsh环境下安装maven
- jiathis不支持https解决方案
- Git团队开发流程规范
- Ionic:2017-18 蓝图
- GitHub Pages自定义域名开启HTTPS
- Angular6的新功能与改进之处
- Safari无痕浏览模式检测
- Angular4升级至5
- Jenkins持续集成-搭建配置
- jsPlumb使用指南
- GitHub,Coding多平台托管blog
- Angular+Express平台部署
- ES6常见问题
- MAC卸载nodejs
- Git多远程仓库配置
- oh-my-zsh中文乱码
- dagre-d3使用指南
- Angular开发常见问题
- 如何学习Angular
- 关于构建打包出现"JavaScript heap out of memory"
- Cordova开发常见问题
- mysql error:Invalid default value for date
- res.send之后代码执行问题
- 关于阿里云CDN报403错误分析
- Angular开发-loadChildren重复路径问题
- Linux下sz、rz实现上传下载
- Tomcat配置常见问题
- Windows CMD常用命令
- 轻量级APP开发方案
- linux下vsftpd安装及配置
- 邮件中HTML锚点链接
- 了解DDNS
- [翻译]webpack3:发布
- AOT打包，懒加载失败
- JavaScript heap out of memory
- nginx重定向-post请求信息丢失问题
- 关于Cordova封装H5站点遇到的坑
- linux下redis安装指南
- git submodule 使用说明
- ionic实现oauth授权
- git submodule使用场景
- travis-ci自动部署化blog
- Cordova是什么
- 利用Cordova将移动站点打包
- Angular5:倒计时开始
- Git配置之根据多Git服务使用对应SSH-Key
- ionic安卓版签名打包
- ionic开发-浏览器环境下如何使用本地插件
- ionic cli v3 发布
- Linux常用命令
- webpack构建打包中文件hash值不变但内容的确有变化问题分析及解决
- ionicv4介绍
- Git常用命令
- express实现文件下载
- Android反编译
- Session在express中应用
- PM2介绍
- Nginx安装及配置
支付宝支持
PayPal 支持
延伸推荐
