調整大小contenteditable與外部手柄

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/