TinyMCE editor toolbar height is incorrect?

Question

EDIT: I've now included a working jsfiddle - please go to the bottom of the post.

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

sets the height of the editable area only. It does not include the space required for the menubar, toolbars or status bar.

My editor only has a toolbar and I'm currently trying to derive the toolbar height so that I can set an accurate height for the whole editor.

My problem is that when I try to derive the editor toolbar height it is incorrect:

My DOM structure looks like this:

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

The textArea div can either be maximized or not.

Not maximized:

Maximized:

When not maximized, I can see in Chrome DevTools that the clientHeight property of "#outer" + " .mce-toolbar-grp.mce-container.mce-panel.mce-stack-layout-item.mce-first" is 64, and 34 if maximized.

Yet, when I try to get this value via code in my editor's setup callback it always comes out as 326.

What's going on?

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/
In the Jsfiddle example above, I want the TinyMCE editor to resize in height to be the exact same overall height as the inner div. Uncomment the section with the editor initialisation after watching the inner resizing to see what I mean by that.

Although I use editor.theme.resizeTo(getInnerWidth(), getInnerHeight()); every time the outer div changes height, the resized height is mostly incorrect.

I've just edited my post with an explanation of my jsfiddle. — user5508297, Jul 25 '16 at 02:14
@Dekel please read my explanation above - uncomment the relevant section to see the tinymce instance at work. — user5508297, Jul 25 '16 at 02:20
@Dekel Let me know if there are any problems with it - perhaps I haven't properly included the TinyMCE files (I'm new to jsfiddle so it's certainly possible!). — user5508297, Jul 25 '16 at 02:26

score 1 · Answer 1 · edited Jun 05 '20 at 20:53

1

Rather than trying to calculate the height on the fly, would you be opposed to having it not resize using multiple toolbars? So instead of your current toolbar attribute, it would be:

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

edited Jun 05 '20 at 20:53

user8555937

2,161
1
14
39

answered Jul 24 '16 at 16:19

Eddimull

342
1
8

Thanks for your reply. The most convenient solution to my problem would be to derive the height of the toolbar on the fly. In theory, it shouldn't be difficult...! @Eddimull – user5508297 Jul 24 '16 at 16:26
"shouldn't be difficult" and altering TinyMCE doesn't exactly fit well in the same sentence, haha! Let me see if I can figure something out. – Eddimull Jul 24 '16 at 16:27
Unfortunately, I think you might be right about that! Excellent, thanks @Eddimull let me know if you figure something out – user5508297 Jul 24 '16 at 16:29
Looks like someone came up with a solution for this already. http://stackoverflow.com/a/25206824/6630080 – Eddimull Jul 24 '16 at 16:59
I've read that thread already and this one (http://stackoverflow.com/questions/9588025/change-tinymce-editors-height-dynamically?noredirect=1&lq=1) but unfortunately those responses don't answer the question I've asked. – user5508297 Jul 24 '16 at 17:01
I've just updated my post with a working jsfiddle. It should hopefully make it clearer what problem I'm having. @Eddimull – user5508297 Jul 25 '16 at 02:21

score 0 · Answer 2 · answered Aug 24 '17 at 00:10

I've needed to implement something similar before. For me, the following code worked:

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

Have you tried it already?

TinyMCE editor toolbar height is incorrect?

2 Answers2