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選擇器（例如，將一個類添加到表單中，並同時添加它）。