TinyMCEエディタのツールバーの高さが間違っていますか？

Question

編集：私は今、仕事のjsfiddleを含めました - 投稿の下部に行ってください。

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

だけで編集可能な領域の高さを設定します。メニューバー、ツールバー、またはステータスバーに必要な領域は、 には含まれません。

私のエディタにはツールバーしかありません。私は現在、エディタ全体の正確な高さを設定できるようにツールバーの高さを導出しようとしています。

私の問題は、私は、エディタのツールバーの高さを導出しようとすると、それは間違っていることです：

私のDOM構造は次のようになります。テキストエリアのdivが最大化できるか否かのいずれか

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

。

最大化されていない： 最大化

：

最大化されていない場合は、私は "#outer" + ".mce-ツールバーのclientHeightプロパティことクロームデベロッパーツールで見ることができます-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：上記Jsfiddle例でhttps://jsfiddle.net/80351/6o9j75d1/2/
、私は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; 
} 

あなたはすでにそれを試みたことがありますか？