Редактор Summernote не работает с вложенными формами - PullRequest
Новая
       37

Редактор Summernote не работает с вложенными формами

0 голосов
/ 12 декабря 2018

Я пытаюсь использовать кокон-камень и summernote-gem в моем приложении ruby-on-rails.
Это моя модель: 

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

На первый взгляд новая страница или страница редактирования выглядят хорошо.Первое резюме поле рендеринга с 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>

Я также пытался создать вложенную форму с нуля с дрейфующим рубином .Но это вызывает ту же проблему

1 Ответ

0 голосов
/ 12 декабря 2018

При динамическом добавлении элементов на страницу вам также придется инициализировать редактор Summernote для этих элементов.У Cocoon есть обратные вызовы, чтобы вы могли это сделать.

При загрузке страницы, чтобы инициализировать summernote, вы должны сделать что-то вроде 

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

(скопировано из документации по самоцвету summernote-rails)

Но это работает только для"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();  
    })  
});

Затем добавьте этот файл в application.js, используя require dogs.

Этот код регистрирует обработчик событий в документе, он будет прослушивать любое событие cocoon:after-insert, запущенное на form.Если у вас есть несколько форм, использующих cocoon, вам может потребоваться более точный или более точный селектор CSS (например, добавить класс в форму и добавить его тоже).

...