做一个 Markdown 编辑器,完整 Prompt 模板直接用

Markdown 编辑器看着就是左边写字、右边预览,但它背后的实时渲染、防抖、XSS 防护和本地存储组合在一起,是练习前端数据流和安全的经典项目。这篇文章给你一套完整 Prompt 模板,复制就能用。

Markdown 编辑器拆开看,就 5 个部分

Markdown 编辑器的核心是「输入即预览」,但要做到流畅和安全,需要五个模块配合。

编辑区域是左边的 textarea,用户在这里输入 Markdown 文本。实时预览是右边的渲染区,输入内容实时变成 HTML 显示。工具栏提供快捷按钮,点一下就插入对应的 Markdown 语法。本地存储用 localStorage 自动保存,刷新页面不丢内容。导出功能把内容下载为 .md 或 .html 文件,方便分享和备份。

实时渲染,一条流水线

从输入到预览,中间经过四个步骤,搞清楚数据流向,Prompt 就知道怎么写。

用户输入文本 → input 事件触发。防抖处理 300ms,避免每次按键都渲染。Markdown 解析,把文本转成 HTML。XSS 过滤,用 DOMPurify 清洗,去掉恶意脚本。渲染到预览区,把安全的 HTML 插入右侧容器。最后保存到 localStorage,下次打开自动恢复。

最终效果长什么样

用下面的 Prompt 模板生成后,效果大概是这样的。

顶部是工具栏,有 H(标题)、B(加粗)、I(斜体)、链接、代码、引用、列表等按钮,右侧是绿色的导出按钮。下方分为左右两栏,左边是编辑区显示 Markdown 源码,右边是预览区显示渲染后的效果。底部状态栏显示「已自动保存 · 上次保存 14:32」。