Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
24497
How to change height of WebHtmlEditor on client
posted

Height should be applied to 2 elements: main TABLE and inner TD/IFRAME element.
The inner element is different for different browsers. For not IE that is IFRAME, and for IE that is TD in main table where editing area is rendered.
The height of inner element should be adjusted for heights of toolbar and footer. My sample assumes that height of toolbar-row is 25px and height of footer is also 25px. Those values can be slightly improved for actual offsetHeight, maybe by +/-1..3px.
The IFRAME should use px value for height, and TD should use % value for height.
In latest version of WebHtmleEditor that inner TD has id equals to (WebHtmlEditor.ClientID + ‘_td_’).
In older versions of WebHtmlEditor application should find reference to that TD. My sample covers both cases.
Those codes can be copied/pasted in any aspx. Application should only adjust value of ImageDirectory to actual location of images used by WebHtmlEditor.

<script type="text/javascript">
function changeHeight(height)
{
      // combined offsetHeights of toolbar and footer
      var tbHeight = 25 + 25 + 25 + 25, id = 'WebHtmlEditor1';
      // references to main TABLE and textWindow
      var editor = document.getElementById(id), textWindow = document.getElementById(id + '_tw');
      if(!textWindow)
            return;
      // overall height should be set tom main table
      editor.style.height = height + 'px';
      // for not IE browsers, height should be set in px
      if(textWindow.nodeName == 'IFRAME')
      {
            textWindow.style.height = (height - tbHeight) + 'px';
            return;
      }
      // reference to inner TD, which height defines height of editing area
      var td = document.getElementById(id + '_td_');
      // in older versions of WebHtmlEditor the _td_ identifier is not used, so,
      // application should find that TD: that is the parent of 2nd inner TABLE
      var tbls = 2, elem = textWindow, td = document.getElementById(id + '_td_');
      while(!td)
      {
            elem = elem.parentNode;
            if(tbls == 0)
                  td = elem;
            if(!elem || elem == editor)
                  return;
            if(elem.nodeName == 'TABLE')
                  tbls--;
      }
      // set height of TD
      td.style.height = (height - tbHeight) / height * 100 + '%';
}
</script>

<ighedit:WebHtmlEditor ID="WebHtmlEditor1" Height="300px" runat="server" ImageDirectory="images/htmleditor/">
</ighedit:WebHtmlEditor>

<input type="button" value="200" onclick="changeHeight(200)" />
<input type="button" value="400" onclick="changeHeight(400)" />
<input type="button" value="600" onclick="changeHeight(600)" />