如何在Dynamics CRM的CKEDITOR中替换iframe的src为data-src并添加属性

方案一：正则表达式方案 #

适合HTML结构相对简单的场景，能批量处理字符串中的iframe元素，兼容单/双引号、不同属性顺序等常见格式。

实现逻辑 #

1. 批量将iframe的src属性替换为data-src
2. 为未包含cookieconsent属性的iframe补充该属性

代码示例 #

function processIframeHtml(html) {
    // 替换src为data-src（兼容单/双引号写法）
    html = html.replace(/(<iframe[^>]*)\bsrc=('|")([^'"]*)\2/g, '$1data-src=$2$3$2');
    // 为无cookieconsent属性的iframe添加该属性
    html = html.replace(/(<iframe[^>]*)(?<!cookieconsent=('|")[^'"]*\2)([^>]*>)/g, '$1 cookieconsent="marketing"$3');
    return html;
}

方案二：DOM解析方案（推荐） #

利用浏览器原生DOM引擎处理HTML，彻底规避正则表达式的边缘场景问题（比如属性值含特殊字符、复杂嵌套结构），稳定性更强。

实现逻辑 #

1. 创建临时DOM容器注入目标HTML字符串
2. 遍历所有iframe元素，逐个调整属性
3. 提取处理后的HTML字符串返回

代码示例 #

function processIframeHtml(html) {
    const tempContainer = document.createElement('div');
    tempContainer.innerHTML = html;
    
    // 遍历处理每个iframe
    tempContainer.querySelectorAll('iframe').forEach(iframe => {
        // 将src属性转移为data-src并移除原属性
        if (iframe.hasAttribute('src')) {
            iframe.setAttribute('data-src', iframe.getAttribute('src'));
            iframe.removeAttribute('src');
        }
        // 设置cookieconsent属性（覆盖已有值）
        iframe.setAttribute('cookieconsent', 'marketing');
    });
    
    return tempContainer.innerHTML;
}

在Dynamics CRM RTE事件中集成 #

在富文本编辑器的onChange事件中调用处理函数：

function onRichTextEditorChange(executionContext) {
    const formContext = executionContext.getFormContext();
    const rteControl = formContext.getControl("your_rte_field_name");
    
    if (rteControl) {
        const currentContent = rteControl.getValue();
        if (currentContent) {
            const processedContent = processIframeHtml(currentContent);
            rteControl.setValue(processedContent);
        }
    }
}

注意：将your_rte_field_name替换为实际的富文本字段逻辑名称。

内容的提问来源于stack exchange，提问作者Leth