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

Question

I have multiple editors with one toolbar. Initially I have just one editor and add say second and third based on the click of a button in the toolbar. The toolbar is on the top of the 1st editor and the subsequent editors that gets added are stacked one below the other.

The problems I have are:

1. How do I show the toolbar when any of the editor is in focus?

2. How do I move the toolbar on top of the editor in focus?

Answer 1

To fix problem 1, add some custom CSS Like this:

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

The focussed class is added to the toolbar when any of it's linked editors are focussed into.

To fix problem 2 is probably a little more tricky and will require some extra work. The steps are:

1. Watch for a focus on any of the editors.
2. When this happens, change the position of the toolbar to relative to the current editor - at this point both will have the focussed class (use absolute positioning probably).

Answer 2

If someone needs an example for a simpler scenario. To put the toolbar somewhere else one can use something like:

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

Perhaps for someone this comes in handy.

Answer 3

To expound on Simeon's answer:

You can add a unique class or ID to a container around each text-angular editor thus restricting the rules only to that editor. For example:

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

Or if you are using SASS or SCSS you can simplify it as:

.editor1, .editor2
  .ta-toolbar
    display: none
    &.focused
      display: block