Javascript 仅当编辑器处于焦点时才显示TextAngular工具栏(对于具有1个工具栏的多个编辑器)
我有多个编辑器和一个工具栏。最初,我只有一个编辑器,并根据单击工具栏中的按钮添加第二个和第三个编辑器。工具栏位于第一个编辑器的顶部,添加的后续编辑器一个叠在另一个之下 我遇到的问题是:Javascript 仅当编辑器处于焦点时才显示TextAngular工具栏(对于具有1个工具栏的多个编辑器),javascript,angularjs,Javascript,Angularjs,我有多个编辑器和一个工具栏。最初,我只有一个编辑器,并根据单击工具栏中的按钮添加第二个和第三个编辑器。工具栏位于第一个编辑器的顶部,添加的后续编辑器一个叠在另一个之下 我遇到的问题是: 当任何编辑器处于焦点时,如何显示工具栏 如何在焦点编辑器顶部移动工具栏 要解决问题1,请添加一些自定义CSS,如下所示: .ta-toolbar{ display: none; } .ta-toolbar.focussed{ display: block; } 当它的任何链接编辑器被聚焦到工具栏中时,聚
要解决问题1,请添加一些自定义CSS,如下所示:
.ta-toolbar{
display: none;
}
.ta-toolbar.focussed{
display: block;
}
当它的任何链接编辑器被聚焦到工具栏中时,聚焦类被添加到工具栏中
解决问题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>
也许对某些人来说,这很有用。要详细说明答案:
可以在每个文本编辑器周围的容器中添加唯一的类或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