Trix 所见即所得编辑器更改文本字段的默认行/垂直高度答案

【问题标题】：Trix WYSIWYG Editor change default rows/vertical height of textfieldTrix 所见即所得编辑器更改文本字段的默认行/垂直高度
【发布时间】：2018-06-08 21:17:27
【问题描述】：

我通读了Trix documentation 并没有因此而跳出答案。看来 Trix WYSIWYG 编辑器默认显示 3 行：

这可以切换到更多行，例如：15 左右行：

【问题讨论】：

你试过用 CSS 调整高度吗？
嗯，我发现它与 css min-height 属性有关。我会继续关注的。

标签： ruby-on-rails ruby trix

【解决方案1】：

这是设置min-height css 属性的问题。使用 javascript，如果页面上只有一个 trix-editor，则此方法有效：

$('trix-editor').css("min-height", "350px");

如果您在页面上有多个 trix 编辑器并且您只想更改那个的默认高度：我所做的是将 trix 编辑器包装在一个 div 中，在该 div 上设置一个类，然后使用 find ：

$('.solution-trix-field-wrapper').find($('trix-editor')).css("min-height", "350px");

【讨论】：

感谢您的回答：但是在 rails 6 项目中应该在哪里添加此代码？

【解决方案2】：

是的，你是对的，但我用不同的方式解决了。

您可以覆盖默认 CSS，例如 trix-content 类

.trix-content{
    height: 350px;
}

如果您想在一定深度后使用滚动，则可以使用此 CSS 增加高度，然后 overflow-y: auto; 喜欢

.trix-content{
    height: 350px;
    overflow-y: auto;
}

350px之后会自动添加滚动条。

我应该在哪里添加代码？

尝试将其添加到您的 stylesheets/application.scss 文件中（如果您使用的是 sass - 或等效文件）。

【讨论】：

感谢您的回答：但是我应该在哪里添加此代码到 rails 6 项目？
我知道这个答案已经有两年的历史了，但我认为值得指出的是 OP 在 .trix-editor 而不是 .trix-content 方面存在问题。

【解决方案3】：

在 rails 7 中，我必须覆盖 trix-editor 元素的 min-height。代码在app/assets/stylesheets/actiontext.css

trix-editor {
  min-height: 15em;
}

【讨论】：