How to get entered content in summernote editor using jQuery?

Question

I have used the Summernote editor. I am able to get the editor but I am unable to get the data entered in the editor.

I have followed instructions in this url but I am unable to get the entered data in the editor while clicking button. Can anyone help me on this? Thank you

$('#summernote').summernote({
  tabsize: 2,
  height: 100
});

$("#test").click(function() {
  var markupStr = $('#summernote').summernote('code');
  alert(markupStr);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
<div id="summernote"></div>
<div> <button id="test">click</button> </div>

Answer 1

Add code like this

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

$("#test").click(function() {
  var markupStr = $('#summernote').summernote('code');
  alert(markupStr);
});
});