Baidu editor to upload video audio bug

Preface: Ueditor is developed by Baidu Web front-end research and development department to see the Rich Text Web editor, with light weight, customizable, focus on user experience and other characteristics, open source based on the MIT protocol, allow free use and modify code, Baidu Ueditor support a variety of background language upload use, php,java,net,nodejs, the official website does not provide Nodejs background configuration, if using the KOA Framework can refer to this module: Https://www.npmjs.com/package/ueditor-koa, upload images, videos, audio and other basic file functions.

Baidu Ueditor:http://ueditor.baidu.com/website/download.html;

This article does not describe the specific usage configuration of Ueditor,

main problem: video and audio upload display incorrect problem ( front end problem, make sure background upload configuration correctly )

first question : Upload video does not display

First we're going to upload a video,

　　

　　Found that the video was successfully uploaded, indicating that the background has successfully returned data,

　　When you click Confirm, you find that the video is not successfully inserted into the editor and it shows a picture, not a video

　　

　　　Open the Controller, review the element to see, insert the element tag is img, not vidoe,

　　　To this point, find out what the problem is, and the next step is to solve the problem.

　　First: Find ueditor.config.js This file, probably in 365 Line this whitlist attribute

　　

Add the following code to the Whitllist attribute

1Source: ['src','type'],2Embed: ['type','class','pluginspage','src','width','Height','Align','style','Wmode','Play','AutoPlay','Loop','Menu','allowscriptaccess','allowFullScreen','Controls','preload'],3IFRAME: ['src','class','Height','width','Max-width','Max-height','Align','frameborder','allowFullScreen']

Second , find ueditor.all.js This file, search this me.commands["Insertvideo" method, Probably on the 17780 line;

instead: Change image to video

　　Source:

1   for(varI=0, Vi,len = videoobjs.length;i<len;i++){2VI =Videoobjs[i];3CL = (Type = ='Upload'?'edui-upload-video video-js Vjs-default-skin':'Edui-faked-video');4Html.push (Creatinsertstr (vi.url, Vi.width | |420, Vi.height | |280, id + i,NULLCl'Video'));5}

to complete the step, we re-upload the video, this should be able to display the video properly the

　　

　　　 We click on the HTML to view the source code, it seems normal,

　　

　　However, click on the show back, found that the video is changed again, but the picture is not displayed (placeholder)

　　Find bugs, continue to modify

　　Third: in ueditor.all.js This file find me.commands["Insertvideo" method, probably in the 17780 line; Find: note the following code;

　　

This basically solves the problem of video uploading.

Individuals also have suggested modifications:

in ueditor.all.js This file, find ue.plugins[' video ' This method, probably in 17632 line.

Will be removed: type= "Application/x-shockwave-flash" class= "+ classname +" pluginspage= "http://www.macromedia.com/go/ Getflashplayer "'

　　at this point, the video problem is OK

Second question: uploading local audio and uploading audio is not displayed

main changes support local upload mp3 audio Problem

　　very simple, local upload audio is also Upload the video panel there, so just determine the file type.

　　in the ueditor.all.js This file find ue.plugins[' video ' This method, probably in 17632 line.

will be the original:

　　

　　Switch

　　

　　Source:

1   Case 'Video':2       varext = URL.SUBSTR (Url.lastindexof ('.') +1);3       if(ext = ='OGV') ext ='ogg';4       if(ext = ="mp3") {5str ='<audio'+ (ID?)'id= "'+ ID +'"':"') +'class= "Audio-js"'+ (align?)'style= "float:'+ Align +'"':"') +'controls preload= "None" Width= "'+ width +'"height="'+ Height +'"src="'+ URL +'">"/></audio>';6}Else {7str ='<video'+ (ID?)'id= "'+ ID +'"':"') + (align?)'style= "float:'+ Align +'"':"') +'Controls Width= "'+ width +'"height="'+ Height +'"src="'+ URL +'"data-setup=" {} ">'+'<source src= "'+ URL +'"Type=" video/'+ ext +'"/></video>';8      }9       Break;

To change ok here, upload a mp3 file:

　　

at this point, the local upload of audio is also resolved,

But found that the built-in audio address of the online audio insertion is an error, do not know why. Any big God can solve this problem, hope to leave a message, kneeling thanks

End.... Thank you

Baidu editor to upload video audio bug