javascript - Multiple Summer note divs on one page - Stack Overflow

admin管理员组

文章数量:1289901

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:

<div class="tab-content">
  <?php $i=-1; foreach($contents as $content): ?>
      <?php $i++; ?>
      <div class="tab-pane" id="<?php echo $content->contentName; ?>">
          <div class="summernote" data-id="<?php echo $i; ?>">
              <?php echo $content->content; ?>
          </div>
      </div>
  <?php endforeach; ?>
</div>

And then my javascript is:

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

It always gets the first $('.summernote').eq(0).code(); summernote code never the second or third one.

What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database.

(btw) I am initilizing the summer notes like this:

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

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:

<div class="tab-content">
  <?php $i=-1; foreach($contents as $content): ?>
      <?php $i++; ?>
      <div class="tab-pane" id="<?php echo $content->contentName; ?>">
          <div class="summernote" data-id="<?php echo $i; ?>">
              <?php echo $content->content; ?>
          </div>
      </div>
  <?php endforeach; ?>
</div>

And then my javascript is:

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

It always gets the first $('.summernote').eq(0).code(); summernote code never the second or third one.

What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database.

(btw) I am initilizing the summer notes like this:

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

• javascript
• php
• jquery
• html
• css

Share Improve this question Follow asked Mar 24, 2014 at 19:42 user3367639user3367639 59733 gold badges66 silver badges2020 bronze badges 1

• So no solution to this question. – user3367639 Commented Mar 24, 2014 at 20:01

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

After selecting all summernote's you need to access their attributes by specifying one element like:

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

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

Example:

<div class="summernote">summernote 1</div>
<div class="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

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./neblina-software/balerocms-enterprise/blob/master/src/main/resources/static/js/app.js

Regards!

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>

if you are using summernote inside a textarea in a form and you intend to apply it on multiple textarea(s) on the same form, replace id=summernote with class="summernote"

Dont forget to do the same on your initialisation script

<script>
    $('.summernote').summernote({
        height: 200 //just specifies the height of the summernote textarea
    });
</script>

Example

<textarea class="summernote" name="valueToBeExtractedBackend" required></textarea>

<script>
    $('.summernote').summernote({
        height: 200
    });
</script>

本文标签： javascriptMultiple Summer note divs on one pageStack Overflow