遇到一个项目,客户要求能在编辑框中上传录音文件。用的是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. 019 Linux tcpdump 抓包案例入门可真简单啊?

    目录 1 tcpdump 是什么? 2 tcpdump 常用命令参数 3 tcpdump 抓包wss,配合Wireshark分析 4 tcpdump 抓包白度,配合Wireshark分析) 5 tcp ...

  2. 5.注入内部Bean

    我们将定义在 <bean> 元素的 <property> 或 <constructor-arg> 元素内部的 Bean,称为"内部 Bean". ...

  3. pep9伪代码

    Set sum to 0 Read num 1 Set sum to sum + num1 Read num2 Set sum to sum + num2 Read num3 Set sum to s ...

  4. 1列表展示的SQL,改为:只查询出vip会员,展示在页面上(10分)

    模型代码: //会员 public static function member(){ return self::where('status',1)->select(); } 控制器代码: // ...

  5. MYSQL数年库安装

    MySQL系列 MySQL 的三大主要分支mysqlmariadbpercona Server MySQL系列2.2.2.1 MySQL 的三大主要分支mysqlmariadbpercona Serv ...

  6. 从读写角度,带你了解数仓的IO基本框架

    摘要:本文从读取和写入的角度分别描述了行存和列存的IO模型,并对文件结构做了简单介绍. 本文分享自华为云社区<GaussDB(DWS)基本IO框架>,作者: Naibaoofficial. ...

  7. 创造性解决arch/manjaro官方aur源下载慢办法

    今天想用yay下载steam++加速github网页时发现yay下载一段时间后速度变为零,想到应该是aur源的问题,但是aur修改成国内源后发现没有用,于是想到可以手动修改PKGBUILD文件的sou ...

  8. Net6 Configuration & Options 源码分析 Part2 Options

    Net6 Configuration & Options 源码分析 Part2 Options 第二部分主要记录Options 模型 OptionsConfigurationServiceCo ...

  9. 2022 年最受瞩目的新特性 CSS @layer 到底是个啥?

    步入 2022,CSS 的新特性层出不穷,而最近在 CSS 圈最受瞩目的新特性,非 CSS @layer 莫属. 本文,将用最简洁的语言,快速让读者们搞懂,到底什么是 CSS @layer 新规范. ...

  10. 安装配置Snort和barnyard2

    1.安装依赖包 yum install –y gcc flex bison zlib* libpcap* tcpdump gcc-c++ zlib* libdnet libdnet-devel pcr ...