如何确定 HTML 用户输入的高度和宽度并告诉 gridster 相应地适应？

Question

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

一旦用户使用 CKEditor 保存了他们的内容，该内容就会被放入小部件中。然而，小部件不会自动调整自己的大小以适应内容，虽然用户可以自己调整大小，但如果用户群在他们按下保存时为他们完成它会更方便。

我尝试了一些方法，但 none 无济于事。我无法获取当前内容的大小，然后分别调整 gridster 的大小。

在我的代码中，我有两个值可以使用。 gridster 元素 (widget)，以及将放入其中的值 (contents)。我必须确定 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 class 的（相关位）处理保存和调整大小：

// 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/

Answer 2

我遇到了同样的挑战，即出现在新图块内的动态内容导致溢出并出现在图块边界之外。我们结合 Zartus 代码使用了磁贴内容的“.scrollHeight”：

var contentHeight = $widgit.firstChild.scrollHeight;
var tileHeight = $widgit.firstChild.clientHeight;

如何确定 HTML 用户输入的高度和宽度并告诉 gridster 相应地适应？

How to determine the height and width of HTML user input and tell gridster to fit accordingly?

javascript

jquery

gridster