我可以为每个编辑器单独设置textAngular中编辑器的高度吗？

Question

我一直在项目中使用textAngular并喜欢这个工具，但是我需要能够为每个实例设置编辑器的高度（例如，我在一个页面上有编辑器，我想将高度设置为300px，但是在另一个页面上，我想要一个小编辑器，我将高度设置为100px。）

我无法弄清楚如何做到这一点，如果有人能指出我正确的方向，我可以使用一些指导。

您可以在此处找到textAngular项目：https://github.com/fraywing/textAngular

我还在项目中发布了一个问题，但我想我可能会在这里得到更快的回复。该帖子的详细信息可在此处找到：https://github.com/fraywing/textAngular/issues/599

我的HTML设置如下：

<text-angular placeholder="Write discovery insight here..."
    ta-html-editor-class="myform-content"
    ta-focussed-class="myfocused"
    ng-model="ndi.insight">
</text-angular>

然后我按如下方式设置CSS类：

.myform-content {
    height: 100px;
    max-height: 100px;
}

.myfocused {
    height: 100px;
    max-height: 100px;
}

然而，这似乎并没有让我得到我所希望的。初始加载或更改时，编辑器的高度不会设置。相反，当我在编辑器中单击时，我会在输入文本框和工具栏之间出现一个大的空白：

有人能指出我正确的方向如何做到这一点？

谢谢！

Answer 1

在您的情况下，您可以在文本角度对象上使用CSS类

<text-angular placeholder="Write discovery insight here..."
    ta-html-editor-class="myform-content"
    ta-focussed-class="myfocused"
    ng-model="ndi.insight"
    class="my-large-area">
</text-angular>

<text-angular placeholder="Write discovery insight here..."
    ta-html-editor-class="myform-content"
    ta-focussed-class="myfocused"
    ng-model="ndi.insight"
    class="my-small-area">
</text-angular>

所以在这种情况下，你将有2个text-angular指令的实现，但都有自己的类。在CSS中，您可以调整每个实例的高度：

.my-large-area .ta-editor{
    height: 300px;
}
.my-small-area .ta-editor{
    height: 100px;
}

工具栏的高度取决于各个工具栏的包装。当容器/屏幕变小时，工具栏将包裹并占用2行空间，推动编辑器。