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

Question

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

我用了一个技巧，到现在为止效果还不错：

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

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

我该如何解决这个问题？

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

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

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

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

Answer 1

您所描述的是内联模式是如何设计的 - 一次只有一个编辑器具有焦点，因此只有一个 "instance" 的 TinyMCE 被调用过。在所有实例的工具栏都保留的情况下，无法使用 Inline - 如果您希望使用 TinyMCE 的标准模式。

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

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

How to avoid inline toolbar auto hide in tinymce?

tinymce

tinymce-4