Baidu editor is currently a widely used editor. It is not only open source but also Chinese documents, so it is very popular. However, there are many places in it that developers need to debug themselves. One of the more common problems is uploading videos. , There are some small bugs in the uploaded video itself. The biggest manifestation of this is that the uploaded video cannot be previewed in the editor.
I collected the solutions on the Internet and found that they are basically the same. Most of them are copy-pasted answers. Although the problem that the editor upload is not displayed has been solved to a certain extent, it has caused new bugs. For example, the upload video box cannot be closed. , and as long as you switch to the source mode and then return, you can't see the previewed video, etc.
So in the end, I had to do it myself, and finally found a perfect solution. In the process of looking for the problem, I found that although Baidu editor left bugs, these bugs were completely expected, that is, they gave you a way to solve them. , you only need to be able to understand their code and change it to what you want according to their ideas. The key is to understand their development ideas. It must be very simple for a professional front-end, but I am not a professional front-end. , so it took some time, let's look at the solution and the problem of the bug itself.
Let's first look at the specific bug situation:
After the address is placed in the inserted video, it will be displayed in the inserted video normally, which is normal at this time.
But after inserting, the following image will be displayed. The video does not have a normal preview. This is because the code inserted into the editor is not the code of the video, but the code of the image image.
At this time, if you enter the source code and look at it, you will find that it is empty and there is nothing at all.
When you enter the editor's preview, you will find that the previous pictures have disappeared
This happens because the editor does not have a whitelist for the code inserted by the video, so it will be filtered out by xss
solution:
First add the xss filter whitelist in the ueditor.config.js file:
Add the following code to the end of the inserted video here:
- 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, since the inserted code is not a video, you must first find the code inserted into the editor code, which is located in ueditor.all.js. If you refer to uedior.min.js, you need to find it here, and find the following code:
After changing this, you will find that after inserting the video address, although the editor can see the video, the window for inserting the video cannot be closed.
The reason for this problem is that after changing the embed, the code in the red box below cannot find the image tag and its attributes normally. Here, as long as the content of the red box is annotated, the problem that the inserted video box cannot be automatically closed can be solved.
Then look down, in addition to this bug, there are new problems, let's see what happens when you click on the source code and go back to the editor preview.
As can be seen from the above figure, the video code in the source code will not be filtered, but it is blank when returning to the editor. What is going on?
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"
The type specifies the flash format. I inserted flash, so there is no problem. The pluginspage provides the user's flash download address (some users have not installed the flash plugin or have not updated it in time), then the problem is in the class, because ediu-faked-video will tell the editor that this is not a video, so the link to the src in the embed will be removed, so a whiteboard will appear when you go back to the editor preview.
Other answers on the Internet are to change ediu-faked-video to ediu-video, but I don't recommend it, because it can only solve some problems, and there are other bugs, such as what to do if the uploaded video is in mp4 format, and other changes There is more than one place, but there are still problems, so I suggest to change the red box part of the following figure in ueditor.all.js:
Here is the judgment that if you click on the video upload, you need to import the embed code. It was image before, and we changed it to embed, so here the switch gets the embed code template, and here we remove it.
- type="application/x-shockwave-flash"class="' + classname + '"pluginspage="http://www.macromedia.com/go/getflashplayer"' +'
After the changes are made, refresh, let's take a look at inserting the video and enter the source code and then return to the editor preview state. There is no problem. You can preview normally. The src content of the code in the red box is no longer filtered:
In addition, uploading video can also work normally. If it is changed to edui-faked according to the Internet, there will be problems if it is uploaded in other formats such as MP4.
Original link: http://blog.csdn.net/belen_xue/article/details/73252802