UEditor富文本编辑器整合经验分享(二)

本文详细介绍了如何整合UEditor的高级功能,包括涂鸦后生成图片的上传、存储、显示,以及视频和音频文件的上传、存储和在线播放。文章通过配置ueditor.config.js、scrawl.js、webuploader.js、video.js和后台代码,展示了实现这些功能的关键步骤和注意事项。同时,文章还纠正了上篇博文关于附件上传的错误,确保视频上传功能的正确性。
摘要由CSDN通过智能技术生成

一、引言          

       12月23日在博客上给大家分享了一篇《 UEditor富文本编辑器整合经验分享(整合至SpringMVC)》文章(http://blog.csdn.net/lixinyao5281/article/details/78878774),主要内容是介绍了一下UEditor整合及使用,解决了图片上传、图片回显、文件上传、文件下载等大家常关心的富文本应用的问题,至于扩展问题,比如 涂鸦、视频、音频播放这些更高级的内容并未涉及,今天本文主要来探讨一下这几个高级一些的UEditor功能的整合使用,及前后台代码的关键点。本文解决的主要问题是UEditor涂鸦后生成图片上传、存储、页面显示和视频、音频文件(如mp4,mp3等)上传、存储、页面在线播放的功能。


涂鸦生成图片上传并回显


上传视频文件并在线播放


二、UEditor涂鸦功能

2.1 ueditor涂鸦功能介绍

    UEditor的涂鸦功能的实现原理是运用H5的<canvas>标签(该标签用于在网页上绘制图形)供用户在浏览器上绘制2D图型,并通过JS的Base64加密后用Ajax异步提交至后台再经过Base64解密成betye字节数组再转化为输入流存储在服务器上的过程。  



UEditor 涂鸦功能展示-用户进行涂鸦

 

UEditor涂鸦功能展示-回显在页面上



2.2动手整合ueditor涂鸦功能

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

景天

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值