TinyMCE 编辑器工具栏高度不正确？

Question

编辑：我现在已经包含了一个有效的 jsfiddle - 请转到帖子的底部。

根据 TinyMCE 文档，编辑器的高度属性：

仅设置可编辑区域的高度。 它不包括菜单栏、工具栏或状态栏所需的空间。

我的编辑器只有一个工具栏，我目前正在尝试导出工具栏高度，以便我可以为整个编辑器设置准确的高度。

我的问题是，当我尝试导出编辑器工具栏高度时，它是不正确的：

我的 DOM 结构如下所示：

<div id = "outer">
   <div id = "textArea" + dynamically created unique editor id></div>
</div>

textArea div 可以最大化或不最大化。

未最大化：

最大化：

未最大化时，我可以在 Chrome DevTools 中看到“#outer”+“.mce-toolbar-grp.mce-container.mce-panel.mce-stack-layout-item.mce-first”的 clientHeight 属性为 64 ，如果最大化则为 34。

然而，当我尝试通过编辑器设置回调中的代码获取此值时，它总是显示为 326。

这是怎么回事？

tinymce.init({
   selector: "#textArea" + uniqueEditorId,
   menubar: false,
   statusbar: false,
   browser_spellcheck: true,
   contextmenu: false,
   plugins: "textcolor link",
   font_formats: "Sans Serif = arial, helvetica, sans-serif;Serif = times new roman, serif;Fixed Width = monospace;Wide = arial black, sans-serif;Narrow = arial narrow, sans-serif;Comic Sans MS = comic sans ms, sans-serif;Garamond = garamond, serif;Georgia = georgia, serif;Tahoma = tahoma, sans-serif;Trebuchet MS = trebuchet ms, sans-serif;Verdana = verdana, sans-serif",
   toolbar: "fontselect | fontsizeselect | bold italic underline | forecolor | numlist bullist | alignleft aligncenter alignright alignjustify | outdent indent | link unlink | undo redo",

   width: textArea.clientWidth, 
   // I want to figure this out dynamically, rather than hard-coding it.
   height: textArea.clientHeight - 64, 

   setup: function(editor) {
      editor.on("init", function() {
         var edToolbar = document.querySelector("#outer" + " .mce-toolbar-grp.mce-container.mce-panel.mce-stack-layout-item.mce-first");
         // Always 326
         console.log("edToolbar.clientHeight: " + edToolbar.clientHeight);
      });
   }
});

jsfiddle： https ://jsfiddle.net/80351/6o9j75d1/2/
在上面的 Jsfiddle 示例中，我希望 TinyMCE 编辑器将高度调整为与内部 div 完全相同的整体高度。 在观看内部调整大小以了解我的意思后，用编辑器初始化取消注释该部分。

虽然我使用editor.theme.resizeTo(getInnerWidth(), getInnerHeight()); 每次外部 div 更改高度时，调整后的高度大多不正确。

Answer 1

与其尝试动态计算高度，您是否会反对不使用多个工具栏调整其大小？ 因此，不是您当前的工具栏属性，而是：

toolbar: ["fontselect | fontsizeselect | bold italic underline | forecolor | numlist bullist", 
    "alignleft aligncenter alignright alignjustify | outdent indent | link unlink | undo redo"]

https://www.tinymce.com/docs/configure/editor-appearance/#usingmultipletoolbars

Answer 2

我以前需要实现类似的东西。 对我来说，以下代码有效：

function getInnerHeight() {
  var inner = document.querySelector("#inner");
  return inner.clientHeight - document.getElementsByClassName("mce-toolbar-grp")[0].offsetHeight; 
}

你已经试过了吗？