javascript - Rails 项目中表单上下文中的 'data-provider' 是什么？

Question

免责声明:这是我的第一个严肃的业余项目。总的来说，我对 Rails 和编程都是菜鸟，但我正在尽力学习。

我正在尝试在 Rails 项目的一个表单中实现所见即所得文本编辑器。用户可以创建具有“body”text_area 字段的“event”对象。现在，描述表单忽略所有用户格式，我想解决这个问题。我正在尝试实现 Summernote没有太多运气。我正在使用 Summernote-rails gem，但这部分文档给我带来了麻烦:

“如果您不使用 simple_form，则只需自行将 data-provider="summernote"添加到输入字段即可。”

我对此进行了无休止的研究，但我无法弄清楚。什么是“数据提供者”以及如何正确实现它？我的困惑源于我以前从未见过这个“数据提供者”。它是 HTML 表单属性吗？与 Bootstrap 相关吗？感谢任何能为我澄清这一点的人!

<div class="container">
<div class="col-md-8 col-md-offset-2">
    <div class="well">
    <div class="form-area">
        <h3>Create an Event</h3>
        <%= form_for @event, html: { multipart: true } do |f| %>

            <div class="form-group">
                <%= f.label :image %>
                <%= f.file_field :image %>
            </div>

            <div class="form-group">
                <%= f.label :title, "Title of the event" %>
                <%= f.text_area :title, rows: 1, class: "form-control" %>
            </div>

            <div class="form-group">
                <%= f.label :date %>
                <%= f.text_field :date, class: "form-control" %>
            </div>

            <div class="form-group">
                <%= f.label :time, "Start Time" %>
                <%= f.text_field :time, class: "form-control" %>

            <br>

            <div class="form-group">
                <%= f.label :body, "Include all the details about your event here." %>
                <%= f.text_area :body, rows: 10, class: "form-control" %>
            </div>
            <div class="form-group">
                <%= f.label :category_id %>
                <%= f.select(:category_id, Category.all.map{ |f| [f.name, f.id] }, {}, { class: "form-control", id: "select" }) %>
            </div>
            <%= f.submit class: "btn btn-primary" %>
        <% end %>
    </div>
</div>

我想将Summernote添加到这部分代码中:

<div class="form-group">
                <%= f.label :body, "Include all the details about your event here." %>
                <%= f.text_area :body, rows: 10, class: "form-control" %>
</div>

我遵循了 Summernote-rails gem 的说明，我的 application.js 看起来像这样

//= require jquery
//= require jquery_ujs
//= require google_analytics
//= require jquery.turbolinks
//= require pickadate/picker 
//= require pickadate/picker.date 
//= require pickadate/picker.time 
//= require bootstrap-sprockets
//= require bootstrap
//= require summernote
//= require turbolinks
//= require_tree .


$('[data-provider="summernote"]').each(function(){
  $(this).summernote({ });
})

Answer 1

你是对的，data-provider是一个HTML属性(尽管它与Bootstrap无关)。 HTML5 引入了“data-”前缀属性作为存储与元素相关的数据的约定，否则这些数据在之前的版本中将被归入类名。此外，您按照说明在 application.js 中编写的一点 JavaScript 实际上是一个选择器，用于设置具有该特定属性的所有对象(使用自定义方法)。您真正要做的就是使用更高级(或至少更具体定制)的类或 ID 来进行选择。

有关 HTML5 数据属性的基本概述，请参阅 this article .