Outlook 加载项 - 插入 HTML 和背景图片

Question

我有一个 outlook 加载项，可以将 HTML 插入到约会中。这可以通过调用来完成：

item.body.setSelectedDataAsync

我的问题是我试图插入 HTML 和背景图片。这在浏览器中使用 Outlook 时工作正常，但 Outlook 客户端需要使用 VML 的解决方法，如下所述： https://www.emailonacid.com/blog/article/email-development/emailology_vector_markup_language_and_backgrounds

我想 item.body.setSelectedDataAsync 从传递给 insert?HTML 的 HTML 中删除了 VML 所需的注释（如 <!--[if gte mso 9]> ）？

如何从适用于不同 Outlook 版本（浏览器和客户端）的加载项添加 HTML 背景图像？

下面是用于插入 HTML:

的 javascript 代码示例

let  htmlToInsert = '<table cellpadding="0" cellspacing="0" border="0" width="' + imageWidth + '" >';
    htmlToInsert += '<tr><td style="text-align: center; font-size: x-large">' + this.props.roomMap.mapTitle + '</td></tr>';
    htmlToInsert += '<tr><td valign="top" style="min-height:' + imageHeight + 'px;height:' + imageHeight + 'px; background-repeat: no-repeat; background-position: center bottom; width:' + imageWidth +';min-height:' + imageHeight + 'px;height:' + imageHeight + 'px;" background="' + this.props.roomMap.thumbnailUrl + '">';
    htmlToInsert += '<!--[if gte mso 9]>';
    htmlToInsert += '<v:rect style="width:' + imageWidth + 'px;height:' + imageHeight + 'px;" strokecolor="none">';
    htmlToInsert += '<v:fill type="tile" src="'+ this.props.roomMap.thumbnailUrl +'" /></v:fill>';
    htmlToInsert += '</v:rect>';
    htmlToInsert += '<v:shape id="NameHere" style="position:absolute;width:' + imageWidth + 'px;height:' + imageHeight + 'px;">';
    htmlToInsert += '<![endif]-->';
    htmlToInsert += '<img src="https://www.meetingroommap.net/images/marker.png"/ style="margin-left:' + markerX + 'px; margin-top:' + markerY + 'px">';
    htmlToInsert += '<!--[if gte mso 9]>';
    htmlToInsert += '</v:shape>';
    htmlToInsert += '<![endif]-->';
    htmlToInsert += '</td></tr>';
    htmlToInsert += '<tr><td style="text-align: center; font-size: xx-small">Powered by <a target="_blank" href="https://www.meetingroommap.net" >www.MeetingRoomMap.net</a></td></tr>';
    htmlToInsert += '</table>';


    console.log(htmlToInsert);
    item.body.setSelectedDataAsync(
        htmlToInsert,
        { coercionType: Office.CoercionType.Html, 
        asyncContext: { } },
        function (asyncResult) {
            if (asyncResult.status === Office.AsyncResultStatus.Failed){
                    console.log("Error calling item.body.setSelectedDataAsync: " + asyncResult.error.message);
            }
            else {
                // Successfully set data in item body.
            }
        });

Answer 1

感谢您的反馈。经过进一步调查，似乎没有很好的解决方法来实现您的场景。我们不断了解加载项开发人员的新要求，这有助于我们在平台上实现出色的场景。我们在用户语音页面上跟踪 Outlook 加载项功能请求。请在那里添加您的请求。在我们进行规划过程时，还会考虑用户语音的特征。

Link 转至用户语音：https://officespdev.uservoice.com/forums/224641-general/category/131778-outlook-add-ins。

再次感谢您的反馈，
Outlook 加载项工程团队

Outlook 加载项 - 插入 HTML 和背景图片

Outlook add-in - Insert HTML with background image

html

vml

outlook-addin

outlook-web-addins