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>

我使用了keyup，因为keydown总是将最后一个字符留在另一个元素上。

Answer 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());
});

Answer 2

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

即可

$(window).keydown(function(){ 

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

Answer 3

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

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

你知道一个javascript库，它可以让你实时嵌入更新网页格式的textareas吗？

3 个答案: