仅当具有 1 个工具栏的多个编辑器的编辑器处于焦点中时，才显示 TextAngular 工具栏

Show TextAngular toolbar only when editor is in focus for multiple editors with 1 toolbar

本文关键字：编辑器 工具栏 焦点 TextAngular 显示 于焦点      更新时间：2023-09-26

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

我遇到的问题是：

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

  2. 如何将工具栏移动到焦点编辑器的顶部？

要修复问题 1，请添加一些自定义 CSS，如下所示：

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

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

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

  1. 关注任何编辑器。
  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>

也许对于某人来说，这会派上用场。

阐述西缅的回答：

您可以将唯一的类或 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
相关文章：