使用 html 标记自动更新 div，stackoverflow 样式

Question

有谁知道 Stackoverflow 是如何处理问题和答案的文本区域下方的“预览框”的？基本上我想可以在 jQuery 中使用 '.clone()'，但它不会呈现 html 标记（例如 <b> 或 <br /> 等），因为不会重新加载 div。

我知道 stackoverflow 使用“*”标记粗体文本等，但对于我的项目将使用“真实”标记，即对于粗体，有一个按钮将在所选文本周围包含 <b>。

我仍在学习这些东西，但作为一个提示，我想我应该研究类似 AJAX 的东西，但找不到真正像这种特殊情况的东西！

谢谢！

Answer 1

如果您需要显示在 textarea 中编写的 html，只需将其值复制到预览元素中，类似

$('#preview-div').html($('textarea').val())

如果您需要在用户键入时显示它，只需在 textarea 的 keyup 事件处理程序中调用此语句

$('textarea').on('keyup', function() {
   $('#preview-div').html($(this).val());
});

无论如何要意识到用户输入的内容：最好在预览元素上显示之前始终清理标记。

小提琴示例：http://jsfiddle.net/YX9Eq/

Answer 2

如果您对 Stack Overflow 的工作方式感兴趣，您想了解Markdown syntax。

基本上你想要做的是获取你正在写入的文本框的值，通过 AJAX（或类似的东西）将它扔到 Markdown Web 服务中，让 Web 服务为你解析它，然后得到响应并将其打入等待的DIV。

AFAIK，StackOverflow 使用 MarkdownSharp 解析其文本。您可以使用相同的库通过 C# 快速创建 Web 服务。