Trix 所见即所得编辑器更改文本字段的默认 rows/vertical 高度

Question

我通读了 Trix documentation 并没有为此跳出答案。似乎 Trix WYSIWYG 编辑器默认显示 3 行：

任何机会都可以切换到更多行，例如：15 行左右：

Answer 1

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

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

如果页面上有多个 trix 编辑器，而您只想更改那个的默认高度：我所做的是将 trix 编辑器包裹在 div 中，设置 class 在 div 上，并使用 find:

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

Answer 2

是的，你是对的，但我已经解决了不同的方法。

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

.trix-content{
    height: 350px;
}

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

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

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

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

Answer 3

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

中的代码

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

Trix WYSIWYG Editor change default rows/vertical height of textfield