Baidu editor to upload video audio bug

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.