显示文本区前端Javascript的实时预览

在我的项目中，我有一个div，它是一个文本区域，在这里我可以将文本包装成代码格式。

我还有一个带有id="preview" 的按钮

在前端视图中单击预览按钮后，是否可以在另一个div中显示文本区域的输出，就像在IE或FIREFOX上一样。

代码笔示例：http://codepen.io/riwakawebsitedesigns/pen/lfpKF

HMTL代码

<div class="container">
<textarea id="widget">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus repellendus inventore, voluptatum ipsa ipsum debitis voluptates, laudantium nulla odio sed, pariatur quaerat quae numquam beatae ad odit optio quasi magni explicabo tenetur. Consectetur, animi, autem? Non laboriosam ad nisi, commodi, dolores soluta. Dolorum error unde itaque ipsum a? Libero sapiente eligendi similique, itaque deserunt aliquid magnam ducimus nesciunt, iste ad nihil labore assumenda soluta earum. Rerum deserunt totam aperiam maiores facere eum sapiente modi non debitis consectetur voluptatum, voluptatibus labore repellendus tempora voluptate error nesciunt eaque possimus. Consectetur laborum ab ipsum, voluptate perspiciatis quos omnis delectus dicta mollitia atque voluptates!</textarea>
  <div class="buttons">
    <button id="code">Code</button>
    <button id="preview">Preview</button>
  </div>
  <!-- Should display live out put of wraped code.-->
  <div id="preview" class="code-preview"></div>
</div>

Javascript

function wrapText(elementID, openTag, closeTag) {
    var textArea = $('#' + elementID);
    var len = textArea.val().length;
    var start = textArea[0].selectionStart;
    var end = textArea[0].selectionEnd;
    var selectedText = textArea.val().substring(start, end);
    var replacement = openTag + selectedText + closeTag;
    textArea.val(textArea.val().substring(0, start) + replacement + textArea.val().substring(end, len));
}
$('#bold').click(function() {
    wrapText("widget", "<strong>", "</strong>");
});
$('#italic').click(function() {
    wrapText("widget", "<em>", "</em>");
});
$('#underline').click(function() {
    wrapText("widget", "<u>", "</u>");
});
$('#code').click(function() {
    wrapText("widget", "<pre><code>", "</code></pre>");
});