如何使用JavaScript Office API在Word加载项的光标位置插入HTML？

问题说明 #

现有代码通过Word.InsertLocation.end参数插入HTML表格时，表格会被追加到文档末尾，需要调整为在光标选中的位置插入。

修改方案 #

核心调整是将insertHtml方法的插入位置参数从Word.InsertLocation.end改为Word.InsertLocation.replace：

• Word.InsertLocation.end是在目标对象（此处为内容控件）的现有内容末尾追加内容
• Word.InsertLocation.replace会直接替换目标对象的内容，而内容控件是在光标选中位置创建的，替换其内容就等同于在光标位置插入表格

同时修正原HTML代码中的一处语法错误：第二个<td>的style属性里遗漏了border-left:前缀，导致边框样式失效。

修正后的完整代码 #

async function Insert2ColumnTable() {
    try {
        await Word.run(async (context) => {
            const range = context.document.getSelection();
            const contentControl = range.insertContentControl();
            contentControl.tag = "my-custom-tag";
            // 设置内容控件为隐藏外观
            contentControl.appearance = Word.ContentControlAppearance.hidden;
            contentControl.insertHtml(
                ` <table style="width: 100%;border-collapse:collapse;border:none;">
                    <tbody>
                        <tr>
                             <td style="width: 50%;border-top: 1pt solid black;border-right: 1pt solid black;border-bottom: 1pt solid black;border-image: initial;border-left: 1pt solid black;padding: 0in 5.4pt;vertical-align: top;">
                                <p style='margin:0in;text-align:center;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-weight;'>&nbsp;</p>
                            </td>
                            <td style="width: 50%;border-top: 1pt solid black;border-right: 1pt solid black;border-bottom: 1pt solid black;border-image: initial;border-left: 1pt solid black;padding: 0in 5.4pt;vertical-align: top;">
                                <p style='margin:0in;text-align:center;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-weight;'>&nbsp;</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                `,
                Word.InsertLocation.replace // 改为替换模式，在光标位置插入表格
            );
            await context.sync();
        });
        
    } catch (error) {
        console.error(error);
    }
};

简化方案（无需内容控件） #

如果不需要使用内容控件，可直接在选中的光标范围插入HTML，代码更简洁：

async function Insert2ColumnTable() {
    try {
        await Word.run(async (context) => {
            const range = context.document.getSelection();
            range.insertHtml(
                ` <table style="width: 100%;border-collapse:collapse;border:none;">
                    <tbody>
                        <tr>
                             <td style="width: 50%;border-top: 1pt solid black;border-right: 1pt solid black;border-bottom: 1pt solid black;border-image: initial;border-left: 1pt solid black;padding: 0in 5.4pt;vertical-align: top;">
                                <p style='margin:0in;text-align:center;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-weight;'>&nbsp;</p>
                            </td>
                            <td style="width: 50%;border-top: 1pt solid black;border-right: 1pt solid black;border-bottom: 1pt solid black;border-image: initial;border-left: 1pt solid black;padding: 0in 5.4pt;vertical-align: top;">
                                <p style='margin:0in;text-align:center;font-size:16px;font-family:"Calibri",sans-serif;color:black;font-weight;'>&nbsp;</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                `,
                Word.InsertLocation.replace
            );
            await context.sync();
        });
        
    } catch (error) {
        console.error(error);
    }
};

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