Question

我需要将工具栏锚定在编辑器的底部，因此我正在使用嵌入式工具栏，给它一个可以控制的div。问题在于，当编辑器没有集中精力时，栏会自动隐藏，而我不希望出现这种情况。

直到现在，我一直在使用它的技巧：

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

问题在于，现在我将在页面上拥有多个编辑器，当我一个人集中精力时，另一个人失去了焦点，因此工具栏消失了。

我该如何解决？

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

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

使用其中一项即可工作（不会隐藏工具栏）：

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

Answer 1

您要描述的是Inline模式是如何工作的-一次只有一个编辑器具有焦点，因此，只有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());
      },

基本上，我们在隐藏元素时进行监听，并立即将display属性重置为block。

如何避免嵌入式工具栏自动隐藏在tinymce中？

2 个答案: