如何避免内联工具栏自动隐藏在tinymce中？答案

【问题标题】：How to avoid inline toolbar auto hide in tinymce?如何避免内联工具栏自动隐藏在tinymce中？
【发布时间】：2018-10-15 16:35:35
【问题描述】：

我需要将工具栏锚定在编辑器的底部，因此我使用内联工具栏为其提供了一个我可以控制的 div。问题是当编辑器没有聚焦时，栏会自动隐藏，我不希望这种行为。

我使用了一个技巧，它直到现在都很好用：

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

问题是现在我将在页面上有多个编辑器，当我关注一个时，另一个失去焦点，因此工具栏消失了。

我该如何解决这个问题？

这是一个有 2 个编辑器的示例：

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

一个就可以了（不隐藏工具栏）：

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

【问题讨论】：

标签： tinymce tinymce-4

【解决方案1】：

您所描述的是内联模式的设计方式 - 一次只有一个编辑器具有焦点，因此只有一个 TinyMCE 的“实例”被调用。当工具栏为所有实例保留时，没有办法有内联 - 如果你想要它，只需使用 TinyMCE 的标准模式。

【讨论】：

感谢您的回答，这正是我所担心的。有没有办法使用标准模式，将侧边栏锚定在编辑器底部？
TinyMCE 没有将工具栏放在编辑器底部的配置选项。如果您搜索 Stack，您会发现人们通过 CSS 或 JavaScript 完成的各种方式。 TinyMCE 确实有一种方法可以将工具栏附加到特定的 DOM 元素，因此如果每个编辑器下都有一个工具栏，则可以使用该配置选项：tiny.cloud/docs/configure/editor-appearance/…
你建议的选项就是我正在做的事情。你需要使用内联模式来利用该功能，所以问题的主要问题仍然存在......

【解决方案2】：

我找到了一个有效的解决方案，利用了变异观察者：

在配置中：

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

基本上我们会在元素被隐藏时监听并立即将显示属性重置为block。

【讨论】：