多个 Summernote 文本区域字段

Posted 2023-03-22

【中文标题】多个 Summernote 文本区域字段

【英文标题】：Multiple Summernote text area fields

【发布时间】：2015-12-06 02:16:06

【问题描述】：

我有两个具有多个文本区域的 Rails 表单（编辑和新建）。我试图让他们所有人都使用 Summernote，但其中只有一个似乎使用了 javascript（如果有影响，则为最后一个文本区域）。如何更改它以使所有文本区域都使用 Summernote？

以下是相关代码：

咖啡javascript文件：

$ ->

  # to set summernote object
  # You should change '#med_description' to your textarea input id
  summer_note = $('#med_description')
  summer_note2 = $('#med_reactions')
  summer_note3 = $('#med_interactions')
  summer_note4 = $('#med_implementation')
  summer_note5 = $('#med_availability')
  summer_note6 = $('#med_caution')
  summer_note7 = $('#med_warnings')

  # to call summernote editor
  summer_note.summernote
  summer_note2.summernote
  summer_note3.summernote
  summer_note4.summernote
  summer_note5.summernote
  summer_note6.summernote
  summer_note7.summernote
    # to set options
    height:300
    codemirror:
      lineNumbers: true
      tabSize: 2
      theme: "solarized light"

  # to set code for summernote
  summer_note.code summer_note.val()
  summer_note2.code summer_note.val()
  summer_note3.code summer_note.val()
  summer_note4.code summer_note.val()
  summer_note5.code summer_note.val()
  summer_note6.code summer_note.val()
  summer_note7.code summer_note.val()

  # to get code for summernote
  summer_note.closest('form').submit ->
    # alert $('#med_description').code()
    summer_note.val summer_note.code()
    true

  # to get code for summernote
  summer_note2.closest('form').submit ->
    # alert $('#med_reactions').code()
    summer_note.val summer_note.code()
    true

  # to get code for summernote
  summer_note3.closest('form').submit ->
    # alert $('#med_interactions').code()
    summer_note.val summer_note.code()
    true

  # to get code for summernote
  summer_note4.closest('form').submit ->
    # alert $('#med_implementation').code()
    summer_note.val summer_note.code()
    true  

  # to get code for summernote
  summer_note5.closest('form').submit ->
    # alert $('#med_availability').code()
    summer_note.val summer_note.code()
    true  

  # to get code for summernote
  summer_note6.closest('form').submit ->
    # alert $('#med_caution').code()
    summer_note.val summer_note.code()
    true

  # to get code for summernote
  summer_note7.closest('form').submit ->
    # alert $('#med_warnings').code()
    summer_note.val summer_note.code()
    true

edit.html.erb：

<%= form_for(@med) do |f| %>
      <%= f.label :brand_name, "Name of the medicine:" %>
      <div><%= f.text_field :brand_name, required: true %></div>

      <%= f.label :generic_name %>
      <div><%= f.text_field :generic_name, required: true %></div>

       <%= f.label :description %>
      <div><%= f.text_area :description, as: :summernote, :id => 'description' %></div>

      <%= f.label :reactions %>
      <div><%= f.text_area :reactions, as: :summernote, :id => 'reactions' %></div>

      <%= f.label :interactions %>
      <div><%= f.text_area :interactions, as: :summernote, :id => 'interactions' %></div>

      <%= f.label :implementation %>
      <div><%= f.text_area :implementation, as: :summernote, :id => 'implementation' %></div>

      <%= f.label :availability %>
      <div><%= f.text_area :availability, as: :summernote, :id => 'availability' %></div>

      <%= f.label :caution %>
      <div><%= f.text_area :caution, as: :summernote, :id => 'caution' %></div>

      <%= f.label :warnings %>
      <div><%= f.text_area :warnings, as: :summernote, :id => 'warnings' %></div>

<div><%= f.submit "Save changes", class: "btn btn-primary" %> </div>
 <% end %>

new.html.erb：

 <%= simple_form_for @med, class: "form-horizontal", method: :post do |f| %>
                              <div class="form-group">
                                    <%= f.label :brand_name, "Name of the medicine:" %>
                                    <%= f.input :brand_name, required: true %>
                              </div>
                              <div class="form-group">
                              <%= f.label :generic_name %>
                              <%= f.input :generic_name, required: true  %>
                              </div>
                              <div class="form-group">
                                    <%= f.label :description %>
                                    <%= f.input :description, as: :summernote, :id => 'description' %>
                              </div>
                              <div class="form-group">
                                    <%= f.label :reactions %>
                                    <%= f.input :reactions, as: :summernote, id: 'reactions' %>
                              </div>
                              <div class="form-group">
                                 <%= f.label :interactions %>
                                    <%= f.input :interactions, as: :summernote, id: 'interactions' %>
                              </div>
                              <div class="form-group">
                                    <%= f.label :implementation %>
                                    <%= f.input :implementation, as: :summernote, id: 'implementation' %>
                              </div>
                              <div class="form-group">
                                    <%= f.label :availability %>
                                    <%= f.input :availability, as: :summernote, id: 'availability' %>
                              </div>
                              <div class="form-group">
                                    <%= f.label :caution %>
                                    <%= f.input :caution, as: :summernote, id: 'caution' %>
                              </div>
                              <div class="form-group">
                                    <%= f.label :warnings %>
                                    <%= f.input :warnings, as: :summernote, id: 'warnings' %>
                              </div>
                        <%= f.button :submit, class: "btn btn-primary" %>
                         <% end %>

谢谢！

编辑：Summernote github 页面 (https://github.com/summernote/summernote-rails) 显示以下代码。我认为这可能是解决我的问题的最佳方法。看起来它循环遍历具有 as: :summernote 的任何字段：

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

这是正确的答案吗？如果是，我该如何实现？

【参考方案1】：

以下代码有效：

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

我将该代码放在咖啡文件中的所有其他代码之上，它运行良好。