React中使用UEditor，上传视频后，video标签被修改成img

因为这个问题，反反复复搞了大半天，终于解决了问题，做个小结

在React中获取的方式：

const content = this.GetueditorValue(document.getElementById('ueditor_0'));

GetueditorValue = element => element.contentDocument.body.innerHTML || element.contentWindow.document.body.innerHTML

引用ueditor

<script type="text/javascript" src="ueditor/1.4.3/ueditor.config.js"></script>
<script type="text/javascript" src="ueditor/1.4.3/ueditor.all.min.js"> </script>
<script type="text/javascript" src="ueditor/1.4.3/lang/zh-cn/zh-cn.js"></script>

 

视频上传后：

 

解决方式：

1. 引用的js文件：ueditor.all.min.js

搜索UE.htmlparser(a); 大概在2397行，把连着的三行代码注释掉，修改如下

//a = UE.htmlparser(a);
//this.filterInputRule(a);
//a = a.toHtml();

搜索  for (var k, m = c.length; a < m; a++) k = c[a], l = "upload" == h ? "edui-upload-video video-js vjs-default-skin" : "edui-faked-video", g.push(d(k.url, k.width || 420, k.height || 280, "tmpVedio" + a, null, l, "image"));  大概在7100行，修改如下

for (var k, m = c.length; a < m; a++) k = c[a], l = "upload" == h ? "edui-upload-video video-js vjs-default-skin" : "edui-faked-video", g.push(d(k.url, k.width || 420, k.height || 280, "tmpVedio" + a, null, l, "video"));

2.引用的js文件：ueditor.all.js

搜索var root = UE.htmlparser(html);，大概在7324行，把连着的三行代码注释掉，修改如下：

//var root = UE.htmlparser(html);
//me.filterInputRule(root);
//html = root.toHtml();

搜索 html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image')); ，大概在17715行，修改如下

html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video'));

 

经过反复测试，UE.getEditor('editor').getContent()获取的数据是正确的，如不使用React，可以考虑不做上面的修改。

 

另一种增加白名单whitList:{ }的方式，对上面的Bug,不会生效，但是还是记录下来

// xss 过滤是否开启,inserthtml等操作
, xssFilterRules: true
//input xss过滤
, inputXssFilter: true
//output xss过滤
, outputXssFilter: true
// xss过滤白名单 名单来源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js
, whitList: {
	a: ['target', 'href', 'title', 'class', 'style'],
	abbr: ['title', 'class', 'style'],
	address: ['class', 'style'],
	area: ['shape', 'coords', 'href', 'alt'],
	article: [],
	aside: [],
	audio: ['autoplay', 'controls', 'loop', 'preload', 'src', 'class', 'style'],
	b: ['class', 'style'],
	bdi: ['dir'],
	bdo: ['dir'],
	big: [],
	blockquote: ['cite', 'class', 'style'],
	br: [],
	caption: ['class', 'style'],
	center: [],
	cite: [],
	code: ['class', 'style'],
	col: ['align', 'valign', 'span', 'width', 'class', 'style'],
	colgroup: ['align', 'valign', 'span', 'width', 'class', 'style'],
	dd: ['class', 'style'],
	del: ['datetime'],
	details: ['open'],
	div: ['class', 'style'],
	dl: ['class', 'style'],
	dt: ['class', 'style'],
	em: ['class', 'style'],
	font: ['color', 'size', 'face'],
	footer: [],
	h1: ['class', 'style'],
	h2: ['class', 'style'],
	h3: ['class', 'style'],
	h4: ['class', 'style'],
	h5: ['class', 'style'],
	h6: ['class', 'style'],
	header: [],
	hr: [],
	i: ['class', 'style'],
	img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', '_url', 'loadingclass', 'style', 'class', 'data-latex'],
	ins: ['datetime'],
	li: ['class', 'style'],
	mark: [],
	nav: [],
	ol: ['class', 'style'],
	p: ['class', 'style', 'id', 'style'],
	pre: ['class', 'style'],
	s: [],
	section: [],
	small: [],
	span: ['class', 'style'],
	sub: ['class', 'style'],
	sup: ['class', 'style'],
	strong: ['class', 'style'],
	table: ['width', 'border', 'align', 'valign', 'class', 'style'],
	tbody: ['align', 'valign', 'class', 'style'],
	td: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
	tfoot: ['align', 'valign', 'class', 'style'],
	th: ['width', 'rowspan', 'colspan', 'align', 'valign', 'class', 'style'],
	thead: ['align', 'valign', 'class', 'style'],
	tr: ['rowspan', 'align', 'valign', 'class', 'style'],
	tt: [],
	u: [],
	ul: ['class', 'style'],
	video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style', 'data-setup'],
	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']

改完后的成果：

 

 

以上修改参考了很多人的解决方案，没办法一一记录下来，多谢各位

参考：https://blog.csdn.net/eadela/article/details/76264168,

https://blog.csdn.net/qq_34787830/article/details/75092347