How to avoid inline toolbar auto hide in tinymce?

Question

I need to anchor the toolbar at the bottom of the editor, so I am using the inline toolbar giving to it a div that I can control. The problem is that when the editor is not focused the bar auto hides, and I don't want this behavior.

I used a trick that it worked decently until now:

editor.on("blur", function() { return false; });

The problem is that now I will have multiple editors on the page and when I focus one the other lose the focus so the toolbar disappears.

How can I solve this?

Here is an example with 2 editors:

http://fiddle.tinymce.com/PDdaab/4

With one it works (does not hide the toolbar):

http://fiddle.tinymce.com/PDdaab/5

Answer 1

What you are describing is how Inline mode is designed to work - only one editor has focus at one time so there is only one "instance" of TinyMCE ever invoked. There is no way to have Inline while the toolbar stays for all instances - if you want that just go with the standard mode for TinyMCE.

Answer 2

I found a solution that works, taking advantage of mutation observers:

In the config:

      init_instance_callback: editor => {
        // listen for toolbar element mutation
        const wantedValue =
          "border-width: 1px; left: 0px; top: 0px; width: 440px; height: 30px;";
        let tbMutationObs = new MutationObserver(function(mutations) {
          mutations.forEach(function(m) {
            if (
              m.type === "attributes" &&
              m.attributeName === "style" &&
              m.oldValue === wantedValue
            ) {
              // toolbar has been hidden
              // remove display none to show it again
              m.target.style.display = "block";
            }
          });
        });

        // get the toolbar element, in my case, having multiple editor I scope them with toolbarId variable that I have in the global scope
        let s = `#${toolbarId} .mce-tinymce.mce-tinymce-inline.mce-container.mce-panel`;
        tbMutationObs.observe(document.querySelector(s), {
          attributes: true,
          attributeOldValue: true
        });

        editor.on("Remove", () => tbMutationObs.disconnect());
      },

Basically we listen when the element is hidden and instantly reset the display property to block.