如何使兩個或更多的HTML元素表現爲一個單位，可編輯區域

Question

考慮你有一些內容有些CONTENTEDITABLE面積：

<div contenteditable="true"> 
    <p>first paragraph</p> 
    <p> 
     <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'> 
     <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'> 
    </p> 
    <p>second paragraph</p> 
</div> 

如果你開始由左/右箭頭鍵導航插入記號開始通過移動所有的孩子元素。請看這個gif animation

問題是如何使插入符號忽略子元素？或者換句話說：如何將兩幅圖像的行爲作爲一個單一的圖像？ jsfiddle

Answer 1

嘗試改變<p>含有兩個圖像以一個<div>與內容編輯截止。

<div contenteditable="false"> 
    <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'> 
    <img width='63' src='https://developer.cdn.mozilla.net/media/img/mdn-logo-sm.png'> 
</div> 

演示 - http://jsfiddle.net/tfdMt/