neditor本地上传音频二

继续在上篇写太乱了，新开一篇：
1、修改neditor.css

/*音频样式*/
.edui-for-insertaudio .edui-icon:before {content: "\e640";}
.edui-notadd .edui-for-insertaudio .edui-dialog-content {
    width: 641px;
    height: 450px;
}
.edui-dialog .edui-for-insertaudio .edui-dialog-body {
    height: 560px !important;
    width: 640px !important;
}

2、修改neditor.config.js文件
toolbars新增insertaudio

//当鼠标放在工具栏上时显示的tooltip提示,留空支持自动多语言配置，否则以配置值为准
            ,labelMap:{
              // 'anchor':'', 'undo':''
            'insertaudio' : '音频',//新增
            }

serverUrl: "",
        imageActionName: "uploadimage",
        scrawlActionName: "uploadscrawl",
        videoActionName: "uploadvideo",
        fileActionName: "uploadfile",
        imageUrlPrefix: "",
        scrawlUrlPrefix: "",
        videoUrlPrefix: "",
        videoAllowFiles:["mp4","3gp","rmvb","avi","mov","mkv","flv","f4v"],
        fileUrlPrefix: "",
        catcherLocalDomain: "",
        /* 上传音频配置项 */
        audioActionName: "uploadaudio", /* 执行上传音频的action名称 */
        audioAllowFiles: ["mp3","m4a","wma","amr","ape","flac","aac"], /* 上传音频格式限制 */

3、修改neditor.service.js文件

 if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo' || action == 'uploadaudio') {
        return addr+'admin/base/neditorUpload';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }

视频与音频用的都是视频上传service，所以此文件修改一处即可

4、修改neditor.all.js

找到下列方法：

新增代码：

<symbol id="edui-for-insertaudio" viewBox="0 0 1024 1024"><path d="M991.140186 0.88755h-7.673343a36.448381 36.448381 0 0 0-15.986133 0L219.969177 135.810504a31.972264 31.972264 0 0 0-28.135593 30.693374 30.053928 30.053928 0 0 0 0 3.197226v616.425251A127.889056 127.889056 0 0 0 127.889056 768.221888a127.889056 127.889056 0 1 0 127.889056 127.889056V384.554719a36.448381 36.448381 0 0 0 17.904468 0L959.167922 260.502334v457.203376a127.889056 127.889056 0 0 0-63.944528-17.904468A127.889056 127.889056 0 1 0 1023.11245 832.166416V32.859814a31.972264 31.972264 0 0 0-31.972264-31.972264z" fill="#666666" ></path></symbol>

找到下列方法并覆盖：

me.commands["insertvideo"] = {
    execCommand: function(cmd, videoObjs, type) {
      videoObjs = utils.isArray(videoObjs) ? videoObjs : [videoObjs];
      if (me.fireEvent("beforeinsertvideo", videoObjs) === true) {
        return;
      }
      
      var audioType = "mp3,m4a,wma,amr,ape,flac,aac";
      var htmlPushType = 0;
      var html = [],
        id = "tmpVedio",
        cl;
      for (var i = 0, vi, len = videoObjs.length; i < len; i++) {
        vi = videoObjs[i];
        cl = type == "upload"
          ? "edui-upload-video video-js vjs-default-skin"
          : "edui-faked-video";
        
        
        if(audioType.indexOf(vi.url.substr(vi.url.lastIndexOf('.') + 1)) != -1){
        	htmlPushType = 1;
        }
        html.push(
          creatInsertStr(
            vi.url,
            vi.width || 420,
            vi.height || 280,
            id + i,
            null,
            cl,
            "image"
          )
        );
      }
      if(htmlPushType == 1){
    	  for (var i = 0; i < html.length; i++) {
    		  //console.log(html[i]);
    		  html[i] = html[i].replace("videologo","audiologo");
    		  html[i] = html[i].replace("edui-faked-video"," audio edui-faked-video");
    		  html[i] = html[i].replace("edui-upload-video"," audio edui-upload-video");
    		  
    	  }
      }
      me.execCommand("inserthtml", html.join(""), true);
      var rng = this.selection.getRange();
      for (var i = 0, len = videoObjs.length; i < len; i++) {
        var img = this.document.getElementById("tmpVedio" + i);
        domUtils.removeAttributes(img, "id");
        rng.selectNode(img).select();
        me.execCommand("imagefloat", videoObjs[i].align);
      }

      me.fireEvent("afterinsertvideo", videoObjs);
    },
    queryCommandState: function() {
      var img = me.selection.getRange().getClosedNode(),
        flag =
          img &&
          (	
            img.className == "edui-faked-video" ||
            img.className.indexOf("edui-upload-video") != -1
           );
      return flag ? 1 : 0;
    }
  };

