CODEWITHSUNDEEP
javascripttinymcewysiwygtinymce-4rich-text-editor
user5508297
user5508297

Reputation: 885

TinyMCE editor toolbar height is incorrect?

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.

Upvotes: 1

Views: 1410

Answers (2)

Eddimull
Eddimull

Reputation: 342

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  

Upvotes: 1

Gilberto Olimpio
Gilberto Olimpio

Reputation: 681

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?

Upvotes: 0

Related Questions