遇到一个项目,客户要求能在编辑框中上传录音文件。用的是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. VS Code 启动占用100%Cpu问题解决办法

    打开VS Code之后,点击文件->首选项->设置 search.followSymlinks

  2. c/c++ 内存泄漏分析

    Valgrind: https://zhuanlan.zhihu.com/p/111556601 valgrind输出结果分析 valgrind输出结果会报告5种内存泄露,"definite ...

  3. python面试_总结03_列表练习题

    1.列表练习题 完成下列列表相关的编程题,先运行下列的test函数,在完成每道题之后,都可以通过调用test函数检测所写函数对错. def test(got, expected): if got == ...

  4. 实用TCP协议(2):TCP 参数优化

    在了解 TCP 的基本机制后本文继续介绍 Linux 内核提供的链接队列.TW_REUSE.SO_REUSEPORT.SYN_COOKIES 等机制以优化生产环境中遇到的性能问题. 连接队列 Linu ...

  5. SETTLE约束算法的批量化处理

    技术背景 在上一篇文章中,我们介绍了在分子动力学模拟中SETTLE约束算法的实现与应用,其中更多的是针对于单个的水分子.但由于相关代码是通过jax这一框架来实现的,因此对于多分子的体系,可以采用jax ...

  6. 借助DBHelper实现学生管理案例分析

    一.案例功能的实现 数据: --专业 create table ProfessionInfo ( ProfessionID int primary key identity(1,1), --专业编号 ...

  7. 彩色建模(四色原型) Object Modeling in Color学习心得

    定义4种类的原型,在UML中用不同颜色表示不同原型的对象     1. Party, Place, Thing Party: 事件的参与方,例如某人人.某组织等 Place: 事件的发生地,例如仓库. ...

  8. CacheManager Net Core Redis 缓存

    using CacheManager.Core; using System; using System.Collections.Generic; using System.Text; namespac ...

  9. vue2.x版本中computed和watch的使用入门详解-computed篇

    前言 在基于vue框架的前端项目开发过程中,只要涉及到稍微复杂一点的业务,我们都会用到computed计算属性这个钩子函数,可以用于一些状态的结合处理和缓存的操作. 基础使用 在computed中,声 ...

  10. ssh-ssl编译安装

    升级前准备 #下载所需依赖包#yum install -y gcc gcc-c++ glibc make autoconf openssl openssl-devel pcre-devel pam-d ...