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

Question

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

它也可以使用nicedit进行编辑。

我遇到的问题是，当我在编辑模式下向div添加更多文本时，div无法扩展以容纳文本，并且文本溢出div。

有人知道我如何从更新的内容中更新div的高度和宽度吗？

你可以在这个例子中看到，如果你开始添加文本，框不会展开：

http://jsfiddle.net/j6FLa/20/

匹配jsfiddle 的代码

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

Answer 1

我仍然不擅长编程，所以可能会有更好的解决方案。但我可以向你展示我对类似问题所做的处理。但不确定这是否是你所需要的。

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");

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

希望它有用：）

Answer 2

我之前的答案只能让你找到高度/宽度，但实际上它不会改变div本身的高度/宽度。

因此，在使用我之前的答案找到width/height之后，下面是如何更改有问题的div的width/high。

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

resize("draggable", "text"); 

你可以在javascript中模仿CSS样式，比如：

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（）是对我上一篇文章的引用。

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

--编辑--

来自我上一篇文章的代码：

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;
}

--结束编辑--

• Molle

Answer 3

使用可调整大小的小部件的停止事件来获取高度-问题是文本没有被包装在另一个元素中。如果你将文本包装在另个元素中，你可以针对该元素，如果没有，这是一个很好的解决方案也可以将其用于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的最小高度，你可能会喜欢这种方式更好的

http://jsfiddle.net/j6FLa/28/

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>

js

$(function () {
    $("#draggable").draggable().resizable({stop: function( event, ui ) {
        var pHeight = $(this).children('p').height();
        $(this).css('min-height', pHeight);
        }
     });
    $("#draggable").on( "dragstop", function( event, ui ) {alert('yes');} );
});