对于一个功能强大的协作平台来说，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编码。

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

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

实现可以直接粘QQ贴截图的bug管理功能