实现能够直接粘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编码。

图片显示的过程就是把数据库里保存的数据在插入到你的页面元素中，比較简单就不再赘述。

本实例已经公布在最新版本号的牧客网协作平台上面了，欢迎体验，欢迎提出很多其它的关于在线协作的平台的改进建议。