Home how to insert html where is my cursor in word add-in using javascript office api?

Questions

how to insert html where is my cursor in word add-in using javascript office api?

October 7, 2023

using this I am Inserting 2 columns table with html. using "Word.InsertLocation.end" this is inserting html to end I want where my cursor clicked insert Html on that location.

async function Insert2ColumnTable() {
    try {
        await Word.run(async (context) => {
            const range = context.document.getSelection();
            const contentControl = range.insertContentControl();
            contentControl.tag = "my-custom-tag";
            // Set the appearance of the content control to "Hidden"
            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:bold;'>&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;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:bold;'>&nbsp;</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                `,
                Word.InsertLocation.end
            );
            await context.sync();
        });
        
    } catch (error) {
        console.error(error);
    }

};

>Solution :

only use this " Word.InsertLocation.replace" its working.

async function Insert2ColumnTable() {
    try {
        await Word.run(async (context) => {
            const range = context.document.getSelection();
            const contentControl = range.insertContentControl();
            contentControl.tag = "my-custom-tag";
            // Set the appearance of the content control to "Hidden"
            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:bold;'>&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;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:bold;'>&nbsp;</p>
                            </td>
                        </tr>
                    </tbody>
                </table>
                `,
                Word.InsertLocation.replace
            );
            await context.sync();
        });
        
    } catch (error) {
        console.error(error);
    }

};