jquery-ui-resizable - 如何根据内容高度自动调整 JHTML 文本区域的大小

Question

默认情况下，所有文本区域在主 css 文件中都有一个固定的高度。我创建了一个 jHTMLArea 控件，当用户提供一个巨大的值时，我们需要通过调整 JHTML iframe 的大小来显示整个内容。目前下面的代码为用户提供了选项调整大小和查看数据，但我希望整个 jHTMLtext 区域根据内容高度自动调整大小。请帮忙。

  $(document).ready(function () {
         $(".txtContentDesc").htmlarea({
             loaded: function () {
                 this.iframe[0].contentWindow.focus(); 
                 var elemId = $(this.textarea).attr("id");        

                 $(this.editor).blur(function (event) {
                     return captureJHtmlContentTextareaonchange(elemId);
                 });

             }            
         }).parent().resizable({ alsoResize: $('.jHtmlArea ').find('iframe') });
     });

Answer 1

在这里，我在 iframe 中获取内容的高度并在加载 jHTMLArea 时对其进行更新。

  $(".txtContentDesc").htmlarea({

        loaded: function () {

            var elemId = $(this.textarea).attr("id");              
            var height = $("#" + elemId + "").prev().find('iframe').contents().height();
            $("#" + elemId + "").prev().css("height", height + "px");            
            $("#" + elemId + "").prev().find('iframe').css("height", height + "px");
            $("#" + elemId + "").prev().find('iframe').height(height);
            $(this.editor).mouseleave(function (event) {
                return captureJHtmlContentTextareaonchange(elemId);
            })

        }
    });