遇到一个项目,客户要求能在编辑框中上传录音文件。用的是Ueditor编辑器,但是却不支持本地MP3上传并使用audio标签播放,只能搜索在线MP3,实在有点不方便。这里说一下怎么修改,主要还是利用原来的【插入视频】的功能:

步骤一:
上传视频的时候判断格式,如果是音频格式的话则调用原来music的处理方法
需要修改文件:dialogsvideovideo.js
位置在于:查找“function insertUpload”,314左右开始修改

if (count) {
$('.info', '#queueList').html('<span style="color:red;">' + '还有2个未上传文件'.replace(/[\d]/, count) + '</span>');
return false;
} else {
var is_music = 0;
var ext = file.url.split('.').pop().toLowerCase() ;
var music_type = ['mp3','wav'];
for(var i in music_type){
if(music_type[i]== ext){
is_music = 1;
}
}
if (is_music) {
editor.execCommand('music', {
url: uploadDir + file.url,
width: 400,
height: 95
});
} else {
editor.execCommand('insertvideo', videoObjs, 'upload');
}
}

步骤二:
修改原来music插件返回的标签格式从embed改成audio,如果你引用的是ueditor.all.min.js则需要重新压缩一次
需要修改文件:ueditor.all.js
查找位置:查找“UE.plugin.register('music',”,23607左右开始修改

function creatInsertStr(url,width,height,align,cssfloat,toEmbed){
return !toEmbed ?
'<img ' +
(align && !cssfloat? 'align="' + align + '"' : '') +
(cssfloat ? 'style="float:' + cssfloat + '"' : '') +
' width="'+ width +'" height="' + height + '" _url="'+url+'" class="edui-faked-music"' +
' src="'+me.options.langPath+me.options.lang+'/images/music.png" />'
:
'<audio class="edui-faked-music" controls="controls" src="'+ url+'" width="'+width+'" height="'+height+'" '+(align&&!cssfloat?'align="'+align+'"':"")+(cssfloat?'style="float:'+cssfloat+'"':"")+'>';
// '<embed type="application/x-shockwave-flash" class="edui-faked-music" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
// ' src="' + url + '" width="' + width + '" height="' + height + '" '+ (align && !cssfloat? 'align="' + align + '"' : '') +
// (cssfloat ? 'style="float:' + cssfloat + '"' : '') +
// ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
}

这样就可以在原来插入视频的地方上传音频文件,并且自动判断格式选择正确的标签显示了

本文转载于:猿2048➽https://www.mk2048.com/blog/blog.php?id=habk1hcikhj

Ueditor上传本地音频MP3的更多相关文章

  1. github入门到上传本地项目【网上资源整合】

    [在原文章的基础上,修改了描述的不够详细的地方,对内容进行了扩充,整合了网上的一些资料] [内容主要来自http://www.cnblogs.com/specter45/p/github.html#g ...

  2. github入门到上传本地项目

    GitHub是基于git实现的代码托管.git是目前最好用的版本控制系统了,非常受欢迎,比之svn更好. GitHub可以免费使用,并且快速稳定.即使是付费帐户,每个月不超过10美刀的费用也非常便宜. ...

  3. 用java 代码下载Samba服务器上的文件到本地目录以及上传本地文件到Samba服务器

    引入: 在我们昨天架设好了Samba服务器上并且创建了一个 Samba 账户后,我们就迫不及待的想用JAVA去操作Samba服务器了,我们找到了一个框架叫 jcifs,可以高效的完成我们工作. 实践: ...

  4. github上传本地项目

    github上传本地项目,分为两个部分: 1.如果建立了ssh key的,直接看第二部分的上传部分就行了 2.如果没有建立ssh key的,就从头开始看吧 ——————————————————我是快乐 ...

  5. ueditor上传大容量视频报http请求错误的解决方法

    故障现象: 当使用百度编辑器ueditor上传大容量视频或大容量图片的时候,编辑器报"http请求错误"的解决方法详解: 原因分析: 目前很多CMS整合了百度的ueditor编辑器 ...

  6. 图片上传本地预览。兼容IE7+

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...

  7. 用git上传本地项目到github上

    首先确认自己已经安装了git,打开git bash,输入ssh-keygen -t rsa -C "自己的邮箱地址@XXX.com" ,生成自己的公钥与私钥   一路默认回车,会生 ...

  8. KindEditor上传本地图片在ASP.NET MVC的配置

    http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. ...

  9. .net mvc4 利用 kindeditor 上传本地图片

    http://blog.csdn.net/ycwol/article/details/41824371?utm_source=tuicool&utm_medium=referral 最近在用k ...

随机推荐

  1. Python:读取Excel表格时出现的u'\u51c6’ 无法正确显示汉字

    读取Excel后,想显示其中一行的元素,结果读出来是这样[u'\u51c6\u8003\u8bc1\u53f7', u'\u8003\u751f\u59d3\u540d'],始终不显示正常的汉字 依照 ...

  2. 2020.11.2 异步IO 协程

    异步IO 同步IO在一个线程中,CPU执行代码的速度极快,然而,一旦遇到IO操作,如读写文件.发送网络数据时,就需要等待IO操作完成,才能继续进行下一步操作. 在IO操作的过程中,当前线程被挂起,而其 ...

  3. QUIC协议详解

    声明 本文可以自由转载但需注明原始链接.本文为本人原创,作者LightningStar,原文发表在博客园.本文主体内容参考论文[1]完成. 介绍 QUIC,发音同quick,是"Quick ...

  4. 【阅读SpringMVC源码】手把手带你debug验证SpringMVC执行流程

    ✿ 阅读源码思路: 先跳过非重点,深入每个方法,进入的时候可以把整个可以理一下方法的执行步骤理一下,也可以,理到某一步,继续深入,回来后,接着理清除下面的步骤. ✿ 阅读本文的准备工作,预习一下Spr ...

  5. nginx反向代理配置(conf文件中的nginx)

    ########### 每个指令必须有分号结束.##################user administrator administrators;  #配置用户或者组,默认为nobody nob ...

  6. Vue2.0双向数据绑定原理

    Object.defineProperty(objectName, key, option); Object.defineProperty()可以直接在一个对象上定义一个新属性, 或者修改一个属性, ...

  7. 28 面向对象编程 instanceof 代码 小结 父类引用指向子类对象

    instanceof 代码 // main // Object > Person >Student Object object = new Student(); // 提取公式:XY之间是 ...

  8. PCI协议 总结

    1.引脚 必要的引脚在左边,任选的引脚在右边 2.CLK in:时钟输入,为所有PCI上的接口传送提供时序.其频率也称为PCI的工作频率. 大部分信号都在CLK的上升沿有效 3.AD0~AD31 t/ ...

  9. vue路由-router

    VueRouter基础 vue路由的注册 导入 <script src="https://unpkg.com/vue-router/dist/vue-router.js"&g ...

  10. Betaflight Configurator开源仓库说明-中文版

    Betaflight Configurator Betaflight Configurator是Betaflight飞行控制系统的跨平台配置工具. 它在Google Chrome中作为应用程序运行,允 ...