仅当编辑器为具有1个工具栏的多个编辑器聚焦时,才显示TextAngular工具栏

时间:2014-11-21 21:41:51

标签: javascript angularjs

我有多个编辑器和一个工具栏。最初我只有一个编辑器,并根据工具栏中的一个按钮添加说第二和第三。工具栏位于第一个编辑器的顶部,添加的后续编辑器堆叠在另一个下面。

我遇到的问题是:

  1. 当任何编辑器处于焦点时,如何显示工具栏?

  2. 如何在编辑器顶部移动工具栏?

3 个答案:

答案 0 :(得分:7)

要解决问题1,请添加一些自定义CSS,例如:

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

当焦点类的任何链接编辑器被聚焦时,焦点类被添加到工具栏中。

解决问题2可能有点棘手,需要一些额外的工作。步骤是:

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

答案 1 :(得分:3)

如果某人需要一个简单方案的示例。要将工具栏放在其他位置,可以使用以下内容:

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

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

答案 2 :(得分:0)

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