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