仅当具有1个工具栏的多个编辑器聚焦于编辑器时，才显示TextAngular工具栏 [英] Show TextAngular toolbar only when editor is in focus for multiple editors with 1 toolbar

问题描述

我有多个编辑器和一个工具栏.最初，我只有一个编辑器，并根据工具栏中的按钮单击添加第二个和第三个.工具栏位于第一个编辑器的顶部，随后添加的随后的编辑器一个接一个地堆叠在一起.

I have multiple editors with one toolbar. Initially I have just one editor and add say second and third based on the click of a button in the toolbar. The toolbar is on the top of the 1st editor and the subsequent editors that gets added are stacked one below the other.

我遇到的问题是:

1. 当任何一个编辑器处于焦点位置时，如何显示工具栏?

1. How do I show the toolbar when any of the editor is in focus?

我如何将工具栏移到编辑器顶部的焦点位置?

How do I move the toolbar on top of the editor in focus?

推荐答案

要解决问题1，请添加一些自定义CSS，如下所示:

To fix problem 1, add some custom CSS Like this:

.ta-toolbar{
  display: none;
}
.ta-toolbar.focussed{
  display: block;
}

当任何一个链接的编辑器都被聚焦时，聚焦的类即被添加到工具栏中.

The focussed class is added to the toolbar when any of it's linked editors are focussed into.

解决问题2可能会有些棘手，并且需要做一些额外的工作.这些步骤是:

To fix problem 2 is probably a little more tricky and will require some extra work. The steps are:

1. 注意所有编辑器.
2. 发生这种情况时，将工具栏的位置更改为相对于当前编辑器的位置-此时两者都将具有 focussed 类(可能使用绝对定位).

1. Watch for a focus on any of the editors.
2. When this happens, change the position of the toolbar to relative to the current editor - at this point both will have the focussed class (use absolute positioning probably).

这篇关于仅当具有1个工具栏的多个编辑器聚焦于编辑器时，才显示TextAngular工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！