Summernote编辑器无法使用嵌套表单

Question

我正在尝试在我的ruby-on-rails应用程序中使用cocoon-gem和summernote-gem 。
这是我的模型：

class Dog < ApplicationRecord
    has_many :pictures, as: :imageable, dependent: :destroy
    accepts_nested_attributes_for :pictures, reject_if: :all_blank, allow_destroy: true
end

乍一看，新建或编辑页面似乎还不错。 第一个摘要字段正确显示了summernote。 而且，如果我已经保存了几张图片到我的狗模型中，那么在编辑页面上它们看起来都很好。 但是，当我单击“添加图片”时，它将创建新图片字段，而摘要字段未使用summernote正确呈现。 在html页面中，它看起来像这样：

<div class="field">
    <label class="string optional" for="dog_pictures_attributes_1544609860934_summary">Summary</label>
    <textarea data-provider="summernote" name="dog[pictures_attributes][1544609860934][summary]" id="dog_pictures_attributes_1544609860934_summary"></textarea>
</div>

代替这个：

<div class="field">
    <label class="string optional" for="dog_pictures_attributes_1_summary">Summary</label>
    <textarea data-provider="summernote" name="dog[pictures_attributes][1][summary]" id="dog_pictures_attributes_1_summary" style="display: none;"></textarea>
    <div class="note-editor note-frame">...</div>
</div>

这是我的_form.erb ：（如果相关）

<%= simple_form_for @dog, defaults: { required: false } do |f| %>
  <div class="field">
    <%= f.label 'Note' %>
    <%= f.text_area :note, 'data-provider': :summernote %>
  </div>
  <h2> Add pictures </h2>
  <%= f.fields_for :pictures do |picture| %>
    <%= render 'picture_fields', :f => picture %>
  <% end %>
  <div class='links'>
    <%= link_to_add_association 'add picture', f, :pictures %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

这是我的_ picture_fields.erb：

<div class='nested-fields'>
  <div class="field">
    <%= f.file_field :image %>
  </div>
  <div class="field">
    <%= f.label :author %>
    <%= f.text_field :author %>
  </div>
  <div class="field">
    <%= f.label :summary %>
    <%= f.text_area :summary, 'data-provider': :summernote %>
  </div>
    <%= link_to_remove_association "remove picture", f %>
</div>

我还尝试使用漂移的红宝石从头开始构建嵌套表单。 但这会引起同样的问题

Answer 1

在项目中动态插入项目时，还必须在这些项目上初始化summernote编辑器。 Cocoon具有回调，可让您执行此操作。

加载页面时，要初始化summernote，您需要执行以下操作

$('[data-provider="summernote"]').each ->
    $(this).summernote

（摘自summernote-rails gem文档）

但这仅适用于页面上已存在的“ summernote”，它无法初始化尚不存在的注释。

因此，在插入嵌套项目之后，我们必须使用相同的代码来初始化插入的注释。 这样的事情应该起作用：

$('form').on('cocoon:after-insert', function(e, insertedItem) {
    insertedItem.find('[data-provider="summernote"]').each(function() {
      $(this).summernote();  
    })  
});

这将在新嵌套的项目中查找summernote项目并将其初始化。

[编辑：改进javascript以从视图中提取它]

Javascript文件通常在app/assets/javascripts分组，如果您要编辑Dog ，那么我们添加一个新文件dogs.js并输入以下代码：

$(document).on('cocoon:after-insert', 'form', function(e, insertedItem) {
    insertedItem.find('[data-provider="summernote"]').each(function() {
      $(this).summernote();  
    })  
});

然后使用require dogs将此文件添加到application.js 。

此代码在文档上注册了一个事件处理程序，它将侦听form上触发的任何cocoon:after-insert事件。 如果您使用茧形有多个表单，则可能需要一个更好/更精确的CSS选择器（例如，将一个类添加到表单中，并同时添加它）。