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

Question

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

According to the TinyMCE docs, the height property of the editor：

  

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

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

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

我的DOM结构如下所示：

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

textArea div可以最大化也可以不是。

未最大化：

最大化：

当没有最大化时，我可以在Chrome DevTools中看到“#outer”的“clientHeight”属性+“。mce-toolbar-grp.mce-container.mce-panel.mce-stack-layout-item.mce-first “是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完全相同。在观看内部调整大小以查看我的意思之后，取消注释该部分与编辑器初始化。

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

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; 
}

你有没有尝试过？