How to Dynamically Adjust iframe Height to Match Content in Daum Editor

When working with Daum Editor, I ran into a common issue:
The editor height is fixed when it loads, but if the content inside grows taller, a scrollbar appears inside the editor—and it just doesn’t look right.

What I wanted was simple:
🔄 Automatically resize the editor height to match the height of the content inside.

The Problem

In the DOM structure, Daum Editor creates an iframe where your actual content lives.

<div id="tx_canvas_wysiwyg_holder">
  <iframe id="tx_canvas_wysiwyg" ...></iframe>
</div>

By default, you can manually set the height like this:

Editor.getCanvas().setCanvasSize({ height: '700px' });

But if the actual content height exceeds 700px, a scrollbar appears inside the iframe—and that’s not what we want.

I first thought: “Can I calculate the height with PHP and pass it to the page?”
Turns out, you can’t measure the actual content height from the server side (PHP), because the browser hasn’t rendered it yet.

Inspecting the DOM with Chrome DevTools

Press F12 in Chrome to open DevTools.
You’ll find that tx_canvas_wysiwyg iframe contains the entire editor content.

Trying this won’t help:

alert($("#tx_canvas_wysiwyg").height()); // Returns fixed 700

It only returns the assigned height, not the actual inner content height.

The Solution: Access the iframe’s inner document

Here’s how you can get the real content height inside the iframe:

var editorHeight = document.getElementById("tx_canvas_wysiwyg")
                   .contentWindow.document.body.offsetHeight;

And now, update the editor’s height dynamically:

$("#tx_canvas_wysiwyg").height(editorHeight);

This resizes the iframe based on its inner content—no more scrollbars!

IE8 Compatibility Note

In older browsers like Internet Explorer 8, offsetHeight may not give the correct value.

Use scrollHeight instead:

var editorHeight = document.getElementById("tx_canvas_wysiwyg")
                   .contentWindow.document.body.scrollHeight;

To be safe, you might do:

var doc = document.getElementById("tx_canvas_wysiwyg").contentWindow.document;
var editorHeight = doc.body.offsetHeight || doc.body.scrollHeight;

Final Thoughts

Dynamically adjusting iframe height—especially in WYSIWYG editors—is a small but essential UX improvement.

Here’s a recap:

Set a default height on editor load
After content is loaded, calculate the iframe body height
Apply it using JavaScript to avoid scrollbars

This simple trick makes your Daum Editor feel more natural and seamless.
No more awkward scrollbars cramping your content. 🙌