对于一个功能强大的协作平台来说,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管理功能的更多相关文章

  1. C# 实现QQ式截图功能

    这个功能一共有两部分组成,第一部分是窗体代码,另外的一部分是一个辅助方法.直接贴出代码,以供大家参考: using System; using System.Collections.Generic; ...

  2. iOS截屏并修改截图然后分享的功能实现

    一. 实现的效果类似微博的截图分享 不仅截图分享的时候还进行图片的修改,增加自己的二维码 二.实现方式 苹果在ios7之后提供了一个新的通知类型:UIApplicationUserDidTakeScr ...

  3. android cocos2dx游戏-加入截图和分享微博功能

    本文介绍怎样在游戏中添加分享功能,截屏后分享到微博及其他社交网络的功能. public class ShareSupport { // when you want to use share(),fir ...

  4. ios系统下的QQ浏览器jquert的BUG

    $(document).bind("click", function(e){ var $t = $(e.target); alert(333); if($t.is("p& ...

  5. TestNG监听器实现用例运行失败自动截图、重运行功能

    注: 以下内容引自 http://blog.csdn.net/sunnyyou2011/article/details/45894089 (此非原出处,亦为转载,但博主未注明原出处) 使用Testng ...

  6. QQ浏览器中时区bug

    在QQ浏览器 4.4.119.400 版本中,通过new Date('2018-11-11').getTime(); 获取的时间不是东8区的时间戳,而是0时区的时间戳,这就导致了获取的时间与实际的时间 ...

  7. windows 实用小工具(截图、进程管理)

    1. 截图 picpick:PicPick-NGWIN,一款全功能的设计工具,包含屏幕截图.图片编辑器.颜色选择器.像素标尺和其它更多的功能 2. 二进制/十六进制 十六进制(二进制)编辑器 3. p ...

  8. js实现QQ、微信、新浪微博分享功能

    微信分享需要手机扫描二维码,需要对url进行编码.在https协议下,扫描二维码时,浏览器打不开可能时安全证书导致的. var shareModel = { /** * 分享QQ好友 * @param ...

  9. QQ概念版(WPF制作)

    984 QQ概念版 编辑   QQ 概念版是腾讯首款NUI(自然用户交互)产品,全面实现了多点触摸操作.是腾讯利用微软最新一代的客户端展现层技术--WPF,打造的IM产品. 中文名 QQ 概念版 游戏 ...

随机推荐

  1. Vim -> 边确认边查找替换

    进行简单的全局查找替换的时候,能够使用ex的例如以下命令 :%s/which/what/g 它的使用方法比較简单 % 表示每一行(everyline) s 替换(substitue) which 查找 ...

  2. python基础教程_学习笔记10:异常

    异常 什么是异常 Python用异常对象来表示异常情况.遇到错误后,会引发异常.假设异常对象并未被处理或捕捉,程序就会用所谓的回溯(Traceback,一种错误信息)终止运行: >>> ...

  3. Android比较字符串是空的(isEmpty)

    通常情况下,我们需要去推断一个字符串变量是否为空,今天,我特意做了一个小测试 StringUtils.java: package com.yx.equipment_collection.utils; ...

  4. configure: error: zlib not installed

    export LDFLAGS="-L/usr/local/zlib/lib" export CPPFLAGS="-I/usr/local/zlib/include&quo ...

  5. 为什么使用 React? Edit on GitHub

    为什么使用 React? React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库.很人多认为 React 是 MVC 中的 V(视图). 我们创造 ...

  6. poj3662(二分+最短路)

    题目连接:http://poj.org/problem?id=3662 题意:有n个节点p条无向边,现在可以选择其中的任意K条免费,则花费为除了k条边后权值最大的一个,求最小花费多少. 分析:二分枚举 ...

  7. Java中字符串中子串的查找共有四种方法(indexof())

    Java中字符串中子串的查找共有四种方法(indexof()) Java中字符串中子串的查找共有四种方法,如下:1.int indexOf(String str) :返回第一次出现的指定子字符串在此字 ...

  8. GString及IntelliJIdea中调试Groovy的操作步骤

    今天是学习Groovy的第一天,首先我觉得学习任何一种语言都要先弄清楚这种语言的特性,因为只有了解了特性之后学习才能达到好的效果,那么groovy的特点是什么的.我觉得groovy是一种动态语言,动态 ...

  9. ecshop中getAll ,getOne ,getRow的区别

    ecshop的数据库抽象层其实就是在模仿adodb $GLOBALS['db']->getAll($sql);//以二维关联数组返回所有数据 $GLOBALS['db']->getOne( ...

  10. UVA 707 - Robbery(内存搜索)

    UVA 707 - Robbery 题目链接 题意:在一个w * h的图上.t个时刻,然后知道一些信息,每一个时刻没有小偷的矩阵位置,问哪些时刻能够唯一确定小偷位置.和确定小偷是否已经逃走,假设没逃走 ...