实现能够直接粘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编码。
图片显示的过程就是把数据库里保存的数据在插入到你的页面元素中,比較简单就不再赘述。
本实例已经公布在最新版本号的牧客网协作平台上面了,欢迎体验,欢迎提出很多其它的关于在线协作的平台的改进建议。
实现能够直接粘QQ贴截图的bug管理功能的更多相关文章
- C# 实现QQ式截图功能
这个功能一共有两部分组成,第一部分是窗体代码,另外的一部分是一个辅助方法.直接贴出代码,以供大家参考: using System; using System.Collections.Generic; ...
- iOS截屏并修改截图然后分享的功能实现
一. 实现的效果类似微博的截图分享 不仅截图分享的时候还进行图片的修改,增加自己的二维码 二.实现方式 苹果在ios7之后提供了一个新的通知类型:UIApplicationUserDidTakeScr ...
- android cocos2dx游戏-加入截图和分享微博功能
本文介绍怎样在游戏中添加分享功能,截屏后分享到微博及其他社交网络的功能. public class ShareSupport { // when you want to use share(),fir ...
- ios系统下的QQ浏览器jquert的BUG
$(document).bind("click", function(e){ var $t = $(e.target); alert(333); if($t.is("p& ...
- TestNG监听器实现用例运行失败自动截图、重运行功能
注: 以下内容引自 http://blog.csdn.net/sunnyyou2011/article/details/45894089 (此非原出处,亦为转载,但博主未注明原出处) 使用Testng ...
- QQ浏览器中时区bug
在QQ浏览器 4.4.119.400 版本中,通过new Date('2018-11-11').getTime(); 获取的时间不是东8区的时间戳,而是0时区的时间戳,这就导致了获取的时间与实际的时间 ...
- windows 实用小工具(截图、进程管理)
1. 截图 picpick:PicPick-NGWIN,一款全功能的设计工具,包含屏幕截图.图片编辑器.颜色选择器.像素标尺和其它更多的功能 2. 二进制/十六进制 十六进制(二进制)编辑器 3. p ...
- js实现QQ、微信、新浪微博分享功能
微信分享需要手机扫描二维码,需要对url进行编码.在https协议下,扫描二维码时,浏览器打不开可能时安全证书导致的. var shareModel = { /** * 分享QQ好友 * @param ...
- QQ概念版(WPF制作)
984 QQ概念版 编辑 QQ 概念版是腾讯首款NUI(自然用户交互)产品,全面实现了多点触摸操作.是腾讯利用微软最新一代的客户端展现层技术--WPF,打造的IM产品. 中文名 QQ 概念版 游戏 ...
随机推荐
- 第二十次codeforces竞技结束 #276 Div 2
真是状况百出的一次CF啊-- 终于还Unrated了,你让半夜打cf 的我们怎样释怀(中途茫茫多的人都退场了)--虽说打得也不好-- 在这里写一下这一场codeforces的解题报告.A-E的 题目及 ...
- 使用Swing实现简易而不简单的文档编辑器
本文通过Swing来实现文档简易而不简单的文档编辑器,该文档编辑器的功能包括: 设置字体样式:粗体,斜体,下划线,可扩展 设置字体:宋体,黑体,可扩展 设置字号:12,14,18,20,30,40, ...
- 一个高速做git提交的脚本
用于高速将项目中的全部改变push到代码仓库.能够替代下面操作: git add . git commit -m "" git push 项目地址: https://github. ...
- UNIX高级环境编程1
UNIX高级环境编程1 故宫角楼是很多摄影爱好者常去的地方,夕阳余辉下的故宫角楼平静而安详. 首先,了解一下进程的基本概念,进程在内存中布局和内容. 此外,还需要知道运行时是如何为动态数据结构(如链表 ...
- PropertiesDemo
import org.apache.commons.configuration.ConfigurationException; import org.apache.commons.configurat ...
- hdu 4685 Prince and Princess(匈牙利算法 连通分量)
看了别人的题解.须要用到匈牙利算法的强连通算法 #include<cstdio> #include<algorithm> #include<vector> #pra ...
- 事务的使用示例及WinForm实现中的若干问题
--事务的使用示例 create database MyDB go use MyDB create table account ( Id int identity primary key, balan ...
- .Net 文本框实现内容提示(仿Google、Baidu)
原文:.Net 文本框实现内容提示(仿Google.Baidu) 1.Demo下载: 文本框实现内容提示(仿Google.Baidu).rar 2.创建数据库.表(我用的sqlserver2008数据 ...
- Algorithm Part I:Priority Queues
1.binary heap实现 BinaryHeap.h #ifndef BINARYHEAP_H #define BINARYHEAP_H class BinaryHeap { public: Bi ...
- WPF界面设计技巧(3)—实现不规则动画按钮
原文:WPF界面设计技巧(3)-实现不规则动画按钮 发布了定义WPF按钮的教程后,有朋友问能否实现不规则形状的按钮,今天我们就来讲一下不规则按钮的制作. 不规则按钮的做法实际上和先前我们做不规则窗体的 ...