有没有办法增加 Wagtail 内容面板中 TextBlock 的高度？

Question

有没有办法增加 Wagtail 内容面板中 TextBlock 的高度？我之前使用的是 RichTextBlock。但这会删除通过 JS 添加的 aos 动画（aos-animate 类被替换为 data-block-key）。

content = blocks.TextBlock(
    max_length=1000,
    help_text = 'Text for the About section. Maximum length is 1000 characters',
)

enter image description here

Answer 1

现阶段TextBlock 不支持自定义小部件，但您可以传入rows kwarg 以增加该字段的默认行（这将使其更高）。

值得注意的是，TextBlock 字段会在您键入时自动增加高度。

content = blocks.TextBlock(
    max_length=1000,
    rows=15,
    help_text = 'Text for the About section. Maximum length is 1000 characters',
)

阅读更多关于textarea 输入和rows 在这里的信息 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

Answer 2

rows 方法是一个不错的、干净的折衷方案：一个优雅的解决方案。

但是，如果您想触发 autosize() 方法以将 TextBlock 更改为输入的大小，则可以在覆盖的模板中使用此 JavaScript hack：

<script>
document.addEventListener('DOMContentLoaded', function() {
    var ta = document.getElementById('{{ child.id_for_label }}');
    var evt = new Event('input');
    ta.dispatchEvent(evt);
});
</script>

您可以在此处查看示例： https://github.com/FlipperPA/wagtailcodeblock/blob/6d3a36442716155fdc29e1053033ef48a35047ca/wagtailcodeblock/templates/wagtailcodeblock/code_block_form.html#L18