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