多个夏季音符在一页上显示

时间:2014-03-24 19:42:33

标签: javascript php jquery html css

我试图在一个页面上获取特定夏季音符div的代码,其中包含多个代码。

我的夏季笔记是使用php从数据库创建的,如下所示:

<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>

然后我的javascript就是:

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

它始终获得第一个$('.summernote').eq(0).code(); summernote代码,而不是第二个或第三个。

我要做的是每个summernote变得模糊,在隐藏的textarea中更新代码以提交回数据库。

(顺便说一句)我正在启动这样的夏季音符:

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

4 个答案:

答案 0 :(得分:1)

选择所有summernote后,您需要通过指定一个元素来访问其属性:

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

答案 1 :(得分:1)

要在页面上显示多个编辑器,您需要在HTML中放置两个以上的<div class="summernote">summernote 1</div> <div class="summernote">summernote 2</div> 元素。

示例:

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

然后使用jQuery选择器运行summernote。

id

了解更多信息click

注意:多编辑器summernote不适用于{{1}}

答案 2 :(得分:0)

我终于让代码适用于多个summernote编辑器和图像上传!

修复

  

“未定义”

,试试:

  

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

  

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

来源:

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

问候!

答案 3 :(得分:0)

对于希望使用summernote通过foreach,循环/重复声明等输出多个内容的人

Summernote仅用于第一个输出,但是您可以通过两次使用

使它对其他输出起作用。
<div class"summernote summernote"> </div>

提供的脚本如下:

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