부트 스트랩 - 기본 텍스트 영역을 업데이트하지 않는 WYSIWYG HTML5 편집기

내 응용 프로그램에 부트 스트랩 -WYSIWYG (http://jhollingworth.github.com/bootstrap-wysihtml5/)를 사용하려고합니다. 나는 텍스트 영역을 페이지에 삽입하고 편집기를 인스턴스화 할 것이다. 여태까지는 그런대로 잘됐다. 하지만 기본 텍스트 영역을 업데이트하지 않고 있으며 이유를 파악할 수 없습니다. 문제를 설명하기 위해 JSFiddle을 만들었습니다. http://jsfiddle.net/8ckgf/2/부트 스트랩 - 기본 텍스트 영역을 업데이트하지 않는 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 프로젝트의 부트 스트랩 랩퍼가 원본 텍스트 영역에 대한 이벤트를 트리거하지 않는 것 같습니다. 대신 편집기를 초기화 할 때 이벤트를 선언해야합니다. 그에 따라 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

부트 스트랩 - 기본 텍스트 영역을 업데이트하지 않는 WYSIWYG HTML5 편집기

답변

관련 문제