[英]How to implement MediumEditor gem within SimpleForm in Rails?
I want to add MediumEditor to a simple form field where users are able to write texts. 我想将MediumEditor添加到一个用户可以编写文本的简单表单字段中。 There is a gem for rails but I don't know how to implement it within a simple form.. How the f.input field should look?
有用于rails的gem ,但我不知道如何以简单的形式实现它。f.input字段的外观如何?
According to the MediumEditor docs, this is how to use it: 根据MediumEditor文档,这是使用方法:
You can now instantiate a new MediumEditor object:
现在,您可以实例化一个新的MediumEditor对象:
<script>var editor = new MediumEditor('.editable');</script>
The above code will transform all the elements with the
.editable
class into HTML5 editable contents and add the medium editor toolbar to them.上面的代码会将带有
.editable
类的所有元素转换为HTML5可编辑的内容,并向其中添加媒体编辑器工具栏。
You need to reference the input element by its id
or class
. 您需要通过其
id
或class
来引用输入元素。 If you are using form_for
, the id of the input element that it generates will follow the format "OBJECT_ATTRIBUTE"
, where OBJECT
is the name of the object for which you are building the form, and ATTRIBUTE
is the name of the attribute which the form field corresponds to. 如果使用
form_for
,则它生成的输入元素的ID将遵循"OBJECT_ATTRIBUTE"
格式,其中OBJECT
是您要为其构建表单的对象的名称,而ATTRIBUTE
是该表单的ATTRIBUTE
的名称字段对应。
So if your form looks like this: 因此,如果您的表单如下所示:
<%= form_for @article do |f| %>
<%= f.text_area :body, size: "60x12" %>
the resulting html element will look like this: 生成的html元素将如下所示:
<textarea id="article_body" name="article[body]" cols="60" rows="12"></textarea>
So you'd have to pass the id
"article_body"
to the MediumEditor constructor, like this: 因此,您必须将
id
"article_body"
传递给MediumEditor构造函数,如下所示:
<script>var editor = new MediumEditor('#article_body');</script>
You can also choose any arbitrary id
or class
for your input element passing it as an option to the form builder: 您还可以为输入元素选择任意
id
或class
,将其作为选项传递给表单构建器:
<%= f.text_area :body, size: "60x12", id: "my-medium-editor-text-area" %>
Edit: I just noticed you're using Simple Form. 编辑:我刚刚注意到您正在使用简单表单。 If you wanted to pass a custom
id
using simple form it would have look something like this: 如果您想使用简单的形式传递自定义
id
,它将看起来像这样:
<%= f.input :article, input_html: { id: "my-medium-editor-text-area" } %>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.