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

【问题标题】：Keep correct size of embed video in TinyMce在 TinyMce 中保持正确大小的嵌入视频
【发布时间】：2017-12-07 14:57:31
【问题描述】：

我想用媒体插件在 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;
}

如果 iFrame 宽度不超过 100%，我想改用 max-width:100%; 来保持 iFrame 宽度

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

【问题讨论】：

标签： javascript css typescript tinymce-4

【解决方案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;
    });
}

当我想创建和修改包含 embedVideo 的消息时，我会使用此功能。

【讨论】：