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

【问题标题】：Do you know of a javascript library that lets you embed textareas that update a webpages format in real time?你知道一个 javascript 库可以让你嵌入实时更新网页格式的文本区域吗？
【发布时间】：2012-05-03 22:45:40
【问题描述】：

我将在即将到来的课程中向一些有风险的孩子介绍 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>

我选择了 keyup，因为 keydown 总是让最后一个字符离开另一个元素。

【问题讨论】：

您可以在 onKeyup 事件中捕获 textarea 的内容，然后使用 JS 将其复制到另一个窗格中，并为每个 textarea 提供一个容器 <div>。

标签： javascript jquery html real-time wysiwyg

【解决方案1】：

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

$(window).keydown(function(){ 

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

【讨论】：

我喜欢这个，我试过这个和下面的 jsfiddle 想法。小提琴中的那个似乎没有达到我的预期。尽管这可能是因为它包含在另一个页面中。我最终尝试了您编写的内容并将其保存到本地文件中，我可以在输入时看到更新。

【解决方案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());
});

【讨论】：

一般来说，jsfiddle.net 可能正是您想要的，如果您愿意让他们在完成编辑后点击“运行”。
不确定我是否热衷于去另一个网站（找到了一堆，虽然不是这个 - 更适合 JS 而不是 HTML）因为我想为孩子们创建一个自定义模板从...开始。你们是对的，我自己做 div 更新可能更简单。感谢您的想法。

【解决方案3】：

w3c Schools Tryit Editor 比 jsfiddle 简单得多。

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

【讨论】：