Как избежать автоматического скрытия встроенной панели инструментов в tinymce?

Question

Мне нужно закрепить панель инструментов внизу редактора, поэтому я использую встроенную панель инструментов, предоставляя ей элемент div, которым я могу управлять.Проблема в том, что когда редактор не сфокусирован, панель автоматически скрывается, и я не хочу этого поведения.

Я использовал трюк, чтобы он работал прилично до сих пор:

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

Проблема в том, что теперь у меня будет несколько редакторов на странице, и когда я фокусирую один, другой теряет фокус, поэтому панель инструментов исчезает.

Как мне решить эту проблему?

Вот примерс двумя редакторами:

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

С одним работает (не скрывает панель инструментов):

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

Answer 1

Я нашел решение, которое работает с использованием наблюдателей мутаций:

В конфигурации:

      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());
      },

В основном мы слушаем, когда элемент скрыт, и мгновенно сбрасываем свойство display наblock.

Answer 2

То, что вы описываете, так это то, как встроенный режим предназначен для работы - только один редактор фокусируется одновременно, поэтому когда-либо вызывался только один «экземпляр» TinyMCE.Невозможно использовать Inline, пока панель инструментов остается для всех экземпляров - если вы хотите, просто перейдите в стандартный режим для TinyMCE.