如何为 simple_form 自定义 rich_text_area 中的行数？

Question

我正在使用 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" } ... %>

一切都无济于事。

我如何让它工作？

Answer 1

看起来 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"

Answer 2

您可以为 trix 编辑器设置最小高度属性，如下所示：

trix-editor {
  &.form-control {
    min-height: 20rem;
    height: auto;
  }
}

如何为 simple_form 自定义 rich_text_area 中的行数？

How do I customize the number of rows in my rich_text_area for simple_form?

ruby-on-rails

simple-form

trix

ruby-on-rails-6

actiontext