CODEWITHSUNDEEP
jquerytwitter-bootstrapwysihtml5
Mick Sear
Mick Sear

Reputation: 1566

Bootstrap - WYSIWYG HTML5 editor not updating underlying textarea

I'm trying to use Bootstrap-WYSIWYG (http://jhollingworth.github.com/bootstrap-wysihtml5/) in my application. I'm injecting a textarea into a page and then instantiating the editor. So far, so good. But it's not updating the underlying textarea and I can't figure out why. I've created a JSFiddle to demonstrate the problem: http://jsfiddle.net/8ckgf/2/

If anyone can see why this isn't working, I'd be grateful.

<!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>

Upvotes: 2

Views: 4276

Answers (1)

Mick Sear
Mick Sear

Reputation: 1566

OK, I fixed this myself in the end. For some reason, the Bootstrap wrapper around the WYSIHTML5 project doesn't seem to trigger events against the original textarea. Instead, you need to declare the events when you initialize the editor. I've updated the JSFiddle accordingly.

Fixed version: 

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

});

For the record, if anyone else comes across the same thing, a simple fix is to simply trigger 'change' on the textarea underneath from within the handler you pass into the instance, so something like this:

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

});

This is how I kinda expected the control to work from the outset, to be honest.

Upvotes: 2

Related Questions