javascript - 如何确定 HTML 用户输入的高度和宽度并告诉 gridster 进行相应的调整？

Question

我目前正在将 Gridster.js ( http://gridster.net/ ) 与 CKEditor 结合使用。

一旦用户使用 CKEditor 保存内容，该内容就会被放入小部件中。然而，小部件不会自动调整自身大小以适应内容，虽然用户可以自己调整其大小，但对于用户群来说，在按下“保存”时立即为他们完成调整会更方便。

我尝试了一些方法，但没有任何效果。我无法获取当前内容的大小，然后分别调整网格大小。

在我的代码中，我有两个值需要使用。 gridster 元素 (widget) 以及将放入其中的值 (contents)。我必须确定内容的高度。一旦成功完成，我将能够确定获取 x 和 y 值的代码是否有效。

我当前的代码如下所示:

// Initialization of the gridster element.
// The base dimensions are relevant to understand how we 
// calculate the multipliers, later on.
gridster = $(".gridster > ul").gridster({
    widget_margins: [10, 10],
    widget_base_dimensions: [100, 50],
    draggable: {
        handle: 'header'
    },
    resize: {
        enabled: true,
        max_size: [20, 10],
        min_size: [2, 1]
    }
}).data('gridster');

以及处理保存和调整大小的 JavaScript 类(的相关部分):

// Saves the content from CKEditor to the gridster widget
this.save = function (data) {
    var lastContents = this.default_html + data + '</div>';

    $(this.editor).removeClass('gs-w-new');
    this.resize_widget(this.editor, lastContents);
    $(this.editor).html(lastContents);
    this.modal.modal('hide');
};

/* @TODO: resize_widget function */
// if the new content from ckeditor is larger than the 
// original size of the widget, we need to make it larger.
this.resize_widget = function(widgetId, contents) {

    var element = $('<div>')
        .addClass('fake-div-gs-w-resize')
        /*
        .fake-div-gs-w-resize {
            position: absolute;
            display: none;
            height: auto;
            width: auto;
            white-space: nowrap;
        }
        */
        .css('display', 'block')
        .html(contents);

    var widget = $(widgetId);

    var elementWidth = $(element).width(), // I am expecting this to return the width of the content, but it returns 0.
        elementHeight = $(element).height(), // As you might imagine, this also returns 0.
        width = widget.width(),
        height = widget.height();

    $(element).css('display', 'none');

    console.log(widgetId, widget, width, height, elementWidth, elementHeight);

    // this code never gets past here, because element{Height,Width} returns 0.
    if (elementHeight > height || elementWidth > width) {

        var width_multiplier = 100, // data-x = 1 === width_multiplier px
            height_multiplier = 50; // from "widget_base_dimensions: [100, 50],"

        var x = Math.round(width / width_multiplier),
            y = Math.round(height / height_multiplier),
            eX = Math.ceil(elementWidth / width_multiplier),
            eY = Math.ceil(elementHeight / height_multiplier);

        console.log("setting to x:" + eX + ", y:" + eY + " with width:" + width + ", height:" + height);

        if (eX >= x && eY >= y)
            gridster.resize_widget(widget, eX, eY);
    }

};

虽然我对确定尺寸的逻辑并不完全有信心；这个问题的主要焦点是确定 HTML 内容的大小，因为我从其他 SO 帖子中收集的内容似乎对我的情况没有帮助。

Answer 1

您需要实际将元素添加到 DOM 中，width() 和 height() 函数才能工作。在您的示例中，该元素未添加到文档中。

请参阅此 JS Fiddle 示例 https://jsfiddle.net/y1yf1zzp/10/