Multiple Summer Note Divs On One Page

I am trying to get the code of a specific summer note div with multiple ones on a single page. My summer notes are created from a database with php as follows:

<script>
  $('.summernote').each(function(i, obj) { $(obj).summernote({
    onblur: function(e) {
      var id = $(obj).data('id');
      var sHTML = $(obj).code();
      alert(sHTML);
    }
  });
});
</script>

Solution 2:

To display multiple editors on a page, you need to place more than two <div> elements in HTML.

Example:

<divclass="summernote">summernote 1</div><divclass="summernote">summernote 2</div>

Then run summernote with jQuery selector.

$(document).ready(function() {
  $('.summernote').summernote();
});

For more information click

Note: Multiple Editor summernote not work with id

Solution 3:

I Finally got the code working for multiple summernote editors and image uploading!

To fix

"undefined"

, try:

var id = $(obj).data('id');

to

var id= $(obj).attr('id'))

Source:

https://github.com/neblina-software/balerocms-enterprise/blob/master/src/main/resources/static/js/app.js

Regards!

Solution 4:

For anyone looking to use summernote to output multiple content with foreach, loop/repetitive statement etc

Summernote works for the first output only but you can make it work for others by using the class twice:

<div class"summernote summernote"> </div>

Provided your script is like this:

<script>  
$(document).ready(function() {
$('.summernote').summernote();
});
</script>

Share