HTML中实现Markdown编辑器左右分栏与实时渲染预览的方案-html教程-PHP中文网

最简双栏同步可用marked+原生DOM实现：左侧textarea输入，右侧div用marked.parse()渲染；需监听input事件并节流更新，开启breaks换行，右侧设overflow-wrap防溢出；拖拽分隔需JS监听鼠标/触摸事件并重置滚动位置；XSS防护用DOMPurify白名单过滤；IE11兼容需锁定marked@3.0.8并降级API。

html中实现markdown编辑器左右分栏与实时渲染预览的方案

用 `marked` + 原生 DOM 实现最简双栏同步

不需要框架也能跑通核心流程：左侧输入，右侧

 用 marked.parse() 渲染。关键在于监听输入并节流更新，否则滚动或快速打字时渲染卡顿明显。实操建议：

用 input 事件（不是 keyup）捕获所有修改，包括粘贴、撤销、IME 输入
加 requestIdleCallback 或简单 setTimeout(..., 16) 节流，避免每键都触发解析

marked.setOptions({ breaks: true }) 开启换行转 
，否则段落内回车不生效
右侧容器设 style="overflow-wrap: break-word;" 防止长链接撑破布局

左右栏等宽拖拽调整宽度的实现要点
纯 CSS 无法响应式拖拽分隔，必须用 JS 监听鼠标事件。核心是计算鼠标在容器内的相对位置，动态设置左侧 flex-basis 或 width。
常见错误现象：

拖拽后右侧内容错位——没重置 textarea 的 scrollLeft 和 scrollTop

松手后分隔线跳动——没在 mouseup 时清除 document.onmousemove，导致持续响应
移动端失效——没监听 touchstart/touchmove/touchend，且未调用 event.preventDefault() 阻止默认滚动

推荐直接用 resize-observer-polyfill 配合 flex 布局，比手写拖拽更稳。
渲染安全：防止 XSS 的最小代价处理
marked 默认不转义 HTML，用户输入 <script>alert(1)</script> 会直接执行。不能简单关掉 HTML 支持（会丢掉合法 
 等），得做白名单过滤。实操建议：

											
												
												
													htmlppt.skill
													把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
												
												下载
												
											
										

用 DOMPurify.sanitize(marked.parse(input))，比 marked 自带的 sanitize 选项更可靠
若只允许基础 Markdown，传入 marked.setOptions({ sanitizer: DOMPurify.sanitize }) 即可
注意 DOMPurify 默认不放行 target="_blank"，需显式配置 ADD_ATTR: ['target']

服务端仍需校验——前端净化只是用户体验层防护

IE11 兼容性踩坑与降级策略
marked@4+ 已放弃 IE 支持，marked@3.0.8 是最后一个能跑通的版本。但即使如此，textarea 的 selectionStart/selectionEnd 在 IE 中对中文输入法支持极差。
使用场景判断：

若必须兼容 IE11，锁定 marked@3.0.8，禁用 gfm（表格、任务列表）等新特性
用 document.selection + TextRange 替代现代 selection API，仅用于光标定位修复
预览区用 innerHTML 而非 textContent，否则 IE 下样式丢失严重
更现实的方案：检测 !window.Proxy 直接提示“请升级浏览器”，省去大量边界逻辑

双栏同步本身不复杂，真正耗时的是光标定位同步、粘贴内容解析、以及各种输入法下的行为对齐——这些细节没标准解法，只能按实际测试反复补丁。