像 StackOverFlow 使用的 WMD 编辑器是如何工作的？
I'm interested in knowing how does the text you type on the text box doesn't require a page refresh?
Some similar alternatives include:
But they tend to do a page refresh every time a keystroke is pressed...
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
他们有一个用 Javascript 实现的 Markdown 到 HTML 转换器。每当“文本区域”的内容发生更改时，预览区域都会使用运行 Markdown 到 HTML 转换器的结果进行更新。显然，事情远不止这些——让这种事情表现良好可能很棘手——但这就是它的本质。
如果您在 Safari 等浏览器中检查文本区域，您可以看到它们使用 Javascript 事件处理程序来处理 drop、input、keydown、keypress、keyup、mousedown 和 Paste 事件。当这些事件之一发生时，脚本会做出适当的响应，包括运行 Javacript Markdown 到 HTML 转换器并将生成的 HTML 放入预览区域。
They have a Markdown to HTML translator implemented in Javascript. Whenever the content of the 'textarea' changes the preview area is updated with the result of running the Markdown to HTML converter. There's obviously more to it than that -- making this sort of thing perform well can be tricky -- but that's the essence of it.
If you inspect the textarea in a browser like Safari you can see that they are using Javascript event handlers for drop, input, keydown, keypress, keyup, mousedown and paste events. When one of these events happen the script responds appropriately, including to run the Javacript Markdown-to-HTML converter and putting the resulting HTML into the preview area.