HTML中实现Markdown实时预览编辑器的基本结构与思路-html教程-PHP中文网

textarea是唯一可信输入源，必须与纯渲染div#preview同级共父、禁用contenteditable；实时更新需监听input事件并防抖，输出前须用dompurify白名单过滤，布局避坑height:100%。

html中实现markdown实时预览编辑器的基本结构与思路

HTML结构必须用`textarea` + `div`组合

不能用contenteditable或富文本编辑器替代textarea——它会导致光标错位、选区丢失、换行符处理异常，尤其在移动端。预览区必须是纯div，且不能设contenteditable="true"，否则用户可能误操作破坏渲染结果。

常见错误现象：用div模拟编辑区后，复制粘贴 Markdown 时格式全乱；或预览区被用户双击编辑，导致 HTML 源码泄露。

textarea负责接收原始 Markdown 文本，保持纯文本语义
div#preview只做渲染容器，不响应任何用户输入事件
两者必须同级包裹在同一个父容器中，避免 flex 或 grid 布局错位引发高度计算偏差

实时更新必须监听`input`事件而非`change`

change只在失焦时触发，完全不符合“实时”要求；而input能捕获所有输入行为（键盘、粘贴、拖放、剪贴板插入），是唯一可靠选择。

但要注意：直接在input回调里调用marked.parse()并写入innerHTML，会在长文档下造成明显卡顿。实测 300 行 Markdown 连续输入时，帧率可跌至 10fps 以下。

必须加防抖，延迟 200–300ms 再执行解析（setTimeout或requestIdleCallback）
避免每次全量重绘：对超长文档，可只在内容长度变化超过 50 字符时才触发解析
不要在input里调用focus()或setSelectionRange()，会打断用户输入流

解析后 HTML 必须用`DOMPurify.sanitize()`过滤

直接把marked.parse()结果赋给innerHTML等于主动打开 XSS 入口。Markdown 允许内联 HTML，而marked默认开启dangerouslyAllowHtml: true（v4+ 版本），这意味着<script>alert(1)</script>会被原样执行。

News To Markdown

输入文章 URL，返回干净 Markdown。支持17个平台（头条、微信公众号、知乎、36kr、虎嗅、华尔街见闻、澎湃、InfoQ 等）专项优化，双引擎提取、图片本地化、三层抓取策略。常与 browser‑web‑search skill配合：先用 bws 搜索获取 url 列表，再逐篇调用本 skill 提取正文。

下载

哪怕你确认用户全是内部人员，也不能跳过净化——历史教训是：某次调试时临时加了console.log(rawInput)，结果日志里混入了恶意 payload，被前端监控系统误判为攻击流量。