對於一個功能強大的協作平臺來說，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編碼。
圖片顯示的過程就是把數據庫裏保存的數據在插入到你的頁面元素中，比較簡單就不再贅述。
本實例已經發布在最新版本的牧客網協作平臺上面了，歡迎體驗，歡迎提出更多的關於在線協作的平臺的改進建議。