如何在 Rails 的 SimpleForm 中实现 MediumEditor gem？答案

【问题标题】：How to implement MediumEditor gem within SimpleForm in Rails?如何在 Rails 的 SimpleForm 中实现 MediumEditor gem？
【发布时间】：2016-06-13 20:53:07
【问题描述】：

我想将MediumEditor 添加到用户可以编写文本的简单表单字段中。 rails 有一个gem，但我不知道如何在简单的表单中实现它。f.input 字段应该是什么样子？

【问题讨论】：

标签： ruby-on-rails ruby simple-form medium-editor

【解决方案1】：

根据 MediumEditor 文档，这是如何使用它的：

您现在可以实例化一个新的 MediumEditor 对象：
<script>var editor = new MediumEditor('.editable');</script>
上面的代码会将所有带有.editable类的元素转换成HTML5可编辑的内容，并为它们添加中型编辑器工具栏。

您需要通过 id 或 class 引用输入元素。如果您使用form_for，它生成的输入元素的id 将遵循"OBJECT_ATTRIBUTE" 格式，其中OBJECT 是您正在为其构建表单的对象的名称，ATTRIBUTE 是名称表单域对应的属性。

如果你的表单是这样的：

<%= form_for @article do |f| %>
  <%= f.text_area :body, size: "60x12" %>

生成的 html 元素将如下所示：

  <textarea id="article_body" name="article[body]" cols="60" rows="12"></textarea>

因此，您必须将 id "article_body" 传递给 MediumEditor 构造函数，如下所示：

 <script>var editor = new MediumEditor('#article_body');</script>

您还可以为输入元素选择任意id 或class，将其作为选项传递给表单构建器：

<%= f.text_area :body, size: "60x12", id: "my-medium-editor-text-area" %>

编辑：我刚刚注意到您使用的是简单表单。如果你想使用简单的形式传递一个自定义的id，它看起来像这样：

  <%= f.input :article, input_html: { id: "my-medium-editor-text-area" } %>

【讨论】：