Bootstrap - WYSIWYG HTML5編輯器沒有更新底層文本區域

我正在嘗試在我的應用程序中使用Bootstrap-WYSIWYG（）。我正在向頁面注入一個textarea，然後實例化編輯器。到現在爲止還挺好。但它沒有更新底層的textarea，我無法弄清楚爲什麼。我創建了一個JSFiddle來演示這個問題：http://jsfiddle.net/8ckgf/2/Bootstrap - WYSIWYG HTML5編輯器沒有更新底層文本區域

如果有人能看出爲什麼這不起作用，我會很感激。

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Bootstrap 101 Template</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen"> 
    <script src="http://code.jquery.com/jquery.js"></script> 
    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script> 

    <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script> 
     <script src="http://xing.github.com/wysihtml5/dist/wysihtml5-0.3.0.js"></script> 
     <script src="http://jhollingworth.github.com/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"></script> 

<script> 
$(document).ready(function(){ 
    $('.log').append("Setting up"); 
    var uuid = "abc123"; 
    var stuff = '<textarea id="f'+uuid +'" class="wysiwyg" >Some html</textarea>'; 

    $('#holder').html(stuff); 

    $('#f'+uuid).on('change',function(){ 
     var val = $(this).val(); 
     $('.log').append(val);  
    }); 

    $('#f'+uuid).wysihtml5(); 
    $('#f'+uuid).change(function(){ 
     $('.log').append("Value has changed"); 
    }); 
}); 
</script> 
    </head> 
    <body> 
    <h1>WYSIWYG Test</h1> 
     <div id="holder"></div> 
    <div class="log"></div> 
    </body> 
</html>

來源

2013-02-22 Mick Sear

好的，我自己最終解決了這個問題。出於某種原因，WYSIHTML5項目周圍的Bootstrap包裝似乎不會觸發原始文本區域的事件。相反，您需要在初始化編輯器時聲明事件。我相應地更新了JSFiddle。

修正版本：

$('textarea').wysihtml5({ 
    "events": { 
     "blur": function() { 
     var val = $('textarea').val(); 
     $('.log').append(" From blur "+val); 
     } 
    } 

});

爲了記錄在案，如果別人遇到同樣的事情，簡單的解決方法是簡單地觸發對文本區域下方在處理程序中傳遞到實例「變」，所以這樣的事情：

$('textarea').wysihtml5({ 
    "events": { 
     "blur": function() { 
     $('textarea').trigger('change'); 
     } 
    } 

});

這是我如何從一開始就期望控制工作，說實話。

來源

2013-02-23 12:28:06

感謝您花時間發佈您的解決方案！ – RichieHindle 2013-02-25 22:05:51

Bootstrap - WYSIWYG HTML5編輯器沒有更新底層文本區域

回答

相關問題