Ueditor上传本地音频MP3

遇到一个项目,客户要求能在编辑框中上传录音文件。用的是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

原文地址:https://www.cnblogs.com/10manongit/p/12218811.html

时间: 2024-11-06 11:35:25

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

github入门到上传本地项目

GitHub是基于git实现的代码托管.git是目前最好用的版本控制系统了,非常受欢迎,比之svn更好. GitHub可以免费使用,并且快速稳定.即使是付费帐户,每个月不超过10美刀的费用也非常便宜. 利用GitHub,你可以将项目存档,与其他人分享交流,并让其他开发者帮助你一起完成这个项目.优点在于,他支持多人共同完成一个项目,因此你们可以在同一页面对话交流. 创建自己的项目,并备份,代码不需要保存在本地或者服务器,GitHub做得非常理想. 学习Git也有很多好处.他被视为一个预先维护过程,

如何用一张图片代替 &#39;input:file&#39; 上传本地文件??

今天去面试,碰到了一道题,也许是因为紧张或者喝水喝多了,一时竟然没有转过弯来,回来之后一细想原来这么简单,哭笑不得,特此记录一下! 原题是这样的:  如何用一张图片代替 'input:file' 上传本地文件?? 因为默认的 <input type='file'> 上传文件控件样式特别丑,需要换成自定义的图片,如何实现这个功能?? 也就是,将这个玩意: 换成这样的: 当时我还讲了一下label与input之间的绑定关系,问到这个的时候竟然脑袋短路一时没想到label这玩意儿??label作为一

半小时学会上传本地项目到github

一.注册github账号   首先需要注册一个github账号,注册地址:https://github.com 接着会来到这 然后会收到一封github发的邮件,进入邮箱验证 二.创建个人的github仓库  验证成功是这样的,然后点击创建仓库 也可以来到个人中心里创建仓库 创建完成好之后是这样子的.创建仓库的时候最好别用中文,不然你的仓库名就会显示 -  这样一条小横线. 三. 配置SSH keys 终端里输入显示隐藏文件:defaults write com.apple.finder App

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

http://www.cnblogs.com/upupto/archive/2010/08/24/1807202.html 本文解决KindEditor上传本地图片在ASP.NET MVC中的配置. 开发工具:VS 2010 EN 开发语言:Visual C# ASP.NET MVC 2.0 kindeditor-3.5-zh_CN 下载 文中以Blog文章为例,为做演示,数据表比较简单,如下图: 添加 BlogController Code: 1 2 3 4 5 6 7 8 9 10 11 1

上传本地工程到远程Git仓库

上传本地工程到远程Git仓库 首先登录远程Git仓库,我使用的OSChina的码云,手动创建对应的项目工程 进入本地的工程目录下 按如下顺序执行相关命令: git init --Create an empty Git repository or reinitialize an existing one echo "# project name" >> README.md git remote add origin https://git.oschina.net/person

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

故障现象: 当使用百度编辑器ueditor上传大容量视频或大容量图片的时候,编辑器报“http请求错误”的解决方法详解: 原因分析: 目前很多CMS整合了百度的ueditor编辑器,但是上传稍微大一点的文件就会报错, 解决方案 1:修改相对应的ueditor\asp\config.json编辑器文件夹中的配置文件config.json在其中查找"videoMaxSize": 1024000000, /* 上传大小限制,单位B,默认1GBB */ 这是我修改后的参数: 2:在web.co

git 上传本地文件到github

1 git config --global user.name "Your Real Name" 2 git config --global user.email [email protected] git init git add . git commit -m 'Test' git remote add origin [email protected]:XXX/XXX.git 3 git push -u origin master 一些可能遇到的问题解决: 如果输入$ git re

Selenium如何实现上传本地文件

? 1 2 3 4 5 6 7 8 9 public void uploadLocalFileToServer(String uploadFileName){         String AutomationPath = System.getProperty("user.dir");         String filePath=AutomationPath+"\\src\\test\\resources\\testData\\"+uploadFileName;

用git上传本地项目到github上

首先确认自己已经安装了git,打开git bash,输入ssh-keygen -t rsa -C "自己的邮箱地址@XXX.com" ,生成自己的公钥与私钥   一路默认回车,会生成公钥.私钥到以下文件夹下id_rsa是私钥,id_rsa.pub是公钥,打开公钥等下要用到   浏览器进入自己的github,打开设置,进入ssh and GPG keys   点击NEW ssh key,自己填个标题,下面内容复制前面打开的公钥,最后添加   可以用ssh -T [email protec