title: Resizable contenteditable with external handles
body: <p>I have an editable text block, which I wish to be resizable. If I place handles inside it, all works perfect except that element is editable and user can delete handles while editing it:</p>
  
  <pre><code>&lt;div id="drag-area"&gt;
      &lt;div id="text-block" class="lighter-heading hidden text-block"&gt;
          &lt;div class="editable-text" contenteditable&gt;
              Editable block
             &lt;div class="ui-resizable-handle ui-resizable-nw nw handle"&gt;&lt;/div&gt;
             &lt;div class="ui-resizable-handle ui-resizable-ne ne handle"&gt;&lt;/div&gt;
             &lt;div class="ui-resizable-handle ui-resizable-sw sw handle"&gt;&lt;/div&gt;
             &lt;div class="ui-resizable-handle ui-resizable-se se handle"&gt;&lt;/div&gt;
          &lt;/div&gt;  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3Ve4U/154/" rel="nofollow">http://jsfiddle.net/3Ve4U/154/</a></p>
  
  <p>If I try to place handles in the parent div, element doesn't become resizable at all:</p>
  
  <pre><code>&lt;div id="drag-area"&gt;
      &lt;div id="text-block" class="lighter-heading hidden text-block"&gt;
          &lt;div class="editable-text" contenteditable&gt;
              Editable block
          &lt;/div&gt;  
          &lt;div class="ui-resizable-handle ui-resizable-nw nw handle"&gt;&lt;/div&gt;
          &lt;div class="ui-resizable-handle ui-resizable-ne ne handle"&gt;&lt;/div&gt;
          &lt;div class="ui-resizable-handle ui-resizable-sw sw handle"&gt;&lt;/div&gt;
          &lt;div class="ui-resizable-handle ui-resizable-se se handle"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/3Ve4U/155/" rel="nofollow">http://jsfiddle.net/3Ve4U/155/</a></p>
  
  <p>Any suggestions?</p>