Textarea value change when summernote div is changed

Question

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

<div id="summernote" class="form-control"><?php echo $laws['content']; ?></div> 

$(document).ready(function() {
   $('#summernote').summernote({
     height: 300,
   });
});

directly following the div I have a text area with an ID.

<textarea id="lawsContent"></textarea>

I want the content of the textarea to change as I type in the summernote div. Just like what is happening while I am typing this question.

Bayberry

What have you tried? The summernote API documentation (hackerwins.github.io/summernote/features.html#api-summernote) shows a way to do it. Hint: try a combination of a keyup event handler and the .code() function. – Coxcombry

Answer 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,
    });
});

Bayberry

You don't have to do this by yourself. After v0.7.0 textarea will be synced automatically. github.com/summernote/summernote/blob/develop/src/js/base/… – Grope

The .code() method didn't work for me - I think it has been changed to $('#summernote').summernote('code'). – Changchangaris

Answer 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;
}

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


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

Output:
<textarea id="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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.7/summernote.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.7/summernote.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>


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

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

Syncopation

Answer 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  

Athenian

Answer 4

Use This Example:

<form id="form_id" action="/summernote.php" onsubmit="return postForm()">
    <textarea id="summernote" rows="6" name="textarea_name" ></textarea>
</form>

<script type="text/javascript">
    $(document).ready(function(){
        var postForm = function() {
            var content = $('textarea[name="textarea_name"]').html($('#summernote').code());
        }
    });
</script>

Frolick

Answer 5

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


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

Copious

Answer 6

<div role="tabpanel" class="tab-pane" id="product_desc_l">
    <p>
        First impressions are everything. <br> <br>
    </p>
    <strong>Features:</strong>
</div>

<textarea id="product_desc_long" name="product_desc_long"  class="summernote form-control" rows="10" placeholder="Enter the product long description..."></textarea>


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

This worked for me

Dixie