clone div不會立即顯示相同的代碼

Question

在我的代碼中，我有一個區域，可以在輸入時預覽任何代碼。我遇到的問題是當我選擇一些文本，然後單擊按鈕，粗體，斜體，前。預覽區域不會立即顯示相同的代碼。

問題如何確保預覽區域在選擇某些文本後點擊某個按鈕，然後直接顯示正確的代碼。目前只是顯示純文本。

直播例

Codepen Code View

Codepen Full View

腳本

<script type="text/javascript"> 

$('#code_view').on('click', function(e) { 
    var code = $('#editable').clone(); 
    $('#preview').html(code); 
}); 

$('#editable').keyup(function(){ 
    $('#code_view').trigger('click'); 
}); 

$('#editable').each(function(){ 
    this.contentEditable = true; 
}); 
</script> 

HTML

<div class="container"> 
<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12"> 
<div class="form-group"> 
<input type="text" class="form-control" name="title" placeholder="Title" /> 
</div> 
</div> 
</div> 

<div class="row"> 
<div class="col-lg-12 col-md-12 col-sm-12 col-sm-12"> 
<div class="panel panel-wmd"> 
    <div class="panel-heading"> 
     <div class="clearfix"> 
      <div class="pull-left"> 
       <button id="bold" class="btn btn-default">B</button> 
       <button id="italic" class="btn btn-default"><i>I</i></button> 
       <button id="pre" class="btn btn-default">{}</button> 
       <button id="code_view" class="btn btn-default">Code View</button> 
      </div> 
      <div class="pull-right"> 
      </div> 
     </div> 
    </div> 
    <div class="panel-body"> 

     <div id="editable"></div> 
    </div><!-- .panel-body --> 
</div><!-- .panel --> 
</div> 
</div> 

<div class="row"> 
    <div class="col-lg-12 col-md-12 col-sm-12 col-sm-12"> 
     <div id="preview"></div> 
    </div> 
</div> 
</div><!-- .container --> 

Answer 1

在代碼中看到你所做的一切都是正確的。爲了在點擊按鈕時立即獲得結果，您需要調用功能按鈕上的code_view點擊功能。

更新代碼：

Code Pen

希望這有助於你。

-Help :)