javascript - 我可以为每个编辑器分别在 textAngular 中设置编辑器的高度吗？

Question

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

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

您可以在此处找到 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

在您的情况下，您可以只在文本 Angular 对象上使用 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 行空间，将编辑器向下推。