1.首先我要說明一下為什么要寫這個博客,因為公司最近需要一個自定義的編輯器,苦於沒有思路在網上找了好久,看到了好多android實現的編輯器(其實也就那么幾個並不多),公司需求和網頁端同步共享創建的文檔,需要用到html保存數據,然后我就被迫開始了編輯器之旅,這東西我覺得最大的難點就是要手機和網頁端保持一致,手機並沒有那么自由統一起來還是非常困難的,接下來我就說說我遇到的一些問題.
問題一 : 我要實現這個樣子
紅框的地方就是要實現的地方 這里是這樣的:
<div id="editor" contentEditable="true"> adfadf <span class="divcss5" >此DIV盒子左側為1px實線藍邊框</span> adfadf </div>
我這里用div紅框模擬一下如下圖:
然后問題就出來了,此時我們的目的是如果現在光標在上圖的紅色方框后面的話按下退格鍵需要刪除整個div 而現在點擊退格鍵刪除的不是整個div而是div中的內容,這里我們想要的效果是刪除紅色的框子div,但現在如下圖:
現在就比較尷尬了。
解決方法:
其實也很簡單就是 把 contenteditable="true"屬性從div上拿掉移到body上 如果你想刪的div不想像上圖一樣的話就在那個div上添加 contenteditable="false" 就行了
<!DOCTYPE HTML> <html> <body contenteditable="true"> <div> 調調 <div contenteditable="false"> 呵呵呵 </div> 這是一段可編輯的段落。請試着編輯該文本。 </div> </body> </html>