Question

我想在媒体插件中添加TinyMce中的嵌入媒体。当我添加具有特定大小值的嵌入视频时，当我保存帖子时，宽度不正确。创建以下HTML：

<iframe src="//www.youtube.com/embed/XlpTLDulFe8" width="100" height="100" allowfullscreen="allowfullscreen"></iframe>

但实际上，我的CSS（mdl CSS）超出了我的宽度：

iframe {
    display: block;
    width: 100%;
    border: none;
}

我想使用max-width:100%;来保持iFrame宽度，如果它不高于100％

如何禁用TinyMce创建的iFrame的width属性？我试图获取HtmlElement for remove属性并设置另一个但没有成功。

Answer 1

我找到了解决问题的方法，这不是一个聪明的解决方案，但这仍然有效。我将css属性应用于<p>的父<iframe>（所有iframe都放在<p>标记中）

我使用以下功能

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的消息时，我使用此功能。

在TinyMce中保持正确的嵌入视频大小

1 个答案: