您是否知道一个JavaScript库，它可以让您嵌入实时更新网页格式的文本区域

Question

我将在即将到来的课程中向一些有风险的孩子介绍HTML知识，我们只有很少的时间向他们展示制作自己的网页是多么酷。

我想做的是构建一个充满文本框的页面模板，孩子们可以用文本和一些简单的格式标签填充这些文本框。当他们更新时，分屏将更新他们的编辑结果。

我正在寻找一个免费/开源的jquery或其他JavaScript库，这将有助于实现上述目标。

实际上，它与键入问题时在预览框中的stackoverflow非常相似。

与其盲目地从其他网站提取代码，我更喜欢带有实际文档(或至少是快速示例(的东西。

Google搜索显示了许多您可以在其他网站上下载或使用的工具和内容。这里的理想情况是我嵌入到我认为合适的页面和位置中的库。

感谢您的帮助

编辑

正如一些人指出的那样 - 这是在某些事件上更新div 的简单问题。

<script type="text/javascript">
    $(window).keyup(function(){ 
        $('#about_me_result').html($('#about_me').val());
    });
</script>

<textarea id="about_me" name="aboutMe" rows="9" cols="60">Write a little something about you...</textarea>

我选择了键控，因为键下总是将最后一个字符从另一个元素中移开。

Answer 1

不需要图书馆。只需更新文档

$(window).keydown(function(){ 
    $('#element').html($('#sometextarea').val());
});

Answer 2

正如 btown 在下面的回复中所建议的那样，您可以将它们发送给 jsfiddle.net。

或者，如果你想在你自己的页面上的某个地方放这样的东西，你可以自己做饭！ 在这里玩：http://jsfiddle.net/lbstr/LD9kA/

<textarea id="code"></textarea>
<div id="result"></div>

$('#code').keyup(function(e){
    $('#result').html($(this).val());
});

或者，也许您想要一个"更新"按钮，而不是在键启动时更新。

<textarea id="code"></textarea>
<button type="button" id="update">Update</button>
<div id="result"></div>

$('#update').click(function(){
    $('#result').html($(this).val());
});

Answer 3

w3c Schools Tryit Editor 怎么样 它比 jsfiddle 简单得多。

唯一的事情是您必须按下一个按钮才能看到HTML更新。这可能不是一件坏事，因为如果它在每个键上都发生了变化，当您输入半成品标签和属性时，生成的网页可能会变得疯狂。