Textarea Value Change When Summernote Div Is Changed

I have setup a div for the summernote to alter text pulled from a database.

$(d

Solution 1:

Using the summernote API

I came up with this solution:

$(document).ready(function() {
    $('#summernote').summernote({
      onKeyup: function(e) {
        $("#lawsContent").val($("#summernote").code());
      },
      height: 300,
    });
});

Solution 2:

I think it is better to handle the onChange event.

v0.7.0

$('#summernote').summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
    }
  }
});

$(document).ready(function(){

    $("#summernote").summernote(
        {
            height: "10em",
            callbacks: {
              onChange: function (contents, $editable) {
                var code = $(this).summernote("code");
                $("#lawsContent").val(code);
              }
            }
        }
    );

});

#lawsContent
{
    width: 100%;
    height: 10em;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.min.js"></script><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /><linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" /><linkhref="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.7.0/summernote.min.css" />


Editor:
<divid="summernote"class="form-control"></div>

Output:
<textareaid="lawsContent"class="form-control"></textarea>

v0.6.5

As of this version, callback only works with camel case string.

$('#summernote').summernote({
  onChange: function(contents, $editable) {
    console.log('onChange:', contents, $editable);
  }
});

$(document).ready(function(){

    $("#summernote").summernote(
        {
            height: "10em",
            onChange: function (contents, $editable) {
                $("#lawsContent").val(contents);
            }
        }
    );

});

#lawsContent
{
    width: 100%;
    height: 10em;
}

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.7/summernote.min.js"></script><linkhref="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" /><linkhref="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.7/summernote.min.css" /><linkhref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />


Editor:
<divid="summernote"class="form-control"></div>

Output:
<textareaid="lawsContent"class="form-control"></textarea>

Solution 3:

Inspired by @user3367639, this is a more generic way to do it

$('.summernote').each(function () {
    var $textArea = $(this);

    $textArea.summernote({
        onKeyup: function (e) {
            $textArea.val($(this).code());
            $textArea.change(); //To update any action binded on the control
        }
    });
});

And with this method :

String.prototype.strip = function()
{
   var tmpDiv = document.createElement("div");
   tmpDiv.innerHTML = this;
   return tmpDiv.textContent || tmpDiv.innerText || "";
}

You could do in your JS controller something like this to get the text value of your textarea

$myTextArea.val().strip(); //Where val() returns the html and strip() returns the text

Hope this will help  

Solution 4:

Use This Example:

<formid="form_id"action="/summernote.php"onsubmit="return postForm()"><textareaid="summernote"rows="6"name="textarea_name" ></textarea></form><scripttype="text/javascript">
    $(document).ready(function(){
        var postForm = function() {
            var content = $('textarea[name="textarea_name"]').html($('#summernote').code());
        }
    });
</script>

Solution 5:

$('textarea').summernote({
  callbacks: {
    onChange: function(contents, $editable) {
      console.log('onChange:', contents, $editable);
    }
  }
})


<form>
<textareaname="content"onChange></textarea>
</form>