用户在网络上发布word中的内容到网页上的富文本编辑框时,可以一键复制所有图片文字,粘贴在富文本编辑框中,实现富文本的无缝编写效果。

 

详细功能介绍、使用场景

用户在网络上发布富文本内容,在同时处理图片、文字时,一般需要将图片单独上传到远程服务器上,然后再选择上传完成的远程图片插入到富文本中,这样的操作流程需要繁琐的操作步骤、熟练的互联网技巧、图片操作技巧,对于普通网民来说是一个很大的操作门槛,对于熟练的IT人士,也是一项繁琐劳累的操作。作为腾讯QQ空间日志产品功能来说,能够简化这一操作流程,将极大的降低用户编写带有图片的日志的门槛。

我们考察了一些用户的写日志的习惯时发现,有相当部分用户是通过wordWPS)文档来记录日志(或者其他的一些文章),然后再将word档案中的图片、文字一段一段的分开插入到日志中去。通过我们团队的技术研究和开发,简单的通过web插件(兼容IEWebkit)的额外增量开发,再在前台代码中配对前台js功能代码的支持,实现了用户一件复制word中的图文(图片文字一起复制),然后可以无缝的直接粘贴在富文本编辑框中,实现内容图片无缝、快速上传,极大的提升了日志编写的操作体验。

 

创新点的创新之处的具体描述(innovation

无缝复制粘贴wordWPS)文档中的图片、文字到网站上,免去用户单独上传图片、插图图片等繁琐操作。

创意如何产生(创新点相关小故事)(why

QQ空间日志编辑器在实现word文档整个上传的功能过程中,发现该功能虽然能够一定程度上实现了用户快速将word文档中的内容搬到富文本编辑器中的功能,解决了用户处理较大文件的word的难题。 但是还发现,用户在上传word文档的情况中,大部分网民的网络上传速度非常一般,上传速度比较缓慢,用户在上传过程中无法编辑、查看word中的文字部分,整个用户体验很容易受到网络的质量影响。因此我们在想,能不能实现像复制网站图文那样方便的一键粘贴到富文本编辑框中。

通过研究windows word文档的图片复制粘贴的技术原理发现,原来word文档打开的时候,会直接在windows的缓存目录下生成对应图片的cache文件,我们可以通过访问、自动上传这个cache文件实现图片底层的静默上传。

刚好,在富文本图片(截屏插件提供了上传功能,于是我们稍微对截屏上传插件改造,提供上传指定的tmp目录的文件上传功能),配合前台代码改造,最终实现该效果。

怎么实现(how

1.QQ邮箱截屏插件提供上传指定tmp目录功能接口:

pluginInstance.AddTempFileItem(‘picname2’, file);

其中 file必须为windows缓存目录下的文件(安全起见)

2.前台javascript代码监听用户粘贴事件(onPastectrl+v),通过延迟setTimeout(f,0)         方式获取到用户粘贴的内容, 检测内容中 <img src=”file:///..” 这种图片格式;

3.Javascript调用原有的控件上传方法,静默上传用户富文本中的本地图片,上传完成        将之替换成为远程图片。