Javascript 使用nicedit编辑后查找内容的高度和宽度

我有一个可以通过jquery调整大小和拖动的div

它也可以使用niceedit进行编辑

我遇到的问题是，当我在编辑模式下向div添加更多文本时，div不会扩展以适应文本，而文本会溢出div

有人知道如何根据更新的内容更新div的高度和宽度吗

在本例中，您可以看到，如果开始添加文本，则框不会展开：

匹配JSFIDLE的代码

.dragbox {
position:absolute;
width:10px;
height:25px;
padding: 0.0em;
margin:25px;
cursor:move;
z-index:2
}

#draggable {
min-width:150px;
min-height:150px;
height:auto;
width:auto;
border:1px solid #ff0000;
padding:25px;
}



//<![CDATA[
bkLib.onDomLoaded(function () {
    var myNicEditor = new nicEditor();
    myNicEditor.setPanel('myNicPanel');
    myNicEditor.addInstance('draggable');
});
//]]>


$("div.dragbox").dblclick(function (e) {
    $('.dragbox').css('cursor', 'select');
    $(this).draggable('disable').removeClass('ui-state-disabled').focus();
    }).on('blur', function () {
    $(this).draggable('enable');
});

$(function () {
    $("#draggable").draggable().resizable();
});


<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" contenteditable="true" style="">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor</div>

.dragbox{
位置：绝对位置；
宽度：10px；
高度：25px；
填充：0.0em；
利润率：25px；
光标：移动；
z指数：2
}
#拖拉的{
最小宽度：150px；
最小高度：150px；
高度：自动；
宽度：自动；
边框：1px实心#ff0000；
填充：25px；
}
//
$（“div.dragbox”）.dblclick（函数（e）{
$（'.dragbox'）.css（'cursor'，'select'）；
$（this）.draggable（'disable'）.removeClass（'ui-state-disabled'）.focus（）；
}).on（'blur'，函数（）{
$（this）.draggable（'enable'）；
});
$（函数（）{
$（“#可拖动”）.draggable（）.resizeable（）；
});
Lorem ipsum dolor sit amet，是一位杰出的领导者。塞德麦格纳多洛酒店

我还是个编程高手，所以可能会有更好的解决方案。但我可以向你展示我对类似问题所做的工作。不确定这是否是你需要的

function getHeight(id)
{
    if(document.getElementById(id) == null)
        return Number(0);
    else
    return document.getElementById(id).offsetHeight; // Change to .offsetWidth to gain width :)
}

通过将ID发送到要获取宽度/高度的元素，可以创建并调用此函数。该函数的作用是首先检查ID是否存在，如果不存在，则返回0。如果是，则返回内部宽度/高度。如果您100%确定您请求的ID存在，则只需要函数的最后一行

你可以这样使用它：

var h = getHeight("draggable");

function resize(id1, id2)
{
    var divName = document.getElementById(id1);
    divName.style.position = absolute;
    divName.style.width = getWidth(id2)+"px"; // remember the +"px"!!
    divName.style.height = getHeight(id2)+"px";
}

这将返回可拖动div的高度，并将其存储在变量h中

---

希望它有用：）

使用可调整大小的小部件的停止事件来获取高度-问题是文本没有包装在另一个元素中如果您将文本包装在另一个元素中，您可以将该元素作为目标，如果不是，这是一种黑客解决方案 您也可以将其用于css

#draggable {word-wrap:break-word;}

在js中使用类似的内容

$("#draggable").draggable().resizable({stop: function( event, ui ) {
        var tempHeight = $(this).css({"height" : "auto"}).height();
        $(this).css({"height" : "0px"}).animate({
        height : tempHeight
        },1000);
        }
     });

http://jsfiddle.net/j6FLa/26/

更新 我已经更新了我的小提琴，在其中添加了一个额外的p元素，并将其设置为p的最小高度，您可能更喜欢这种方式

html

<div id="myNicPanel" style="width: 525px;"></div>
<div id="draggable" class="dragbox" contenteditable="true" style=""><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed magna dolor asdfa asdfasdf asdf</p></div>

---

我之前的回答只能帮助您找到高度/宽度，但实际上并不会改变div本身的高度/宽度

因此，在使用我前面的答案找到宽度/高度后，下面是如何更改所讨论div的宽度/高度

假设您的div ID是“draggable”，而p ID是“text”。编辑完文本后，可以通过调用函数（定义如下）来更新宽度和高度

您可以在javascript中模仿CSS样式，如下所示：

var h = getHeight("draggable");

function resize(id1, id2)
{
    var divName = document.getElementById(id1);
    divName.style.position = absolute;
    divName.style.width = getWidth(id2)+"px"; // remember the +"px"!!
    divName.style.height = getHeight(id2)+"px";
}

这将设置div的高度和宽度等于文本区域的高度和宽度。通过这样做，您可以根据项目中的任何其他ID更改任何给定ID的高度和宽度。getWidth（）和getHeight（）引用了我以前的文章

我的两个答案的组合应该能够完成你想要的。我很抱歉第一次没有给出一个正确的答案，但我对编程和这个网站都是新手。我将来会努力做得更好。我希望这次你能成功地获取和设置你的div的大小

--编辑--

我上一篇文章的代码：

function getHeight(id)
{
    if(document.getElementById(id) == null) //simply a guard that returns 0 if a wrong ID is stated. In reality the return statement is enough.
        return Number(0);
    else
    return document.getElementById(id).offsetHeight; // Change to .offsetWidth to gain width :)
}

function getWidth(id)
{
    return document.getElementById(id).offsetWidth;
}

--结束编辑--

• 莫勒

---

您好，感谢您的尝试，但这只是返回内容div的高度，而不是div内的文本。然后尝试的ID，如果有，如果没有，请尝试在周围放置

…

（或span？？）。该函数应返回ID的高度/宽度。很抱歉，我不希望调整大小后div的高度/宽度，我希望在我完成键入后文本的高度/宽度，以便我可以调整div的大小，使其大于文本。如果您遵循链接，这正是我所做的