jquery - 可调整大小的内容可使用外部句柄编辑

Question

我有一个可编辑的文本块，我希望它可以调整大小。如果我在其中放置句柄，除了该元素是可编辑的并且用户可以在编辑它时删除句柄之外，一切都很完美：

<div id="drag-area">
    <div id="text-block" class="lighter-heading hidden text-block">
        <div class="editable-text" contenteditable>
            Editable block
           <div class="ui-resizable-handle ui-resizable-nw nw handle"></div>
           <div class="ui-resizable-handle ui-resizable-ne ne handle"></div>
           <div class="ui-resizable-handle ui-resizable-sw sw handle"></div>
           <div class="ui-resizable-handle ui-resizable-se se handle"></div>
        </div>  
    </div>
</div>

http://jsfiddle.net/3Ve4U/154/

如果我尝试在父 div 中放置句柄，则元素根本不会调整大小：

<div id="drag-area">
    <div id="text-block" class="lighter-heading hidden text-block">
        <div class="editable-text" contenteditable>
            Editable block
        </div>  
        <div class="ui-resizable-handle ui-resizable-nw nw handle"></div>
        <div class="ui-resizable-handle ui-resizable-ne ne handle"></div>
        <div class="ui-resizable-handle ui-resizable-sw sw handle"></div>
        <div class="ui-resizable-handle ui-resizable-se se handle"></div>
    </div>
</div>

http://jsfiddle.net/3Ve4U/155/

有什么建议么？

Answer 1

尝试改变：

   .editable-text {
    min-width: 50px;
    max-width:400px;
    min-height: 18px;
    position: absolute;    
}

检查它：http: //jsfiddle.net/3Ve4U/157/