只有当编辑器对焦有多个编辑器并带有1个工具栏时才显示TextAngular工具栏

问题描述：

我有一个工具栏的多个编辑器。最初，我只有一个编辑器，并根据工具栏中的按钮单击添加第二个和第三个。工具栏位于第一个编辑器的顶部，随后添加的编辑器将叠放在另一个之下。只有当编辑器对焦有多个编辑器并带有1个工具栏时才显示TextAngular工具栏

我的问题是：

如何显示工具栏时，任何编辑器是焦点？
如何将编辑器顶部的工具栏移动到焦点位置？

答

要解决问题1，添加一些自定义CSS像这样：当任何它的链接编辑都集中到

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

被聚焦的类被添加到工具栏。

解决问题2可能会更棘手一点，需要一些额外的工作。步骤是：

请注意关注任何编辑者。
发生这种情况时，将工具栏的位置更改为相对于当前编辑器 - 此时两者都将具有focussed类（可能使用绝对定位）。

答

如果有人需要一个简单场景的例子。为了把工具栏放在别的地方，人们可以使用类似的东西：

<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>

也许对某人来说这很方便。

答

来阐述对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

只有当编辑器对焦有多个编辑器并带有1个工具栏时才显示TextAngular工具栏

相关推荐