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

angularjs, javascript

Solution

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:

- Watch for a focus on any of the editors.

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

Problem

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: How do I show the toolbar when any of the editor is in focus? How do I move the toolbar on top of the editor in focus?

Original source