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

问题描述：

编辑：我现在已经包括一个工作jsfiddle - 请转到帖子的底部。TinyMCE编辑器工具栏高度不正确？

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” +“.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：https://jsfiddle.net/80351/6o9j75d1/2/
在上述的jsfiddle例如，我想TinyMCE的编辑器的高度调整是完全相同的总高度作为内的div。观看内部大小调整后，取消注释带有编辑器初始化的部分，以查看我的意思。

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

请提供一个工作[jsfiddle]（http://jsfiddle.net） – Dekel

我刚刚编辑我的帖子与我的jsfiddle的解释。 – user5508297

jsfiddle没有任何tinymce实例 – Dekel

答

而不是试图计算飞行高度，你会反对让它不使用多个工具栏调整大小？因此，而不是你的当前工具栏的属性，那就是：

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

感谢您的回复。对我的问题最方便的解决方案是获取工具栏的高度。从理论上讲，这应该不难...！ “Eddimull – user5508297

”应该不难“，改变TinyMCE并不完全适合在同一句话中，哈哈！让我看看我能不能找出一些东西。 – Eddimull

不幸的是，我认为你可能是对的！非常好，谢谢@Eddimull让我知道如果你想出来的东西 – user5508297

答

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

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

你已经试过了吗？

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

相关推荐