作者 David Bushell 因为对现有编辑器（VS Code、Sublime Text 等）不满，决定自己动手写一个文本编辑器。他先后尝试了三种方案：先在 上渲染文本，虽能实现光标与输入，却难以处理选中、撤销和滚动，且完全不可访问；转而改用 contenteditable 的 plaintext-only 模式，让浏览器免费提供原生选中与撤销，但超过一定字符数后性能不稳定；最终发现最稳妥的其实是 ，性能最好，再配合第三层 DOM 覆写来实现语法高亮。整个过程体现了「别重复造浏览器已经做好的东西」的工程智慧。</p> </div> <h2>核心要点</h2> <ul> <li><span class="highlight">先用 <canvas> 渲染文本，得到极高的绘制自由度，却要把选中、撤销、多行粘贴、滚动这些原本免费的浏览器能力全部手动实现</span></li> <li><span class="highlight">contenteditable 的 plaintext-only 值对代码编辑近乎完美，浏览器原生提供文本选中与撤销历史，但 spellcheck 等属性必须禁用以避免输入延迟</span></li> <li><span class="highlight">最终结论：<textarea> 对长文本性能最好，用额外的 DOM 层做可见行的语法高亮即可</span></li> <li><span class="highlight">大量 CSS highlight 是性能瓶颈，更稳妥的做法是用 Tree-sitter 生成语法树、只高亮可见行</span></li> <li><span class="highlight">作者自嘲成果是「1% 的功能做出了 90% 的样子」，剩下全是制表缩进之类的细枝末节</span></li> </ul> <h2>金句</h2> <div class="quote">用 1% 的功能，做出了 90% 像个编辑器的样子——剩下的就是照猫画虎、把细节一点点填满。</div> <div id="fw-bar" class="fw-bar" style="display:none"> <span class="fw-s">👍 <strong id="fw-like">0</strong></span> <button class="b-like" onclick="fwLike()">点赞</button> <span class="fw-group-divider"></span> <span class="fw-s">👎 <strong id="fw-dislike">0</strong></span> <button class="b-dislike" onclick="fwDislike()">沉底</button> </div> <div id="fw-toast" class="fw-toast"></div> <a class="back-link" href="/sub/lobsters/">返回 Lobsters 首页</a> <footer> <p>由 Hermes Agent 自动抓取 & 摘要生成 · <a href="https://dbushell.com/2026/09/01/text-editor/" target="_blank">阅读原文</a></p> </footer> </div> </div> <script> (function(){var p=window.location.pathname.replace(/\.html$/,'').split('/').filter(Boolean); var source=p[1]||'unknown',slugParts=p.slice(3); var aid=(source+'-'+slugParts.join('-')).replace(/[^a-zA-Z0-9\u4e00-\u9fa5_-]/g,'').slice(0,60); var title=(document.querySelector('h1')||{}).textContent||''; var surl=window.location.href; function api(path,data,cb){fetch('/api'+path,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(data)}).then(function(r){return r.json()}).then(function(d){if(cb)cb(d)}).catch(function(e){console.error(e)})} function toast(m){var t=document.getElementById('fw-toast');t.textContent=m;t.classList.add('show');setTimeout(function(){t.classList.remove('show')},2000)} function loadState(){fetch('/api/article?id='+encodeURIComponent(aid)).then(function(r){return r.json()}).then(function(d){if(d&&d.article){document.getElementById('fw-bar').style.display='flex';document.getElementById('fw-like').textContent=d.article.like_count||0;document.getElementById('fw-dislike').textContent=d.article.dislike_count||0}})} window.fwLike=function(){var btn=document.querySelector('.b-like');btn.disabled=true;btn.textContent='...';api('/article/like',{article_id:aid,title:title,url:surl,source_domain:'Lobsters',collect_reason:'Lobsters'},function(d){if(d&&d.article){document.getElementById('fw-bar').style.display='flex';document.getElementById('fw-like').textContent=d.article.like_count||0;document.getElementById('fw-dislike').textContent=d.article.dislike_count||0;toast('已点赞')}btn.textContent='点赞';btn.disabled=false})}; window.fwDislike=function(){var btn=document.querySelector('.b-dislike');btn.disabled=true;btn.textContent='...';api('/article/dislike',{article_id:aid},function(d){if(d&&d.article){document.getElementById('fw-bar').style.display='flex';document.getElementById('fw-like').textContent=d.article.like_count||0;document.getElementById('fw-dislike').textContent=d.article.dislike_count||0;toast('已沉底')}btn.textContent='沉底';btn.disabled=false})}; loadState();})(); </script> </body> </html>