只有當編輯器對焦有多個編輯器並帶有1個工具欄時才顯示TextAngular工具欄

Question

我有一個工具欄的多個編輯器。最初，我只有一個編輯器，並根據工具欄中的按鈕單擊添加第二個和第三個。工具欄位於第一個編輯器的頂部，隨後添加的編輯器將疊放在另一個之下。

我的問題是：

1. 如何顯示工具欄時，任何編輯器是焦點？

2. 如何將編輯器頂部的工具欄移動到焦點位置？

Answer 1

要解決問題1，添加一些自定義CSS像這樣：當任何它的鏈接編輯都集中到

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

被聚焦的類被添加到工具欄。

解決問題2可能會更棘手一點，需要一些額外的工作。步驟是：

1. 請注意關注任何編輯者。
2. 發生這種情況時，將工具欄的位置更改爲相對於當前編輯器 - 此時兩者都將具有focussed類（可能使用絕對定位）。

Answer 2

如果有人需要一個簡單場景的例子。爲了把工具欄放在別的地方，人們可以使用類似的東西：

<div text-angular-toolbar class="toolbar" name="toolbar" ta-toolbar="[['h1', 'h2', 'p', 'pre', 'quote', 'bold', 'italics', 'underline', 'ul', 'ol', 'justifyLeft', 'justifyCenter', 'justifyRight', 'indent', 'outdent', 'insertImage']]"></div> 
<div style="overflow: auto; width: 100%; height: 100%; max-width: 700px; max-height: 750px; background-color: #FFFFFF;"> 
    <div text-angular ta-target-toolbars="toolbar" ng-model="htmlContent"></div> 
</div> 

也許對某人來說這很方便。

Answer 3

來闡述對Simeon's答案：

您可以添加一個唯一的類或ID圍繞因而限制規則只對每個編輯文本的角度編輯的容器。例如：

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

或者，如果你正在使用SASS或SCSS可以簡化爲：

.editor1, .editor2 
    .ta-toolbar 
    display: none 
    &.focused 
     display: block