仅在编辑器为多个编辑器焦点时使用一个工具栏时才显示TextAngular工具栏
仅在编辑器为多个编辑器焦点时使用一个工具栏时才显示TextAngular工具栏
提问于 2014-11-21 13:41:51
我有多个编辑器，只有一个工具栏。最初，我只有一个编辑器，根据工具栏中一个按钮的点击添加，比如说，第二个和第三个编辑器。工具栏位于第一个编辑器的顶部，随后添加的编辑器在另一个下面堆叠。
我遇到的问题是：
- 当任何编辑器焦点集中时，如何显示工具栏？
- 如何将工具栏移动到焦点编辑器的顶部？
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-11-26 19:27:28
要修复问题1，添加一些自定义CSS，如下所示：
.ta-toolbar{
display: none;
}
.ta-toolbar.focussed{
display: block;
}焦点类在任何链接编辑器被聚焦到工具栏中时都会添加到工具栏中。
要修复问题2可能要复杂一些，并且需要额外的工作。这些步骤是：
- 注意关注任何一个编辑。
- 当发生这种情况时，将工具栏的位置更改为相对于当前编辑器-此时两者都将具有
focussed类(可能使用绝对定位)。
Stack Overflow用户
发布于 2014-12-11 04:04:50
如果有人需要一个更简单的场景的例子。要将工具栏放在其他地方，可以使用以下内容：
<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>也许对某个人来说，这是有用的。
Stack Overflow用户
发布于 2017-01-23 07:48:52
阐述西蒙斯的回答：
您可以在每个文本角编辑器周围的容器中添加一个惟一的类或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页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27070859
复制相关文章
相似问题
腾讯云开发者
