百度编辑器上传视频音频的bug
前言:UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,百度Ueditor 支持多种后台语言上传使用,php,java,net,nodejs,官网没有提供nodejs 的后台配置,如果使用koa 框架可以参考这个模块:https://www.npmjs.com/package/ueditor-koa;上传图片,视频,音频等基本文件的功能。
百度Ueditor 下载地址:http://ueditor.baidu.com/website/download.html;
本文不介绍ueditor 的具体用法配置,
主要解决问题:视频和音频上传显示不正确的问题(前端问题,确保后台正确上传配置)
第一个问题:上传视频不显示
首先我们来上传一个视频,如图
发现视频是成功上传了,说明后台已经成功返回数据了,
点击确认后,发现视频并没有成功插入编辑器中,发现显示的是一张图片,并不是视频
打开控制器,审查元素看,插入的元素标签是img ,不是vidoe,
到这一步,发现问题的所在了,接下来就是要解决问题了
第一:找到 ueditor.config.js 这个文件,大概在365行这 个 whitList 属性
在whitlList 的属性里面添加以下代码
source: ['src', 'type'],
embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align', 'style', 'wmode', 'play', 'autoplay', 'loop', 'menu', 'allowscriptaccess', 'allowfullscreen', 'controls', 'preload'],
iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align', 'frameborder', 'allowfullscreen']
如图所示
第二 、找到ueditor.all.js 这文件 ,搜索这个me.commands["insertvideo"] 方法,大概在17780行;找到
改为: 将image 改为 video
源码:
for(var i=,vi,len = videoObjs.length;i<len;i++){
vi = videoObjs[i];
cl = (type == 'upload' ? 'edui-upload-video video-js vjs-default-skin':'edui-faked-video');
html.push(creatInsertStr( vi.url, vi.width || , vi.height || , id + i, null, cl, 'video'));
}
完成到一步,我们重新上传视频,这回应该可以正常显示视频 了
我们点击html 查看源码,似乎也正常,
但是,再点击显示回来,发现视频又变图片了,但是图片也不显示(占位)
发现bug,继续修改
第三:在ueditor.all.js 这文件找到 me.commands["insertvideo"] 方法,大概在17780行;找到:注悉以下代码;如图所示
这样基本解决视频上传的问题了。
个人还有建议修改:
在ueditor.all.js 这文件,找到UE.plugins['video'] 这个方法,大概在17632行。
将 去掉:type="application/x-shockwave-flash" class=" + classname + "pluginspage="http://www.macromedia.com/go/getflashplayer"'
至此,视频的问题ok 了
第二个问题:上传本地音频和上传音频不显示
主要修改支持本地上传mp3 音频问题
非常简单,本地上传音频也是 在上传视频面板那里上传,所以只需判断文件类型就可以了
在 ueditor.all.js 这文件 找到 UE.plugins['video'] 这个方法,大概在17632行。
将原来的:
改为:
源码:
case 'video':
var ext = url.substr(url.lastIndexOf('.') + );
if (ext == 'ogv') ext = 'ogg';
if (ext == "mp3") {
str = '<audio' + (id ? ' id="' + id + '"' : '') + ' class=" audio-js" ' + (align ? ' style="float:' + align + '"' : '') +' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '">" /></audio>';
} else {
str = '<video' + (id ? ' id="' + id + '"' : '') + (align ? ' style="float:' + align + '"' : '') + 'controls width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' + '<source src="' + url + '" type="video/' + ext + '" /></video>';
}
break;
到这里修改ok ,上传一个mp3 文件:
至此,音频的本地上传也解决了,
但是发现,内置的在线音频插入的音频地址都是报错的,不知道为什么了。有哪位大神能解决这问题,希望留言,跪谢
完结。。。。谢谢
百度编辑器上传视频音频的bug的更多相关文章
- 百度编辑器上传视频报Http请求错误,.net实现方式
在使用百度编辑器上传视频的时候遇到一个很奇怪的问题,当视频大小在20M以下的时候,上传正常.当大于20M时,一直报Http请求错误. 处理步骤: 1.修改编辑器配置信息,如图所示,改成你想要的大小 2 ...
- 百度编辑器上传视频以及视频编辑器预览bug解决
百度编辑器目前来讲是运用比较广泛的一个编辑器了,不仅开源还有中文的文档,所以很受欢迎,不过里面也有许多地方需要开发人员自己调试,其中一个比较常见的问题就是上传视频了,上传视频本身有一些小bug,这个基 ...
- 百度编辑器上传大视频报http请求错误怎么办
百度编辑器UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,所以受到很多开放人员的青睐.但是有时 ...
- Kindeditor编辑器上传附件,自动获取文件名显示。
大部分在线编辑器在上传附件之后都是会以路径的形式显示出来很不友好.类似这样..怎么样显示成这样用户上传的原始文件名呢.就是这样.是不是看着很友好. kindeditor编辑器上传文件是已插件的形式调用 ...
- SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片
SpringMVC上传图片总结(2)--- 使用百度webuploader上传组件进行上传图片 在上一篇文章中,我们介绍了< SpringMVC上传图片的常规上传方法 >.本文接着第一 ...
- PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- vue 百度云上传文件PostObject
百度云上传文件 API(PostObject) PostObject接口 : 接口描述 此接口使用HTML表单上传文件到指定bucket,用于实现通过浏览器上传文件到bucket.在PutObjec ...
- CI框架整合UEditor编辑器上传功能
最近项目中要使用到富文本编辑器,选用了功能强大的UEditor,接下来就来讲讲UEditor编辑器的上传功能整合. 本文UEditor版本:ueditor1_4_3_utf8_php版本 第一步:部署 ...
- django下的ckeditor 5.0 文本编辑器上传功能。
完整的后台界面怎么可以没有文本编辑器,但是django的admin界面很疑惑,没有自带文本编辑器,好在网上有不少成型的库可以用 我用的是ckeditor编辑器,安装和配置我引用别人的博客 这篇博客配置 ...
随机推荐
- Linux之mailx的使用
mailx是UNIX系统上用来处理邮件的工具,使用它可以发送,读取邮件.下面看看如何使用它来发送邮件. 发送格式 mailx -s subject user@xxx.com < message_ ...
- iOS隐藏键盘的几种方式
因为开发中经常要用到textField和textView,在某些情形下隐藏键盘很有必要,而隐藏键盘有多种方式,在合适的场景下用合适的方式隐藏就显得很重要,我也老是记不起来有哪些方法,这里就记录一下,以 ...
- Java-IO之PipedReader和PipedWriter
PipedReader和PipedWriter与PipedInputStream和PipedOutputStream一样,都可以用于管道通信.PipedWriter是字符管道输出流,继承于Writer ...
- 怎么避免在类实现的cpp文件中不要多次进行类声明
方法1: 类的头文件中写 #pragma once class MyTeacher { public: MyTeacher(); ~MyTeacher(); }; 方法2: 类的头文件中写 #ifnd ...
- hashmap简单实例(个人使用经验)
一.HashMap<int,String>是错误的:因为int是基本类型,而key和value要求是对象,所以要用Integer而不是int.HashMap<String,Objec ...
- 通过freemarker生成一个word,解决生成的word用wps打开有问题的问题,解决出word时中文文件名乱码问题,解决打开出word时打开的word出现问题的问题,出图片,解决动态列表
通过freemarker制作word比较简单 步骤:制作word模板.制作方式是:将模板word保存成为xml----在xml的word模板中添加相应的标记----将xml的word文件的后缀名 ...
- JQuery设置checkbox的值,取checkbox的值,设置radio的值,取radio的值,设置下拉选select的值,取select的值
一.复选框设置参数 html代码如下: <div class="flsm_btns"> <input type="hidden&q ...
- 5、使用Libgdx设计一个简单的游戏------雨滴
(原文:http://www.libgdx.cn/topic/49/5-%E4%BD%BF%E7%94%A8libgdx%E8%AE%BE%E8%AE%A1%E4%B8%80%E4%B8%AA%E7% ...
- H5学习之旅-H5列表(8)
列表的基本语法 ol:有序列表 ul:无序列表 li:列表项 dl:列表 dt:列表项 dd:列表描述 常用列表 1.无序列表:使用标签 ul,li 属性:disc(默认实心圆) circle (空心 ...
- 漫谈程序员(十八)windows中的命令subst
漫谈程序员(十八)windows中的命令subst 用法格式 一.subst [盘符] [路径] 将指定的路径替代盘符,该路径将作为驱动器使用 二.subst /d 解除替代 三.不加任何参数键入 ...