ruby-on-rails - 如何为 simple_form 自定义我的rich_text_area 中的行数?
问题描述
我SimpleForm 5.0.2
与 ActionText 一起使用。
我希望我的表单的主体字段是多行(比如 10 行),但我不知道如何让它工作。
这是我目前的尝试:
<%= f.rich_text_area :body, class: 'form-control', name: "article-text", input_html: { rows: 10 }, placeholder: "Enter your article body here..." %>
这会产生这个 HTML:
<trix-editor class="form-control" input_html="{:rows=>10}" placeholder="Enter your article body here..." id="article_body" input="article_body_trix_input_article" data-direct-upload-url="http://localhost:3000/rails/active_storage/direct_uploads" data-blob-url-template="http://localhost:3000/rails/active_storage/blobs/:signed_id/:filename" contenteditable="" role="textbox" trix-id="1" toolbar="trix-toolbar-1"></trix-editor>
看起来像这样:
请注意,我还尝试了各种迭代input_html:
,包括但不限于:
<%= ... input_html: { 'rows': '10' } ... %>
<%= ... input_html: { rows: "10" } ... %>
一切都无济于事。
我如何让这个工作?
解决方案
它看起来像rich_text_area
唯一的接受:class
选项,所以:input_html
这里什么都不做。但是因为高度是由 CSS 决定的,我们可以通过覆盖 trix-editor 的默认最小高度 CSS 来实现你想要的。
在app/assets/stylesheets/actiontext.scss
trix-editor {
&.customized-min-height {
min-height: 15em;
}
}
在您的视图文件中
f.rich_text_area :body, class: "form-control customized-min-height"
推荐阅读
- verilog - Verilog垃圾输入不会导致垃圾输出
- sql - 选择空字符串作为列时,SQL UNION 考虑了字符数
- c# - 在 C# 中获取 WPF TabControl 的当前选定选项卡的 ListView
- c++ - 有没有办法在while循环中存储变量?
- python - 在使用 python/pandas 循环时写入一个独特的 Excel 表
- python - Python 3.x 运行问题,ALL IDEA 无法读取 Python 3.x 的库
- r - 如何在ggplot上画一个grob?
- django - Django 没有为第三方应用程序获取覆盖的翻译
- r - 如何在 R Leaflet 标记弹出窗口中调整大图像的大小?
- c# - 水平调整大小时具有动态方向的WPF Treeview