从textarea.my看零依赖Web应用设计：一个HTML文件如何实现完整文本编辑器的终极拆解

从textarea.my看零依赖Web应用设计一个HTML文件如何实现完整文本编辑器的终极拆解【免费下载链接】textareaA minimalist text editor that lives in URL项目地址: https://gitcode.com/gh_mirrors/texta/textareatextareatextarea.my是一个零依赖的纯 HTML 文本编辑器没有后端、没有数据库、没有 npm 包整个应用就是 index.html 一个约 25KB 的文件你写的所有文字都会被 deflate 压缩后直接存进 URL 哈希——复制链接就完成了一次分享。今天就从新手视角把这个单文件文本编辑器从输入、存储、渲染到部署完整拆开来看。 为什么说它是零依赖先看仓库文件清单打开仓库你只会看到寥寥几个文件文件职责大小index.html应用全部HTML CSS JS 三合一≈ 25 KBsw.jsService Worker离线缓存页面 1 KBmanifest.jsonPWA 清单支持安装到主屏幕 1 KB404.html手写 404 页面同样是零依赖风格≈ 1.2 KBdeploy.yaml推送到 master 自动部署到 Cloudflare Pages≈ 0.5 KB没有package.json、没有node_modules、没有构建脚本、没有框架。这正是零依赖 Web 应用设计的终极形态静态托管一切搞定打开就能用断网也能开。✍️ 编辑器本体一行 contenteditable 定义输入体验传统文本编辑器如 Monaco、CodeMirror动辄几百 KB。而 textarea 的编辑区只是一个带属性的标签见 index.html#L265article contenteditableplaintext-only spellcheck autofocuscontenteditableplaintext-only是浏览器原生能力用户可以随意输入粘贴但页面里永远只保留纯文本不会混入 HTML 格式——这就是它既能当所见即所得又无需富文本库的关键。光标、选区、输入法全部交给浏览器原生实现一行代码省下几百个函数。 零依赖 Markdown 高亮正则驱动的纯文本渲染纯文本输入 轻量渲染是 textarea 最巧妙的地方。它内置了一个约 70 行的手写 Markdown 解析器 parseMarkdown仅用正则识别一级到六级标题#到######行内代码、代码块 与 ~~~ 两种围栏加粗、斜体、删除线URL 自动转成可点击链接它的思路非常朴素遍历文本对每个位置依次尝试一组正则匹配器命中就套上对应的 CSS 类没命中就跳过下一个特殊字符。没有 AST、没有依赖、不会把用户输入弄丢——存进 URL 的始终是原始纯文本样式只是展示层。⏪ 自制撤销/重做不依赖浏览器原生历史栈由于高亮会不断重排 DOM浏览器原生的撤销栈就不可靠了。textarea 用 Editor 函数手写了一个撤销历史每次有意义的按键输入前把当前 HTML 和光标位置存入历史数组最多 1 万条记录撤销/重做时恢复快照并精确还原光标位置连续输入做了 300ms 防抖合并历史不会爆炸约 250 行代码实现了不丢光标的专业级编辑体验——这是新手理解编辑器难在哪里的最好教材。 文本如何住进URLdeflate 压缩 Base64URL这是整个项目最有意思的设计URL 哈希即数据库。输入防抖 500ms 后触发保存index.html#L307全文本经浏览器原生 [CompressionStream(deflate-raw)] 压缩index.html#L361-L379压缩结果转成 Base64URL 字符集URL 安全无需再编码history.replaceState静默更新地址栏于是分享笔记没有任何按钮逻辑——地址栏本身就是分享链接。打开带哈希的链接时hashchange事件触发解压回填整条链路同样只用了原生 API零第三方压缩库。 进阶玩法标题、主题与文档即网页textarea 藏了不少让普通用户惊喜的细节自定义页签标题文档第一行以# 标题开头时浏览器标签页标题自动变成它updateTitleCSS 皮肤也能分享在 DevTools 里给article加的style属性会被 MutationObserver 捕获并一并压缩进 URLindex.html#L314一键导出静态网页CtrlS把当前文档连同全部样式克隆成一个独立的 HTML 文件下载downloadHTML暗色模式零成本CSS 变量 prefers-color-scheme跟随系统切换index.html#L26-L32 PWA 与部署离线可用的最后两块拼图sw.js 用约 35 行实现缓存优先策略安装时把首页存入 Cache Storage断网时照样能打开编辑器manifest.json 让它可以像原生 App 一样安装到手机主屏幕部署更是极简deploy.yaml 一条 wrangler 命令把整个目录推到 Cloudflare Pages连 Node 环境都不需要一个完整的可离线使用的 PWA仓库总代码量不到 1000 行含样式。 新手能带走的零依赖 Web 设计清单能用原生 API 就不要引库CompressionStream、contenteditable、Blob、File System Access 都是浏览器白送的把 URL 当存储无状态、天然分享、天然备份适合笔记类轻应用存原始数据渲染只做展示输入永远纯文本高亮层随存随算怎么改都不丢数据小 UI 用防抖合并500ms 保存、300ms 历史、30ms 高亮三个不同节奏各管一段PWA 三件套收尾Service Worker manifest 静态托管离线能力成本极低 如何获取源码本地运行仓库是纯静态站点克隆后直接用任意静态服务器甚至python3 -m http.server打开 index.html 即可体验git clone https://gitcode.com/gh_mirrors/texta/textarea cd textarea更多使用说明见 README.md项目基于 MIT 协议 开源可自由学习、二次开发。【免费下载链接】textareaA minimalist text editor that lives in URL项目地址: https://gitcode.com/gh_mirrors/texta/textarea创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考