1. 从零手搓一个能用的 HTML Editor到底难在哪很多人第一次听到「HTML Editor」这个词脑子里浮现的是 CodeMirror、Monaco、Quill 这类庞然大物觉得没有几万行代码根本做不出来。其实浏览器早就内置了一套最原始的富文本编辑能力核心就两个东西contentEditable属性和document.execCommand()方法。前者让一个普通的div变成可输入、可编辑的区域后者负责执行加粗、斜体、下划线、列表这些格式化命令。把这两个拼起来一个能跑、能用的简易 HTML Editor 就成型了。这篇要解决的真实场景是你需要在后台管理系统、评论框、邮件模板编辑页里塞一个轻量编辑器不想引入几百 KB 的第三方库也不想被框架绑定。用原生contentEditableexecCommand是最省事的路径。它适合前端初学者练手 DOM 操作也适合老手做快速原型。我会把可复制的编辑器骨架代码、命令绑定与状态同步逻辑、以及用 TaoToken 统一 Key/API 通道做配置验证的完整流程都写出来你照着敲就能跑。需要提前说清楚一点execCommand在规范层面已经被标记为废弃deprecated但截至现在主流浏览器依然完整支持做轻量工具完全够用。如果你要的是生产级、跨端一致的富文本那还是得上成熟库但如果只是「够用就好」这套原生方案性价比极高。2. TaoToken 前置准备统一 Key 与 API 通道在写编辑器之前先把模型调用这条链路打通。我习惯把编辑器做成「本地编辑 一键调用模型润色/翻译/续写」的形态所以需要一个稳定的 API 入口。TaoToken 提供统一的 Key 和 API 通道官网地址是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 。你需要先拿到一个 API Key。登录后进入控制台在 API Keys 页面创建一个新 Key复制保存好后面配置里要用。控制台入口https://taotoken.net/console?utm_sourcetaotoken_aicg_blog_endutm_contentconsole 。创建 Key 的具体页面https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keys 。拿到 Key 之后我建议用config.toml的方式集中管理而不是把 Key 硬编码进前端 JS。原因很简单前端代码一旦部署Key 就等于公开了。正确做法是前端只调用你自己的后端接口后端再拿着config.toml里的 Key 去请求 TaoToken。下面是一个可直接复制的配置片段# config.toml [taotoken] base_url https://taotoken.net/api api_key sk-你的Key粘贴在这里 default_model claude-3-5-sonnet timeout_seconds 60 [editor] max_input_chars 8000 enable_polish true enable_translate true如果你更想先验证模型通不通可以直接用模型对话页面手动发一条消息试试https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodels 。这一步能确认 Key 有效、网络可达再去写代码心里有底。注意config.toml属于服务端配置文件务必放在后端项目里不要提交到公开仓库也不要用VITE_之类的前缀暴露到前端环境变量中。3. 可复制的编辑器骨架div execCommand 命令绑定现在进入正题。先写最核心的 HTML 结构一个可编辑的div加一排命令按钮。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title简易 HTML Editor/title style #editor { width: 640px; min-height: 180px; border: 1px solid #ccc; border-radius: 6px; padding: 12px; font-size: 15px; line-height: 1.7; outline: none; } #editor:focus { border-color: #4a90d9; } .toolbar { margin-bottom: 8px; } .toolbar button { margin-right: 6px; padding: 4px 10px; cursor: pointer; } .toolbar button.active { background: #4a90d9; color: #fff; border-color: #4a90d9; } /style /head body div classtoolbar button>const editor document.getElementById(editor); const buttons document.querySelectorAll(.toolbar button); // 1. 命令绑定 buttons.forEach((btn) { btn.addEventListener(mousedown, (e) { // 阻止默认行为避免点击按钮时编辑区失焦 e.preventDefault(); const cmd btn.dataset.cmd; document.execCommand(cmd, false, null); editor.focus(); syncToolbarState(); }); }); // 2. 状态同步根据当前光标位置刷新按钮高亮 function syncToolbarState() { buttons.forEach((btn) { const cmd btn.dataset.cmd; let isActive false; try { isActive document.queryCommandState(cmd); } catch (err) { isActive false; } btn.classList.toggle(active, isActive); }); } // 3. 光标移动、键盘输入、鼠标抬起时都刷新状态 [keyup, mouseup, input].forEach((evt) { editor.addEventListener(evt, syncToolbarState); }); // 4. 初始化一次 syncToolbarState();这里有两个容易踩的坑。第一按钮点击要用mousedown而不是click并且preventDefault()否则点击按钮的瞬间编辑区会失去焦点execCommand作用不到你选中的文本上。第二queryCommandState必须在编辑区有焦点、光标在格式化文本内时才准确所以要在keyup、mouseup这些事件里持续同步。如果你想让编辑器支持「选中文字后调用模型润色」可以在工具栏再加一个按钮把editor.innerHTML或选中的纯文本发给后端后端用config.toml里的 Key 请求 TaoToken再把结果execCommand(insertHTML, ...)插回去。这条链路打通后你的编辑器就从「能排版」升级成「能干活」了。4. 验证请求逐项点击命令并核对 DOM 输出代码写完不算完得验证。我习惯用「点击 看 DOM」的方式逐项核对比肉眼看样式靠谱得多。第一步打开页面在编辑区输入一行字比如「测试加粗效果」。选中「加粗」两个字点工具栏的 B 按钮。此时打开浏览器开发者工具在 Elements 面板里看编辑区的 DOM应该能看到类似这样的结构div ideditor contenteditabletrue 测试b加粗/b效果 /div如果看到b或strong包裹说明execCommand(bold)生效了。不同浏览器可能生成b或strong这属于正常差异。第二步验证状态同步。把光标停在刚加粗的文字中间工具栏的 B 按钮应该自动高亮active类生效。把光标移到普通文字上高亮消失。这一步验证的是queryCommandState和syncToolbarState是否正常工作。第三步验证列表命令。点「无序列表」按钮DOM 里应该出现ulli.../li/ul结构div ideditor contenteditabletrue ulli测试加粗效果/li/ul /div第四步验证清除格式。选中带格式的文字点「清除」DOM 里的b、i等标签应该被移除只剩纯文本。第五步验证模型调用链路。如果你接了后端选中一段文字点「润色」观察 Network 面板里请求是否发到了你的后端后端是否成功返回 TaoToken 的结果。这一步能同时验证config.toml配置和 API 通道是否通畅。想单独测模型通道的话也可以直接去模型对话页面发一条消息https://taotoken.net/models?utm_sourcetaotoken_aicg_blog_endutm_contentmodels 。5. 本篇常见错误排查错误一点按钮没反应或者格式加到了错误的位置。九成是用了click事件且没preventDefault()导致编辑区失焦。改成mousedownpreventDefault()即可。错误二document.execCommand is not a function。检查是不是在iframe里操作了跨域的文档或者editor变量拿到的不是可编辑元素。确认contenteditabletrue拼写正确注意是contenteditable不是contentEditableHTML 属性不区分大小写但 JS 里isContentEditable是驼峰。错误三按钮高亮状态不刷新。检查是否绑定了keyup、mouseup、input事件。另外queryCommandState对某些命令如removeFormat返回false是正常的它本身没有「激活态」概念可以在syncToolbarState里跳过这类命令。错误四粘贴内容带进来一堆乱七八糟的样式。contentEditable默认会保留粘贴源的 HTML。可以在paste事件里拦截只取纯文本editor.addEventListener(paste, (e) { e.preventDefault(); const text (e.clipboardData || window.clipboardData).getData(text/plain); document.execCommand(insertText, false, text); });错误五TaoToken 请求返回 401。大概率是 Key 没配对或者config.toml里的api_key带了多余空格。检查 Key 是否从 API Keys 页面正确复制https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keys 。另外确认base_url写的是https://taotoken.net/api不要多加斜杠或路径。错误六请求超时。编辑器里如果一次性把整篇长文发给模型很容易超时。建议在config.toml里设max_input_chars前端做长度校验超长就提示用户分段处理。6. 把编辑器接上模型下一步怎么走到这里一个能加粗、斜体、列表、清除格式并且能核对 DOM 输出的简易 HTML Editor 就跑起来了。如果你还想让它具备「选中即润色」「一键翻译」「续写」这些能力核心就是把编辑区的文本通过后端转发给 TaoToken再把结果插回编辑区。长期做编码类工具、Agent 类应用的话建议直接上 Coding Plan把模型调用、额度管理、多模型切换都统一起来省得自己维护一堆 Keyhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-plan 。接入细节和参数说明可以翻接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdoc 。如果你用的是 Claude Code 这类工具Anthropic 兼容通道的配置也在文档里有对应说明https://taotoken.net/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecode-anthropic 。最后留一个我自己的实用习惯编辑器骨架代码先跑通、DOM 核对无误再去接模型。顺序反了的话一旦出问题你分不清是编辑器逻辑错了还是 API 配置错了排查成本翻倍。先把contentEditable和execCommand玩明白剩下的都是水到渠成。
