你知道有一个javascript库可以让你嵌入实时更新网页格式的文本区域吗？

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

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

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

实际上，这与您键入问题时stackoverflow在预览框中的操作非常类似

与其盲目地从其他网站上删除代码，我更喜欢有实际文档的东西（或者至少是一个简单的例子）

谷歌搜索显示了很多工具和东西，你可以下载或在其他网站上使用。这里的理想是在我认为合适的页面和位置中嵌入一个库

谢谢你的帮助

编辑

正如一些人所指出的，这是一个在某些事件上更新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>

$（窗口）.keyup（函数（）{
$（'#about_me_result'）.html（$（'#about_me'）.val（））；
});
写一些关于你的事。。。

---

我选择了keyup，因为keydown总是将最后一个字符保留在其他元素之外

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

或者，如果你想在你自己的网页上放一些类似的东西，你可以自己做饭！在这里玩：

$（“#代码”）.keyup（函数（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());
});

更新
$（“#更新”）。单击（函数（）{
$（'#result'）.html（$（this.val（））；
});

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

$(window).keydown(function(){ 

    $('#element').html($('#sometextarea').val());
});

它比jsfiddle简单得多

---

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

您可以在

onKeyup

事件中捕获textarea的内容，然后用JS和每个textarea的容器

将其复制到另一个窗格中。通常，如果你愿意让他们在完成编辑时点击“run”，那么jsfiddle.net可能正是你想要的。我不确定我是否想去另一个网站（找到了很多这样的网站，虽然不是这个——更倾向于JS而不是HTML），因为我想为孩子们创建一个自定义模板。不过你们说得对，我自己做div更新可能更简单。谢谢你的想法。我喜欢这个，我尝试了这个和下面的JSFIDLE想法。小提琴上的那个似乎没有达到我的预期。虽然这可能是因为它包含在另一页中。最后我尝试了你写的东西并将其保存到本地文件中，我可以在键入时看到更新。

$(window).keydown(function(){ 

    $('#element').html($('#sometextarea').val());
});