搜索edui-faked-video,找到下列方法

覆盖原来的视频判断：

if (
              (img.className.indexOf("edui-faked-video") != -1 ||
              img.className.indexOf("edui-upload-video") != -1)
              && img.className.indexOf("audio") == -1
            ) {
              dialogName = "insertvideoDialog";
            }
            
            if((img.className.indexOf("edui-faked-video") != -1 ||
                    img.className.indexOf("edui-upload-video") != -1)
                    && img.className.indexOf("audio") != -1) {
            	dialogName = "insertaudioDialog";
            }

找到下列方法并覆盖

function creatInsertStr(url, width, height, id, align, classname, type) {
    var str;
	    switch (type) {
	    case "image":
	      var logoType = "videologo"
	      if(classname.indexOf("audio") != -1){
	    	  logoType = "audiologo"
	      }
	      str =
	        "<img " +
	        (id ? 'id="' + id + '"' : "") +
	        ' width="' +
	        width +
	        '" height="' +
	        height +
	        '" _url="' +
	        url +
	        '" class="' +
	        (classname.replace(/\bvideo-js\b/, "")).replace(/\baudio-js\b/, "") +
	        '"' +
	        ' src="' +
	        me.options.UEDITOR_HOME_URL +
	        'themes/notadd/images/spacer.gif" style="background:url(' +
	        me.options.UEDITOR_HOME_URL +
	        "themes/notadd/images/"+logoType+".gif) no-repeat center center; border:1px solid gray;" +
	        (align ? "float:" + align + ";" : "") +
	        '" data-ad="1234567890"/>';
	      break;
	    case "embed":
	    	var ext = url.substr(url.lastIndexOf('.') + 1);
	    	var audioType = "mp3,m4a,wma,amr,ape,flac,aac";
	          if(audioType.indexOf(ext) != -1){
	              str = '<audio' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' 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>';
	          // '<embed type="application/x-shockwave-flash" class="' +
	          // classname +
	          // '" pluginspage="http://www.macromedia.com/go/getflashplayer"' +
	          // ' src="' +
	          // utils.html(url) +
	          // '" width="' +
	          // width +
	          // '" height="' +
	          // height +
	          // '"' +
	          // (align ? ' style="float:' + align + '"' : "") +
	          // ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
	              }
	      break;
	    case "video":
	      var ext = url.substr(url.lastIndexOf(".") + 1);
	      var audioType = "mp3,m4a,wma,amr,ape,flac,aac";
	      if (ext == "ogv") ext = "ogg";
	      if(audioType.indexOf(ext) != -1){
              str = '<audio' + (id ? ' id="' + id + '"' : '') + ' class="' + classname + ' 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;
	  }
    return str;
  }

找到switchImgAndVideo方法，新增判断

if(className != undefined && className != null && className != ""){}

在下方添加新方法

function switchImgAndAudio(root, img2video) {
	  
	  utils.each(
			  root.getNodesByTagName(img2video ? "img" : "embed audio"),
			  function(node) {
				  var className = node.getAttr("class");
				  if(className != undefined && className != null && className != ""){
					  if(className.indexOf("audio") != -1){
						  if (className && className.indexOf("edui-faked-video") != -1) {
							  var html = creatInsertStr(
									  img2video ? node.getAttr("_url") : node.getAttr("src"),
											  420,
											  100,
											  null,
											  node.getStyle("float") || "",
											  className,
											  img2video ? "embed" : "image"
							  );
							  node.parentNode.replaceChild(UE.uNode.createElement(html), node);
						  }
						  if (className && className.indexOf("edui-upload-video") != -1) {
							  var html = creatInsertStr(
									  img2video ? node.getAttr("_url") : node.getAttr("src"),
											  420,
											  100,
											  null,
											  node.getStyle("float") || "",
											  className,
											  img2video ? "video" : "image"
							  );
							  node.parentNode.replaceChild(UE.uNode.createElement(html), node);
						  }
					  }
				  }
			  }
	  );
  }

找到下列方法，添加调用：

最后随便找一个音频的小图片，命名为audiologo.gif，放在下列文件夹下

至此应该就都完成了，找了几遍，应该没有漏掉的代码。