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

Question

我想使用媒体插件在 TinyMce 中添加嵌入媒体。例如，当我添加具有特定大小值的嵌入视频时，当我保存 post 时，宽度不正确。创建了以下 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 的宽度属性？我试图获取用于删除的 HtmlElement 属性并设置另一个但没有成功。

Answer 1

我找到了解决我的问题的方法，这不是聪明的方法，但仍然有效。我将 css 属性应用于 <iframe> 的父级 <p> （所有 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;
    });
}

当我想创建和修改包含嵌入视频的消息时使用此功能。

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

Keep correct size of embed video in TinyMce

javascript

css

typescript

tinymce-4