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"
});

Vor ein paar Tagen wurde ich auf das PHP-Framework CodeIgniter aufmerksam. Nachdem ich mir die Propaganda auf der Startseite und den Beginn der Dokumentation durchgelesen hatte, war ich überzeugt, dass CodeIgniter der richtige Ansatz für zukünftige kleinere Projekte ist. Die Seite wirbt u.a. mit guter Performance, Kompatibilität zu konventionellen Webspace’s, wenig Konfigurationsaufwand, keiner Kommandozeile, simplen Lösungen und guter Dokumentation. Auch die Screencasts waren interessant und so habe ich den Code heruntergeladen und das Ganze mal unter die Lupe genommen … Mehr…