我想将MediumEditor添加到一个简单的表单字段中,用户可以在其中编写文本。有一个gem用于rails,但我不知道如何在一个简单的表单中实现它.f.input字段应该如何显示?
答案 0 :(得分:3)
根据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" } %>