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

乍一看，新页面或编辑页面似乎还不错。第一个 summary 字段用summernote 正确渲染。如果我已经有几张图片保存到我的 dog 模型中，它们在编辑页面上看起来都很好。 但是，当我单击“添加图片”时，它会创建新的图片字段，其中 summary 字段未使用 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>

我还尝试使用drifting ruby 从头开始​​构建嵌套表单。但它会导致同样的问题

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，如果你正在编辑Dogs让我们添加一个新文件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 事件。如果您有多个使用 cocoon 的表单，您可能需要一个更好/更精确的 css 选择器（例如，向表单添加一个类并添加它）。