解决百度富文本编辑器Ueditor自定义上传视频封面

最新推荐文章于 2021-07-23 18:04:40 发布

m0_37826725

最新推荐文章于 2021-07-23 18:04:40 发布

阅读量8k

点赞数 2

分类专栏：富文本编辑器文章标签：富文本编辑器自定义上传视频封面

本文链接：https://blog.csdn.net/m0_37826725/article/details/99094029

版权

本文介绍了如何在百度富文本编辑器Ueditor中实现自定义上传视频封面的步骤，包括修改ueditor.all.js源码，添加封面按钮，处理点击事件，并给出了关键代码段。需要注意的是，此方法可能需要在无xss过滤白名单的情况下操作，同时可能需要在ueditor.config.js中添加poster属性到video的whitList。

摘要由CSDN通过智能技术生成

搜了好多解决视频封面的，都是固定的封面。也许是我没有搜到，我是纯小白，接触这个富文本编辑器才两天！提供一个思路，直接进入正题

思路就是：选中上传的视频-点击上传封面-调用ueditor内部的图片上传-更改保存的html内容-更改显示的背景图

首先说明是要更改源码的！！！！

我是在ueditor.config.js里面没有xss过滤白名单的情况下完成下面的操作的。这个东西可以不要，可以直接把whitList这个节点注释掉。

全是在ueditor.all.js里面改的源码

js文件下载地址：http://download.csdn.net/download/m0_37826725/12036528

第一步：增加添加封面的按钮

搜索popup.formatHtml(str)代码把str赋值的内容替换成下面内容

var coverButton = "";
if (dialogName == "insertvideoDialog") {
	coverButton = "&nbsp;&nbsp;" +
	'<span onclick=$$._onImgCoverEditButtonClick(\'' +
	dialogName +
	'\') class="edui-clickable"><input id="coverImgUrl" style="display:none;" type="file"  />添加封面' +
	"</span>";
}
str = "<nobr>" +
	editor.getLang("property") +
	": " +
	'<span onclick=$$._onImgSetFloat("none") class="edui-clickable">' +
	editor.getLang("default") +
	"</span>&nbsp;&nbsp;" +
	'<span onclick=$$._onImgSetFloat("left") class="edui-clickable">' +
	editor.getLang("justifyleft") +
	"</span>&nbsp;&nbsp;" +
	'<span onclick=$$._onImgSetFloat("right") class="edui-clickable">' +
	editor.getLang("justifyright") +
	"</span>&nbsp;&nbsp;" +
	'<span onclick=$$._onImgSetFloat("center") class="edui-clickable">' +
	editor.getLang("justifycenter") +
	"</span>&nbsp;&nbsp;" +
	'<span onclick="$$._onImgEditButtonClick(\'' +
	dialogName +
	'\');" class="edui-clickable">' +
	editor.getLang("modify") +
	"</span>" +
	coverButton +
	"</nobr > ";

这样写是因为只是视频会显示添加封面的按钮。