一页上有多个 Summer note div答案

【问题标题】：Multiple Summer note divs on one page一页上有多个 Summer note div
【发布时间】：2014-05-02 09:11:09
【问题描述】：

我正在尝试在单个页面上获取特定夏季笔记 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 变得模糊时，在隐藏的文本区域中更新该代码以提交回数据库。

（顺便说一句）我正在像这样初始化夏季笔记：

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

【问题讨论】：

所以这个问题没有办法解决。

标签： javascript php jquery html css

【解决方案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>

【讨论】：

抱歉还有一个错误，我正在编辑我的答案
根据summernote api，这是做模糊的正确方法。直接从那个网站复制的。您的代码不起作用。
对不起，我不知道 Summercode 是一个库。
最后一次编辑以恢复 .summarnote 调用并添加 e.target 而不是这个。
Var id 仍然返回未定义。

【解决方案2】：

要在一个页面上显示多个编辑器，您需要在 HTML 中放置两个以上的 <div> 元素。

示例：

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

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

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

欲了解更多信息click

注意：多编辑器 Summernote 不适用于 id

【讨论】：

【解决方案3】：

我终于得到了适用于多个 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

问候！

【讨论】：

【解决方案4】：

对于希望使用summernote 输出多个内容的人，如foreach、循环/重复语句等

Summernote 仅适用于第一个输出，但您可以通过两次使用类使其适用于其他输出：

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

如果你的脚本是这样的：

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

【讨论】：

您的意思是可以将多个 textarea 或 div 分配给同一个 sommernote 实例，而无需为每个想要使用它的 ta/div 再次实例化它？

【解决方案5】：

如果您在表单的文本区域内使用 Summernote，并且您打算将其应用于同一表单的多个文本区域，请将 id=summernote 替换为 class="summernote"

别忘了在你的初始化脚本上做同样的事情

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

例子

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

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

【讨论】：