Malte’s Blog

Für ein Projekt brauchte ich ein TinyMCE-Feature, welches die Höhe des Editors dynamisch an den enthaltenen Inhalt anpasst.

Nachdem ich im Internet nicht fündig wurde, hab ichs mir selbst geschrieben. Here it is! Am Code selbst müssen keine Anpassungen vorgenommen werden.

<script type="text/javascript">
var i,d,c=0;
function $(e) {    return document.getElementById(e); }
function getEditorHeight() {
  return parseInt($(tinyMCE.activeEditor.id+'_ifr').style.height);
}
function setEditorHeight(h) {
  $(tinyMCE.activeEditor.id+'_ifr').style.height = h+'px';
}

function createHiddenElement() {
  var elm = document.createElement('div');
  with (elm) {
    id='tmce_height';
    with (style) { position='absolute'; top='0'; visibility='hidden'; width='100%'; }
  }
  $(tinyMCE.activeEditor.id).parentNode.appendChild(elm);
}
function changeHeight() {
  c++;
  var old_h = getEditorHeight();
  if (c>=10) { c=0; window.clearInterval(i); }
  setEditorHeight(old_h+d/10);
}

function adjustEditorHeight() {
  if (!$('tmce_height')) { createHiddenElement(); }
  var old_h = getEditorHeight();
  $('tmce_height').innerHTML = tinyMCE.activeEditor.getContent();
  var new_h = $('tmce_height').clientHeight+80;
  window.clearInterval(i);
  i = window.setInterval("changeHeight()",10);
  d = new_h-old_h;
}
</script>

In den TinyMCE-Optionen folgendes hinzufügen:

tinyMCE.init({
...
init_instance_callback: "adjustEditorHeight",
onchange_callback: "adjustEditorHeight"
});