当前位置：首页 > news >正文

百度富文本编辑器ueditor支持上传mp3格式等音频文件的方法

news 来源：原创 2024/4/29 20:38:29

百度富文本编辑器ueditor算得上比较强大的了，但是有一个比较令人难受的问题，就是不支持本地上传音频文件。ueditor自带的mp3功能是直接在百度音乐里面搜索加进去的，显而易见这个不是我们想要的，我们需要能够上传自制的MP3音频格式的文件。那么如何实现呐，下面介绍一种方法：

分析

其实ueditor的视频上传功能是可以上传音频文件的，只是在加入到编辑器里面的时候，html结构不正确而已。所以，我们可以根据这个思路去找解决的方法。

效果图

先po一下效果图
在这里插入图片描述

实现

第一步：选择配置文件

在页面加载百度富文本编辑器配置文件的时候，选择ueditor.all.js。压缩版的修改起来比较麻烦，修改完成之后，可以自行的添加到ueditor.all.min.js压缩版里。

第二步：找到要修改的代码

打开ueditor.all.js文件，大约在17644行，找到函数creatInsertStr()，函数creatInsertStr()就是处理点击加入到ueditor里的方法。

源代码如下：

function creatInsertStr(url,width,height,id,align,classname,type){
    //...省略其他代码  
    case 'video':
		var ext = url.substr(url.lastIndexOf('.') + 1);
		if(ext == 'ogv') ext = 'ogg';
		str = '<video' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
		    ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
		    '<source src="' + url + '" type="video/' + ext + '" /></video>';
		break;
}

在这里插入图片描述

第三步：修改代码，将case 'video’里面代码修改为：

case 'video':
  var ext = url.substr(url.lastIndexOf('.') + 1);
    if(ext == 'ogv') ext = 'ogg';
    if(ext == 'mp3' || ext == 'wav'){
      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 + '"' : '') + ' class="' + classname + ' video-js" ' + (align ? ' style="float:' + align + '"': '') +
            ' controls preload="none" width="' + width + '" height="' + height + '" src="' + url + '" data-setup="{}">' +
            '<source src="' + url + '" type="video/' + ext + '" /></video>';
    }
    break;