0

我将在即将到来的课程中向一些有风险的孩子介绍 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 ，因为 keydown 总是将最后一个字符与另一个元素分开。

4

3 回答 3

1

正如 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());
});
于 2012-05-03T22:48:38.383 回答
1

没有真正需要图书馆。只需更新文档

$(window).keydown(function(){ 

    $('#element').html($('#sometextarea').val());
});
于 2012-05-03T22:48:45.897 回答
0

w3c Schools Tryit Editor比jsfiddle 简单得多。

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

于 2012-05-04T02:03:04.090 回答