对于一个功能强大的协作平台来说，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编码。
　　图片显示的过程是把数据库里保存的数据在插入到你的页面元素中，比?简单不再赘述。
　　本实例已经公布在新版本号的牧客网协作平台上面了，欢迎体验，欢迎提出很多其它的关于在线协作的平台的改进建议。