使用html标记自动更新div,stackoverflow-style

时间:2012-01-16 09:44:19

标签: jquery ajax html markup

有谁知道Stackoverflow如何处理textarea下方的“预览框”,其中提供了问题和答案?基本上我认为可以在jQuery中使用'.clone()',但是它不会呈现html标记(例如<b><br />等等),因为不会重新加载div。 / p>

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

我还在学习这些东西,但我只是暗示我应该看一些像AJAX一样的东西,但是却找不到真正喜欢这个特殊情况的东西!

谢谢!

2 个答案:

答案 0 :(得分:2)

如果你需要显示在textarea中写的html,只需取其值并复制到预览元素中,就像

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

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

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

无论如何了解用户输入的输入:如果您在显示预览元素之前始终清理标记,那就更好了。

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

答案 1 :(得分:1)

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

基本上你要做的就是获取你正在编写的文本框的值,通过AJAX(或类似的东西)将它扔进Markdown Web服务,让web服务为你解析它,然后得到响应并将其拍成等待的DIV

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