определение высоты и ширины содержимого после редактирования с помощью nicedit

Question

У меня есть div, который можно изменять и перетаскивать через jquery.

Он также доступен для редактирования с помощью niceedit.

Проблема у меня есть, когда я добавляю больше текста в div, пока в editmode 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 :) 
} 

Вы создаете и вызываете эту функцию, отправляя идентификатор или элемент, который вы хотите получить ширину/высоту. Функция сделана так, чтобы она сначала проверила, присутствует ли идентификатор, если он не возвращает 0. Если это так, он возвращает внутреннюю ширину/высоту. Если вы на 100% уверены, что идентификатор, который вы запрашиваете, присутствует, вам нужна только последняя строка функции.

Вы можете использовать его так:

var h = getHeight("draggable"); 

Это вернет высоту перетаскиваемом DIV и сохранить его в переменной ч.

Надеется, что это полезно :)

Answer 2

использовать событие остановки для перезначительного виджета, чтобы получить высоту - проблема у вас есть текст не завернутая в другом элементе, если вы оберните текст в другом элементе вы можете цель элемента, если не здесь своего рода hackey решения также вы можете использовать это для 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/ 

UPDATE Я обновил свою скрипку, чтобы добавить дополнительный р элемент там и установить его на минимальной высоте р вы могли бы таким образом лучше

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

Answer 3

Мой предыдущий ответ может только принять вас, насколько как НАЙТИ высоту/ширину, но на самом деле это не ИЗМЕНИТЬ высоту/ширину самого div.

Итак, после того, как ширина/высота найдена с использованием моего предыдущего ответа, вот как изменить ширину/высоту рассматриваемого div.

Допустим, что ваш идентификатор div «перетаскиваемый», а ваш идентификатор p - «текст». Когда вы закончите редактирование текста, вы можете обновить ширину и высоту, вызвав функцию (определенную ниже).

resize("draggable", "text"); 

Вы можете имитировать стили CSS в JavaScript следующим образом:

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 быть равна высоте и ширине текста области. Делая так, вы можете изменить высоту и ширину любого идентификатора, соответствующего любому другому проекту. getWidth() и getHeight() - ссылка на мой предыдущий пост.

Комбинация моих 2 ответов должна быть в состоянии выполнить то, что вы ищете. Я прошу прощения за то, что не дал правильного ответа в первый раз, но я все еще новичок и в программировании, и на этом сайте. Я постараюсь сделать лучше в будущем. Я надеюсь, что на этот раз вам удастся получить и установить размеры вашего div.

--EDIT--

код из моего предыдущего поста:

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

- КОНЕЦ EDIT--

• Molle