Vue.js中Ueditor如何引用 youtube视频源发布(已解决)

Ueditor 发布文章是很多人都用的插件,加入也是有自带的,但是如果要插入youtube 在线地址,会发现就不灵了,不能播放。

原因是youtube无法使用video标签使用。是可以用 embed iframe 嵌入标签的。这就需要改造一下ued了。

 修改config.js文件

Vue.js中Ueditor如何引用 youtube视频源发布(已解决)_第1张图片

在白名单whitList加上 标签:

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']

如果有其他 比如 video 也加上 :

			u:      [],
			ul:     ['class', 'style'],
			video:  ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'],
			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']

 

 再在all.js修改标签:

Vue.js中Ueditor如何引用 youtube视频源发布(已解决)_第2张图片

把 video 换成 embed 或者 iframe 如下图:

Vue.js中Ueditor如何引用 youtube视频源发布(已解决)_第3张图片

原来 是 video 的:

Vue.js中Ueditor如何引用 youtube视频源发布(已解决)_第4张图片

修改完 就可以了:

Vue.js中Ueditor如何引用 youtube视频源发布(已解决)_第5张图片

插入之后就可以 添加到文本中去了,也能提交到后台。后台返回的时候原样标签返回就可以了。

你可能感兴趣的:(我的代码世界,#,Vue)