Baidu editor upload video and video editor preview bug fix

Baidu Editor is currently using a relatively wide range of an editor, not only open source and Chinese documents, so very popular, but there are many places need developers to debug their own, one of the more common problem is to upload video, upload the video itself has some small bugs, The most important embodiment of this is that the editor cannot preview the uploaded video problem.

I collected online solutions, found that the basic are the same, most of the answers are copied sticky, although a certain extent resolved the editor upload does not show the problem, but caused a new bug, such as uploading the video frame can not be closed, as long as the switch source mode and then return to see the preview of the video and so on.

So finally still self-clothed, finally found the perfect solution, in the process of finding the problem also found in fact Baidu Editor although left a bug, but these bugs are entirely in the expected, that is to give you the solution of the way, Only need to be able to understand their code according to their ideas can be changed to what you want to look, the key or understanding their development ideas, it must be a professional front end is very simple, but I am not a professional front end, so it took a little time, the following to see the solution and the problem itself.

First look at the specific bug situation:

After inserting the address into the video, it is normal to display it in the inserted video.

However, after inserting, the video does not have a normal preview, because it is not the video code in the Insert editor, but the code of the image image.

This time if you enter the source code to see, you will find that the inside is empty, there is nothing

The preview in the editor will find that the previous pictures are gone.

This occurs because the editor does not have a whitelist of open video inserted code, so it will be filtered out by XSS

Solution:

First, add the XSS filter whitelist to the Ueditor.config.js file:

At the end of this section, add the following code that you used to insert the video:

Source: ['src','type'], embed: ['type','class','pluginspage','src','width','Height','Align','style','Wmode','Play','AutoPlay','Loop','Menu','allowscriptaccess','allowFullScreen','Controls','preload'], iframe: ['src','class','Height','width','Max-width','Max-height','Align','frameborder','allowFullScreen']

In addition, because the inserted code is not a video, then the first to find the code to insert the editor code, the location in Ueditor.all.js, if the reference is uedior.min.js need to find here, find the following code:

After this, you will find that after inserting the video address, although the editor can see the video, but the window inserted into the video can not be closed

This problem occurs because after the change of embed, the following red box code does not normally find the image tag and its properties, as long as the contents of the Comment red box can be resolved to insert the video frame cannot automatically close the problem.

Then look down, apart from this bug, there are new questions, let's see what happens when you click the source and go back to the editor preview.

From the above figure can be seen, go to the source code is not filtered, but back to the editor is a blank, what is the matter?

The problem is in this code in the red box: type= "Application/x-shockwave-flash" class= "Edui-faked-video" pluginspage= "/http Www.macromedia.com/go/getflashplayer "

type specifies the flash format, I inserted is flash so no problem, pluginspage is to provide user flash (some users do not install Flash plugin or not update), then the problem is in class, Because Ediu-faked-video will tell the editor that this is not a video, it will delete the SRC link in the embed, so the whiteboard will appear when you go back to the editor preview.

The other answer on the Internet is to change the ediu-faked-video to Ediu-video, but I do not recommend, because only part of the problem, there are other bugs, such as if the uploaded video is mp4 format to do, the other changes in more than one place, or there is a problem, So I suggest changing the red box in the Ueditor.all.js section:

Here is the decision if you click on the video upload need to import the case of the embed code, before the image, we changed to embed, so here switch to get the EMBED code template, here we remove

[HTML]View PlainCopy

1. Type= "application/x-shockwave-flash" class="' + classname + '" pluginspage= "/http/ Www.macromedia.com/go/getflashplayer "' + '

After the change, refresh, we look at the video after inserting into the source code and then back to the editor preview State has no problem, you can preview, the red box code SRC content has not been filtered:

In addition to upload video can be normal operation, if it is in accordance with the online change edui-faked that, if the transmission is MP4 and other formats will be problematic.

Baidu editor upload video and video editor preview bug fix