使用CKEditor5上传视频链接报引入媒体url失败.
解决办法：参考：/huhui806/article/details/105312410
但是显示不了，应该是版本落后了。正确办法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Pragma" content="no-cache">
<style>
/* 设置富文本编辑器的高度 */
.ck-editor__editable {
min-height: 600px;
}
figcaption{
display: none;
}
</style>
</head>
<body style="width: 100%;">
<div style="width: 100%;margin-top: 10px;">
<textarea ></textarea >
</div>
<script type="text/javascript" src="ckeditor5/"></script>
<script type="text/javascript" src="ckeditor5/translations/"></script>
//处理图片上传的js文件
<!-- <script type="text/javascript" src="js/"></script> -->
<script type="text/javascript" src="js/jquery-1.9."></script>
<script>
var myEditor=null;
var qiniu_token;
ClassicEditor
.create( ( '#editor' ),{
language: 'zh-cn',
ckfinder: {
uploadUrl: '[[@{/upload}]]'
},
mediaEmbed: {
providers: [
{
name: 'myprovider',
url: [
/^lizzy.*\.com.*\/media\/(\w+)/,
/^www\.lizzy.*/,
/^.*/
],
html: match => {
//获取媒体url
var shipinUrl = match['input'];
('获取媒体url===='+shipinUrl);
return (
'<div style="position: relative; padding-bottom: 100%; height: 0; padding-bottom: 70%;">' +
'<iframe src="'+shipinUrl+'"' +
'style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;" ' +
'frameborder="0" allowtransparency="true" allow="encrypted-media">' +
'</iframe>' +
'</div>'
);
}
}
]
}
})
.then( editor => {
= editor;
myEditor=editor;
} )
.catch( error => {
( error );
} );
</script>
</body>
</html>
视频预览及页面不显示视频问题
以上可以在富文本编辑器中显示视频，但是获取数据，在普通页面显示不了；
原来保存的视频数据
<figure class="media">
<oembed url="https://media-url"></oembed>
</figure>
解决方案：H5 <video>标签
反正已经拿到了url，只是一个展示的问题，那就用H5的<video>标签吧
<script>
( 'oembed[url]' ).forEach( element => {
const videoLable = ( 'video' );
( 'src', ( 'url' ) );
( 'controls', 'controls' );
( 'style', ' width: 100%;height: 100%; ' );
( videoLable);
} );
</script>
