dev*_*mat 7 html figure ckeditor oembed
鉴于以下情况html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Header</h2>
<figure>
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>
</figure>
</body>
</html>
为什么页面不显示 youtube 视频？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<h2>Header</h2>
<figure>
<oembed url="https://www.youtube.com/watch?v=7km4EHgkQiw&list=RDQK-Z1K67uaA&index=9"></oembed>
</figure>
</body>
</html>
正文代码是由CKEditor（我刚刚从标签中删除了“媒体”类figure）生成的。您可以在此处查看我的原始帖子链接
Kai*_*las 15
针对CKeditor 5测试的解决方案
使用以下代码将 CKeditor 中显示的确切视图保存到数据库中
mediaEmbed: {
previewsInData:true
},
完整的 JS 代码
var KTCkeditorDocument = function () {
// Private functions
var demo = function () {
ClassicEditor
.create( document.querySelector( '#kt-editor' ),{
mediaEmbed: {
previewsInData:true
},
}
)
.then( editor => {
// console.log( editor );
} )
.catch( error => {
// console.error( error );
Swal.fire("Info !", error, "error");
} );
}
return {
// public functions
init: function() {
demo();
}
};
}();
jQuery(document).ready(function() {
KTCkeditorDocument.init();
});
有关更多详细信息，您可以查看此链接：https://ckeditor.com/docs/ckeditor5/latest/features/media-embed.html
图和 oembed 标签无法显示预览。为了使其工作，我必须将 youtube 链接转换为可嵌入链接，并使用 iframe 添加它们。
为此，我使用了此线程中提出的解决方案：链接
function getId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
return 'error';
}
}
var videoId = getId('http://www.youtube.com/watch?v=zbYf5_S7oJo');
var iframeMarkup = '<iframe width="560" height="315" src="//www.youtube.com/embed/'
+ videoId + '" frameborder="0" allowfullscreen></iframe>';