實現可以直接粘QQ貼截圖的bug管理功能

對於一個功能強大的協作平台來說，todo管理和bug管理是必不可少的功能。Todo和bug往往不是通過一些簡單的文字就能實現的，有時候需要配以圖片的說名，之前用過的專案管理平台都是以附件的形式上傳圖片和其他資源，使用起來非常的不方便。

很多時候我都是用qq群或者word來管理圖文的todo和bug。但是這樣又脫離了專案管理工具本身的功能體系。於是我們就打算在我們的協作平台上實現可直接粘貼圖片的todo和bug管理功能，再配上qq的案頭功能，想象就讓人用著舒暢。

經過研究發現HTML5的元素有contenteditable的屬性，添加了這個屬性之後html元素的內容就可以變為可編輯狀態了。大部分的文字編輯器也是基於這個功能實現的。

把原有的textarea改為contenteditable的div，通過qq後直接ctrl+c粘貼到文字框裡，的確可以正常的粘貼上。有時候圖片比較大，會超出文字框的大小，這個也好處理，在文字框的上一層加一個：

.editdiv img{max-height:100px;max-width:100px;}

這樣你粘貼的圖片就像一個縮圖一樣被乖乖放在文字框裡了。

通過查看頁面結構發現，圖片資料以dataurl的格式存在img元素中。只要通過innerHTML擷取到內容，儲存到資料庫裡就可以了，好在後台使用的mongodb資料庫，對儲存大的資料對象還是比較有自信。

不過還要注意兩個問題：儲存前要對內容進行過濾處理，避免儲存站外圖片連結或者攻擊性的指令碼。為了避免資料提交過程中的資料丟失，提交前需要對資料做encodeURIComponent編碼。

圖片顯示的過程就是把資料庫裡儲存的資料在插入到你的頁面元素中，比較簡單就不再贅述。

本執行個體已經發布在最新版本的牧客網協作平台上面了，歡迎體驗，歡迎提出更多的關於線上協作的平台的改進建議。