javascript - 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 正确呈现。如果我已经将几张照片保存到我的狗 模型中，它们在编辑页面上看起来都非常好。但是，当我点击“添加图片”时，它会创建新的图片字段，其中 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 以从 View 中提取它]

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 事件。如果您有多个使用 cocoon 的表单，您可能需要一个更好/更精确的 css 选择器(例如，向表单添加一个类并同时添加它)。