在 TinyMce 中保持嵌入视频的正确大小 [英] Keep correct size of embed video in TinyMce
问题描述
我想使用媒体插件在 TinyMce 中添加嵌入媒体.例如,当我添加具有特定大小值的嵌入视频时,当我保存帖子时,宽度不正确.创建了以下 HTML:
I want to add embed media in TinyMce with media plugin. When I add an embed video for example with specific size value, when I save the post, the width is not correct. The following HTML is created:
<iframe src="//www.youtube.com/embed/XlpTLDulFe8" width="100" height="100" allowfullscreen="allowfullscreen"></iframe>
但不幸的是,我有以下 CSS (mdl CSS) 重载了我的宽度大小:
But infortunatly, i've the folowing CSS (mdl CSS) that overload my width-size:
iframe {
display: block;
width: 100%;
border: none;
}
我想使用 max-width:100%;
来保持 iFrame 宽度,如果它不优于 100%
I want to use instead a max-width:100%;
for keep iFrame width if it isn't superior to 100%
如何禁用由 TinyMce 创建的 iFrame 的宽度属性?我试图获取用于删除属性的 HtmlElement 并设置另一个但没有成功.
How can I disable the width property for iFrame created by TinyMce ? I've tried to get the HtmlElement for remove property and set another but without success.
推荐答案
我找到了解决我的问题的方法,这不是一个聪明的方法,但它仍然有效.我将css属性应用于的父
(所有iframe都放在
标签中)
I found a solution to my problem, this isn't the clever one but this still works well. I apply the css property to the parent <p>
of the <iframe>
(all iframe are put in <p>
tag)
我使用以下功能
public correctWidthIframe(html: string) {
let regex = /<p[^>]*>(<iframe*[^>]+(width=*[^height]*height="[0-9]*")[^>]*><\/iframe><\/p>)/g;
return html.replace(regex, (match, p1, p2) => {
let dimension = p2.match(/[0-9]+/g);
let style: string = '<p style="max-width:'+dimension.shift()+'px;">'; // only width is wrong
return style + p1;
});
}
当我想创建和修改包含 embedVideo 的消息时,我会使用此功能.
I use this function when i want to create and modify message that contain embedVideo.
这篇关于在 TinyMce 中保持嵌入视频的正确大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!