Lernprogramm: Erstellen eines Word-Aufgabenbereich-Add-Ins

  • Artikel

In diesem Lernprogramm erstellen Sie ein Word-Aufgabenbereich-Add-In mit folgenden Funktionen:

  • Einfügen eines Textbereichs
  • Formatieren von Text
  • Ersetzen von Text und Einfügen von Text an verschiedenen Stellen
  • Einfügen von Bildern, HTML-Code und Tabellen
  • Erstellen und Aktualisieren von Inhaltssteuerelementen

Tipp

Wenn Sie bereits den Schnellstart Erstellen eines Word-Aufgabenbereich-Add-Ins abgeschlossen haben und dieses Projekt als Ausgangspunkt für dieses Lernprogramm verwenden möchten, wechseln Sie direkt zum Abschnitt Textbereich einfügen , um dieses Lernprogramm zu starten.

Wenn Sie eine vollständige Version dieses Tutorials benötigen, besuchen Sie das Repository mit Den Office-Add-Ins-Beispielen auf GitHub.

Voraussetzungen

  • Node.js (die aktuellsteLTS-Version). Besuchen Sie die Node.js Website , um die richtige Version für Ihr Betriebssystem herunterzuladen und zu installieren.

  • Die neueste Version von Yeoman und des Yeoman-Generators für Office-Add-Ins. Um diese Tools global zu installieren, führen Sie den folgenden Befehl an der Eingabeaufforderung aus.

    npm install -g yo generator-office

    Hinweis

    Selbst wenn Sie bereits den Yeoman-Generator installiert haben, empfehlen wir Ihnen, das npm-Paket auf die neueste Version zu aktualisieren.

  • Office in Verbindung mit einem Microsoft 365-Abonnement (einschließlich Office im Internet).

    Hinweis

    Wenn Sie noch nicht über Office verfügen, können Sie sich über das Microsoft 365-Entwicklerprogramm für ein Microsoft 365 E5-Entwicklerabonnement qualifizieren. Weitere Informationen finden Sie in den häufig gestellten Fragen. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

Erstellen eines Add-In-Projekts

Führen Sie den folgenden Befehl aus, um ein Add-In-Projekt mit dem Yeoman-Generator zu erstellen: Ein Ordner, der das Projekt enthält, wird dem aktuellen Verzeichnis hinzugefügt.

yo office

Hinweis

Wenn Sie den yo office-Befehl ausführen, werden möglicherweise Eingabeaufforderungen zu den Richtlinien für die Datensammlung von Yeoman und den CLI-Tools des Office-Add-In angezeigt. Verwenden Sie die bereitgestellten Informationen, um auf die angezeigten Eingabeaufforderungen entsprechend zu reagieren.

Wenn Sie dazu aufgefordert werden, geben Sie die folgenden Informationen an, um das Add-In-Projekt zu erstellen:

  • Wählen Sie einen Projekttyp aus:Office Add-in Task Pane project
  • Wählen Sie einen Skripttyp aus:JavaScript
  • Wie möchten Sie Ihr Add-In benennen?My Office Add-in
  • Welche Office-Clientanwendung möchten Sie unterstützen?Word

Die vorherigen Eingabeaufforderungen und Antworten, die dem Yeoman-Generator in einer Befehlszeilenschnittstelle gegeben wurden.

Nach Abschluss des Assistenten erstellt der Generator erstellt das Projekt und installiert unterstützende Node-Komponenten.

Hinweis

Wenn Sie Node.js Version 20.0.0 oder höher verwenden, wird möglicherweise eine Warnung angezeigt, wenn der Generator die Installation ausführt, die über eine nicht unterstützte Engine verfügt. Wir arbeiten an einer Lösung dafür. In der Zwischenzeit wirkt sich die Warnung nicht auf den Generator oder das von Ihnen generierte Projekt aus, sodass sie ignoriert werden kann.

Tipp

Die vom Yeoman-Generator nach der Erstellung des Add-In-Projekts unter Nächste Schritte bereitgestellten Anweisungen können Sie ignorieren. Die Schritt-für-Schritt-Anleitungen in diesem Artikel enthalten alle Anweisungen, die Sie zum Durchführen dieses Tutorials benötigen.

Einfügen eines Bereichs von Text

In diesem Schritt des Lernprogramms testen Sie programmgesteuert, ob Ihr Add-In die aktuelle Word-Version des Benutzers unterstützt. Anschließend fügen Sie einen Absatz in das Dokument ein.

Programmieren des Add-Ins

  1. Öffnen Sie das Projekt in einem Code-Editor.

  2. Öffnen Sie die Datei ./src/taskpane/taskpane.html. Diese Datei enthält das HTML-Markup für den Aufgabenbereich.

  3. Suchen Sie das <main>-Element und löschen Sie alle Zeilen, die nach dem öffnenden <main>-Tag und vor dem schließenden </main>-Tag angezeigt werden.

  4. Fügen Sie unmittelbar nach dem öffnenden <main>-Tag das folgende Markup hinzu.

    <button class="ms-Button" id="insert-paragraph">Insert Paragraph</button><br/><br/>

  5. Öffnen Sie die Datei ./src/taskpane/taskpane.js. Diese Datei enthält den Office-JavaScript-API-Code, der die Interaktion zwischen dem Aufgabenbereich und der Office-Clientanwendung erleichtert.

  6. Entfernen Sie alle Verweise auf die Schaltfläche run und die Funktion run(), indem Sie die folgenden Aktionen ausführen:

    • Suchen und löschen Sie die Zeile document.getElementById("run").onclick = run;.

    • Suchen und löschen Sie die gesamte run()-Funktion.

  7. Suchen Sie im Funktionsaufruf Office.onReady die Zeile if (info.host === Office.HostType.Word) {, und fügen Sie den folgenden Code unmittelbar nach dieser Zeile hinzu. Hinweis:

    • Dieser Code fügt einen Ereignishandler für die insert-paragraph Schaltfläche hinzu.
    • Die insertParagraph Funktion wird in einen Aufruf von tryCatch eingeschlossen (beide Funktionen werden im nächsten Schritt hinzugefügt). Dadurch können alle von der Office JavaScript-API-Ebene generierten Fehler getrennt von Ihrem Dienstcode behandelt werden.
    // Assign event handlers and other initialization logic.
document.getElementById("insert-paragraph").onclick = () => tryCatch(insertParagraph);

  8. Fügen Sie am Ende der Datei die folgenden Funktionen hinzu. Hinweis:

    • Ihre Word.js Geschäftslogik wird der an Word.runübergebenen Funktion hinzugefügt. Diese Logik wird nicht sofort ausgeführt. Stattdessen wird es zu einer Warteschlange ausstehender Befehle hinzugefügt.

    • Die context.sync-Methode sendet alle Befehle in der Warteschlange zur Ausführung an Word.

    • Die tryCatch Funktion wird von allen Funktionen verwendet, die über den Aufgabenbereich mit der Arbeitsmappe interagieren. Das Abfangen von Office-JavaScript-Fehlern auf diese Weise ist eine bequeme Möglichkeit, nicht abgefangene Fehler generisch zu behandeln.

    async function insertParagraph() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to insert a paragraph into the document.

        await context.sync();
    });
}

/** Default helper for invoking an action and handling errors. */
async function tryCatch(callback) {
    try {
        await callback();
    } catch (error) {
        // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
        console.error(error);
    }
}

  9. Ersetzen Sie in der insertParagraph()-Funktion TODO1 durch den folgenden Code. Hinweis:

    • Der erste Parameter der insertParagraph-Methode ist der Text für den neuen Absatz.

    • Der zweite Parameter ist die Stelle im Text, an der der Absatz eingefügt wird. Weitere Optionen zum Einfügen eines Absatzes, wenn das übergeordnete Objekt der Text ist, sind "End" und "Replace".

    const docBody = context.document.body;
docBody.insertParagraph("Office has several versions, including Office 2016, Microsoft 365 subscription, and Office on the web.",
                        Word.InsertLocation.start);

  10. Speichern Sie alle Änderungen am Projekt.

Testen des Add-Ins

  1. Führen Sie die folgenden Schritte aus, um den lokalen Webserver zu starten und das Add-In querzuladen.

    Hinweis

    Office-Add-Ins sollten auch während der Entwicklung HTTPS und nicht HTTP verwenden. Wenn Sie aufgefordert werden, ein Zertifikat zu installieren, nachdem Sie einen der folgenden Befehle ausgeführt haben, akzeptieren Sie die Eingabeaufforderung, um das Zertifikat zu installieren, das der Yeoman-Generator bereitstellt. Möglicherweise ist es auch erforderlich, dass Sie Ihre Eingabeaufforderung oder Ihr Terminal als Administrator ausführen, damit die Änderungen vorgenommen werden können.

    Tipp

    Wenn Sie Ihr Add-In auf einem Mac testen, führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, bevor Sie fortfahren. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet.

    npm run dev-server

    • Führen Sie zum Testen Ihres Add-Ins in Word den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Dadurch wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird) und Word mit geladenem Add-In geöffnet.

      npm start

    • Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um Ihr Add-In in Word im Web zu testen. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet. Ersetzen Sie "{url}" durch die URL eines Word-Dokuments auf Ihrem OneDrive oder einer SharePoint-Bibliothek, für die Sie Berechtigungen haben.

      Hinweis

      Wenn Sie auf einem Mac entwickeln, schließen Sie die {url} in einfache Anführungszeichen ein. Tun Sie dies nicht unter Windows.

      npm run start:web -- --document {url}

      Es folgen einige Beispiele.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Wenn Ihr Add-In das Dokument nicht querladen wird, laden Sie es manuell quer, indem Sie die Anweisungen unter Manuelles Querladen von Add-Ins in Office im Web befolgen.

  2. Wenn der Aufgabenbereich "Mein Office-Add-In" in Word noch nicht geöffnet ist, wählen Sie die Registerkarte Start und dann im Menüband die Schaltfläche Aufgabenbereich anzeigen aus, um den Add-In-Aufgabenbereich zu öffnen.

    Die Schaltfläche Aufgabenbereich anzeigen ist in Word hervorgehoben.

  3. Wählen Sie im Aufgabenbereich die Schaltfläche Absatz einfügen.

  4. Nehmen Sie im Absatz eine Änderung vor.

  5. Wählen Sie neuerlich die Schaltfläche Absatz einfügen. Beachten Sie, dass der neue Absatz über dem vorherigen aufscheint, da die insertParagraph-Methode Text am Anfang des Dokumenttexts einfügt.

    Die Schaltfläche Absatz einfügen im Add-In.

Formatieren von Text

In diesem Schritt des Lernprogramms wenden Sie eine integrierte Formatvorlage auf Text an, Sie wenden eine benutzerdefinierte Formatvorlage auf Text an und Sie ändern die Schriftart des Texts.

Anwenden einer integrierten Formatvorlage auf Text

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche insert-paragraph, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="apply-style">Apply Style</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche insert-paragraph einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("apply-style").onclick = () => tryCatch(applyStyle);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function applyStyle() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to style text.

        await context.sync();
    });
}

  6. Ersetzen Sie in der applyStyle()-Funktion TODO1 durch den folgenden Code. Beachten Sie, dass der Code eine Formatvorlage auf einen Absatz anwendet, Formatvorlagen aber auch auf Textbereiche angewendet werden können.

    const firstParagraph = context.document.body.paragraphs.getFirst();
firstParagraph.styleBuiltIn = Word.Style.intenseReference;

Anwenden einer benutzerdefinierten Formatvorlage auf Text

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche apply-style, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="apply-custom-style">Apply Custom Style</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche apply-style einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("apply-custom-style").onclick = () => tryCatch(applyCustomStyle);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function applyCustomStyle() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to apply the custom style.

        await context.sync();
    });
}

  6. Ersetzen Sie in der applyCustomStyle()-Funktion TODO1 durch den folgenden Code. Beachten Sie, dass der Code eine benutzerdefinierte Formatvorlage anwendet, die noch nicht vorhanden ist. Sie erstellen eine Formatvorlage mit dem Namen MyCustomStyle im Schritt Testen des Add-Ins.

    const lastParagraph = context.document.body.paragraphs.getLast();
lastParagraph.style = "MyCustomStyle";

  7. Speichern Sie alle Änderungen am Projekt.

Ändern der Schriftart von Text

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche apply-custom-style, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="change-font">Change Font</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche apply-custom-style einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("change-font").onclick = () => tryCatch(changeFont);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function changeFont() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to apply a different font.

        await context.sync();
    });
}

  6. Ersetzen Sie in der changeFont()-Funktion TODO1 durch den folgenden Code. Beachten Sie, dass der Code einen Verweis auf den zweiten Absatz mithilfe der ParagraphCollection.getFirst-Methode, verkettet mit der Paragraph.getNext-Methode abruft.

    const secondParagraph = context.document.body.paragraphs.getFirst().getNext();
secondParagraph.font.set({
        name: "Courier New",
        bold: true,
        size: 18
    });

  7. Speichern Sie alle Änderungen am Projekt.

Testen des Add-Ins

  1. Wenn der lokale Webserver bereits ausgeführt wird und Ihr Add-In bereits in Word geladen ist, fahren Sie mit Schritt 2 fort. Starten Sie andernfalls den lokalen Webserver, und laden Sie das Add-In quer.

    • Führen Sie zum Testen Ihres Add-Ins in Word den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Dadurch wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird) und Word mit geladenem Add-In geöffnet.

      npm start

    • Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um Ihr Add-In in Word im Web zu testen. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet. Ersetzen Sie "{url}" durch die URL eines Word-Dokuments auf Ihrem OneDrive oder einer SharePoint-Bibliothek, für die Sie Berechtigungen haben.

      Hinweis

      Wenn Sie auf einem Mac entwickeln, schließen Sie die {url} in einfache Anführungszeichen ein. Tun Sie dies nicht unter Windows.

      npm run start:web -- --document {url}

      Es folgen einige Beispiele.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Wenn Ihr Add-In das Dokument nicht querladen wird, laden Sie es manuell quer, indem Sie die Anweisungen unter Manuelles Querladen von Add-Ins in Office im Web befolgen.

  2. Wenn der Add-In-Aufgabenbereich noch nicht in Word geöffnet ist, wechseln Sie zur Registerkarte Start, und wählen Sie im Menüband die Schaltfläche Aufgabenbereich anzeigen aus, um ihn zu öffnen.

  3. Achten Sie darauf, dass mindestens drei Absätze im Dokument vorhanden sind. Sie können die Schaltfläche Absatz einfügen drei Mal auswählen. Überprüfen Sie sorgfältig, ob am Ende des Dokuments kein leerer Absatz vorhanden ist. Falls vorhanden, löschen Sie sie.

  4. Erstellen Sie in Word eine benutzerdefinierte Formatvorlage namens „MyCustomStyle“. Sie kann beliebig formatiert sein.

  5. Wählen Sie die Schaltfläche Stil anwenden. Der erste Absatz wird mit der integrierten Formatvorlage Intensiver Verweis formatiert.

  6. Wählen Sie die Schaltfläche Benutzerdefinierten Stil anwenden. Der letzte Absatz wird mit Ihrer benutzerdefinierten Formatvorlage formatiert. (Wenn nichts zu geschehen scheint, ist der letzte Absatz möglicherweise leer. Wenn ja, fügen Sie ihr Text hinzu.)

  7. Wählen Sie die Schaltfläche Schriftart ändern. Die Schriftart des zweiten Absatzes wird in 18 pt, fett, Courier New, geändert.

    Die Ergebnisse des Anwendens der Formatvorlagen und Schriftarten, die für die Add-In-Schaltflächen

Ersetzen und Einfügen von Text

In diesem Schritt des Lernprogramms fügen Sie Text innerhalb und außerhalb ausgewählter Textbereiche hinzu und ersetzen den Text eines ausgewählten Bereichs.

Hinzufügen von Text in einem Bereich

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche change-font, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="insert-text-into-range">Insert Abbreviation</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche change-font einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("insert-text-into-range").onclick = () => tryCatch(insertTextIntoRange);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function insertTextIntoRange() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to insert text into a selected range.

        // TODO2: Load the text of the range and sync so that the
        //        current range text can be read.

        // TODO3: Queue commands to repeat the text of the original
        //        range at the end of the document.

        await context.sync();
    });
}

  6. Ersetzen Sie in der insertTextIntoRange()-Funktion TODO1 durch den folgenden Code. Hinweis:

    • Die Funktion soll die Abkürzung ["(M365)"] am Ende des Bereichs einfügen, dessen Text "Microsoft 365" lautet. Vereinfachend wird davon ausgegangen, dass die Zeichenfolge vorhanden ist und der Benutzer sie ausgewählt hat.

    • Der erste Parameter der Range.insertText-Methode ist die Zeichenfolge, die in das Range-Objekt eingefügt werden soll.

    • Der zweite Parameter gibt an, wo im Bereich der zusätzliche Text eingefügt werden soll. Neben "End" lauten die anderen möglichen Optionen: "Start", "Before", "After" und "Replace".

    • Der Unterschied zwischen "End" und "After" ist, dass "End" den neuen Text am Ende des vorhandenen Bereichs einfügt, während "After" einen neuen Bereich mit der Zeichenfolge erstellt und den neuen Bereich nach dem vorhandenen Bereich einfügt. Ebenso fügt "Start" Text am Anfang des vorhandenen Bereichs ein, während "Vor" einen neuen Bereich einfügt. "Replace" ersetzt den Text des vorhandenen Bereichs durch die Zeichenfolge im ersten Parameter.

    • Sie haben in einer früheren Phase des Tutorials gesehen, dass die insert* Methoden des Body-Objekts nicht über die Optionen "Vor" und "Nach" verfügen. Dies liegt daran, dass Sie Inhalte nicht außerhalb des Texts des Dokuments einfügen können.

    const doc = context.document;
const originalRange = doc.getSelection();
originalRange.insertText(" (M365)", Word.InsertLocation.end);

  7. Wir überspringen TODO2 bis zum nächsten Abschnitt. Ersetzen Sie in der insertTextIntoRange()-Funktion TODO3 durch den folgenden Code. Dieser Code ähnelt dem Code, den Sie in der ersten Phase des Lernprogramms erstellt haben, mit dem Unterschied, dass Sie jetzt einen neuen Absatz am Ende des Dokuments statt zu Beginn einfügen. Dieser neue Absatz zeigt, dass der neue Text jetzt Teil des ursprünglichen Bereichs ist.

    doc.body.insertParagraph("Original range: " + originalRange.text, Word.InsertLocation.end);

Hinzufügen von Code zum Abrufen von Dokumenteigenschaften in die Skriptobjekte des Aufgabenbereichs

In allen vorherigen Funktionen in diesem Tutorial haben Sie Befehle in die Warteschlange gestellt, um in das Office-Dokument zu schreiben . Jede Funktion endete mit einem Aufruf der context.sync()-Methode, die die Befehle in der Warteschlange zur Ausführung an das Dokument sendet. Der Code, den Sie im letzten Schritt hinzugefügt haben, ruft die originalRange.text-Eigenschaft auf. Dies ist ein wesentlicher Unterschied zu den früheren Funktionen, die Sie geschrieben haben, da das originalRange-Objekt nur ein Proxyobjekt ist, das im Skript Ihres Aufgabenbereichs vorhanden ist. Ihm ist der eigentliche Text des Bereichs im Dokument nicht bekannt, sodass die text-Eigenschaft keinen echten Wert haben kann. Es ist erforderlich, um zuerst den Textwert des Bereichs aus dem Dokument abzurufen und damit den Wert von originalRange.text festzulegen. Nur dann kann originalRange.text aufgerufen werden, ohne dass eine Ausnahme ausgelöst wird. Der Prozess des Abrufens besteht aus drei Schritten.

  1. Einen Befehl zum Laden der Eigenschaften, die Ihr Code lesen muss, in der Warteschlange einreihen (d.h. abrufen).

  2. Aufrufen der sync-Methode des Kontextobjekts, um den Befehl in der Warteschlange zur Ausführung an das Dokument zu senden und die angeforderten Informationen zurückzugeben.

  3. Da die sync-Methode asynchron ist, müssen Sie sicherstellen, dass sie abgeschlossen ist, bevor Ihr Code die Eigenschaften aufruft, die abgerufen wurden.

Der folgende Schritt muss immer dann ausgeführt werden, wenn Ihr Code Informationen aus dem Office-Dokument lesen muss.

  1. Ersetzen Sie in der insertTextIntoRange()-Funktion TODO2 durch den folgenden Code.

    originalRange.load("text");
await context.sync();

Wenn Sie fertig sind, sollte die gesamte Funktion wie folgt aussehen:

async function insertTextIntoRange() {
    await Word.run(async (context) => {

        const doc = context.document;
        const originalRange = doc.getSelection();
        originalRange.insertText(" (M365)", Word.InsertLocation.end);

        originalRange.load("text");
        await context.sync();

        doc.body.insertParagraph("Original range: " + originalRange.text, Word.InsertLocation.end);

        await context.sync();
    });
}

Hinzufügen von Text zwischen Bereichen

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche insert-text-into-range, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="insert-text-outside-range">Add Version Info</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche insert-text-into-range einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("insert-text-outside-range").onclick = () => tryCatch(insertTextBeforeRange);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function insertTextBeforeRange() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to insert a new range before the
        //        selected range.

        // TODO2: Load the text of the original range and sync so that the
        //        range text can be read and inserted.

    });
}

  6. Ersetzen Sie in der insertTextBeforeRange()-Funktion TODO1 durch den folgenden Code. Hinweis:

    • Die Funktion dient zum Hinzufügen eines Bereichs, dessen Text "Office 2019" lautet, vor dem Bereich mit dem Text "Microsoft 365". Es wird davon ausgegangen, dass die Zeichenfolge vorhanden ist und der Benutzer sie ausgewählt hat.

    • Der erste Parameter der Range.insertText-Methode ist die Zeichenfolge, die hinzugefügt werden soll.

    • Der zweite Parameter gibt an, wo im Bereich der zusätzliche Text eingefügt werden soll. Weitere Informationen zu den Positionsoptionen finden Sie in der vorherigen Erläuterung der insertTextIntoRange-Funktion.

    const doc = context.document;
const originalRange = doc.getSelection();
originalRange.insertText("Office 2019, ", Word.InsertLocation.before);

  7. Ersetzen Sie in der insertTextBeforeRange()-Funktion TODO2 durch den folgenden Code.

    originalRange.load("text");
await context.sync();

// TODO3: Queue commands to insert the original range as a
//        paragraph at the end of the document.

// TODO4: Make a final call of context.sync here and ensure
//        that it runs after the insertParagraph has been queued.

  8. Ersetzen Sie TODO3 durch den folgenden Code. Dieser neue Absatz zeigt, dass der neue Text nicht Teil des ursprünglich ausgewählten Bereichs ist. Der ursprüngliche Bereich enthält weiterhin nur den Text, den er enthielt, als er ausgewählt wurde.

    doc.body.insertParagraph("Current text of original range: " + originalRange.text, Word.InsertLocation.end);

  9. Ersetzen Sie TODO4 durch den folgenden Code.

    await context.sync();

Ersetzen des Texts eines Bereichs

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche insert-text-outside-range, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="replace-text">Change Quantity Term</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche insert-text-outside-range einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("replace-text").onclick = () => tryCatch(replaceText);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function replaceText() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to replace the text.

        await context.sync();
    });
}

  6. Ersetzen Sie in der replaceText()-Funktion TODO1 durch den folgenden Code. Beachten Sie, dass die Funktion vorgesehen ist, um die Zeichenfolge „several“ durch die Zeichenfolge "many" zu ersetzen. Vereinfachend wird davon ausgegangen, dass die Zeichenfolge vorhanden ist und der Benutzer sie ausgewählt hat.

    const doc = context.document;
const originalRange = doc.getSelection();
originalRange.insertText("many", Word.InsertLocation.replace);

  7. Speichern Sie alle Änderungen am Projekt.

Testen des Add-Ins

  1. Wenn der lokale Webserver bereits ausgeführt wird und Ihr Add-In bereits in Word geladen ist, fahren Sie mit Schritt 2 fort. Starten Sie andernfalls den lokalen Webserver, und laden Sie das Add-In quer.

    • Führen Sie zum Testen Ihres Add-Ins in Word den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Dadurch wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird) und Word mit geladenem Add-In geöffnet.

      npm start

    • Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um Ihr Add-In in Word im Web zu testen. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet. Ersetzen Sie "{url}" durch die URL eines Word-Dokuments auf Ihrem OneDrive oder einer SharePoint-Bibliothek, für die Sie Berechtigungen haben.

      Hinweis

      Wenn Sie auf einem Mac entwickeln, schließen Sie die {url} in einfache Anführungszeichen ein. Tun Sie dies nicht unter Windows.

      npm run start:web -- --document {url}

      Es folgen einige Beispiele.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Wenn Ihr Add-In das Dokument nicht querladen wird, laden Sie es manuell quer, indem Sie die Anweisungen unter Manuelles Querladen von Add-Ins in Office im Web befolgen.

  2. Wenn der Add-In-Aufgabenbereich noch nicht in Word geöffnet ist, wechseln Sie zur Registerkarte Start, und wählen Sie im Menüband die Schaltfläche Aufgabenbereich anzeigen aus, um ihn zu öffnen.

  3. Wählen Sie im Aufgabenbereich die Schaltfläche Absatz einfügen, um sicherzustellen, dass sich ein Absatzes am Anfang des Dokuments befindet.

  4. Wählen Sie im Dokument den Ausdruck "Microsoft 365-Abonnement" aus. Achten Sie darauf, nicht das vorhergehende Leerzeichen oder nachfolgende Komma in die Markierung einzuschließen.

  5. Wählen Sie die Schaltfläche Abkürzung einfügen. Beachten Sie, dass " (M365)" hinzugefügt wird. Beachten Sie außerdem, dass am Ende des Dokuments ein neuer Absatz mit dem gesamten erweiterten Text hinzugefügt wird, da die neue Zeichenfolge zum vorhandenen Bereich hinzugefügt wurde.

  6. Wählen Sie im Dokument den Ausdruck „Microsoft 365“ aus. Achten Sie darauf, nicht das vorhergehende oder nachfolgende Leerzeichen in die Markierung einzuschließen.

  7. Wählen Sie die Schaltfläche Versionsinformationen hinzufügen. Beachten Sie, dass "Office 2019" zwischen "Office 2016" und "Microsoft 365" eingefügt wird. Beachten Sie außerdem, dass am Ende des Dokuments ein neuer Absatz hinzugefügt wird, der aber nur den ursprünglich ausgewählten Text enthält, da die neue Zeichenfolge nicht dem ursprünglichen Bereich hinzugefügt wurde, sondern zu einem neuen Bereich wurde.

  8. Wählen Sie im Dokument den Ausdruck „Mehrere“ aus. Achten Sie darauf, nicht das vorhergehende oder nachfolgende Leerzeichen in die Markierung einzuschließen.

  9. Wählen Sie die Schaltfläche Mengenterm ändern. Beachten Sie, dass "many" den markierten Text ersetzt.

    Die Ergebnisse der Auswahl der Add-In-Schaltflächen Abkürzung einfügen, Versionsinformationen hinzufügen und Mengenausdruck ändern.

Einfügen von Bildern, HTML-Code und Tabellen

In diesem Schritt des Lernprogramms erfahren Sie, wie Sie Bilder, Tabellen und HTML-Code in das Dokument einfügen können.

Definieren eines Bilds

Führen Sie die folgenden Schritte aus, um das Bild zu definieren, das Sie in das Dokument im nächsten Teil dieses Lernprogramms einfügen möchten.

  1. Erstellen Sie im Stamm des Projekts eine neue Datei namens base64Image.js.

  2. Öffnen Sie die Datei base64Image.js , und fügen Sie den folgenden Code hinzu, um die Base64-codierte Zeichenfolge anzugeben, die ein Bild darstellt.

    export const base64Image =
    "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";

Einfügen eines Bilds

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche replace-text, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="insert-image">Insert Image</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie den Funktionsaufruf Office.onReady oben in der Datei und fügen Sie den folgenden Code unmittelbar nach dieser Zeile hinzu. Mit diesem Code wird die zuvor in der Datei ./base64Image.js definierte Variable importiert.

    import { base64Image } from "../../base64Image";

  5. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche replace-text einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("insert-image").onclick = () => tryCatch(insertImage);

  6. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function insertImage() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to insert an image.

        await context.sync();
    });
}

  7. Ersetzen Sie in der insertImage()-Funktion TODO1 durch den folgenden Code. Beachten Sie, dass diese Zeile das Base64-codierte Bild am Ende des Dokuments einfügt. (Das Paragraph -Objekt verfügt auch über eine insertInlinePictureFromBase64 -Methode und andere insert* Methoden. Ein Beispiel finden Sie im folgenden Abschnitt "HTML einfügen".)

    context.document.body.insertInlinePictureFromBase64(base64Image, Word.InsertLocation.end);

HTML einfügen

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche insert-image, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="insert-html">Insert HTML</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche insert-image einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("insert-html").onclick = () => tryCatch(insertHTML);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function insertHTML() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to insert a string of HTML.

        await context.sync();
    });
}

  6. Ersetzen Sie in der insertHTML()-Funktion TODO1 durch den folgenden Code. Hinweis:

    • Die erste Zeile Fügt einen leeren Absatz am Ende des Dokuments hinzu.

    • Die zweite Zeile fügt eine HTML-Zeichenfolge am Ende des Absatzes ein. insbesondere zwei Absätze, einer mit der Schriftart Verdana formatiert, der andere mit der Standardformatvorlage des Word Dokuments. (Wie Sie in der insertImage-Methode gesehen haben, hat das context.document.body-Objekt auch die insert*-Methoden.)

    const blankParagraph = context.document.body.paragraphs.getLast().insertParagraph("", Word.InsertLocation.after);
blankParagraph.insertHtml('<p style="font-family: verdana;">Inserted HTML.</p><p>Another paragraph</p>', Word.InsertLocation.end);

Einfügen einer Tabelle

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche insert-html, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="insert-table">Insert Table</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche insert-html einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("insert-table").onclick = () => tryCatch(insertTable);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function insertTable() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to get a reference to the paragraph
        //        that will precede the table.

        // TODO2: Queue commands to create a table and populate it with data.

        await context.sync();
    });
}

  6. Ersetzen Sie in der insertTable()-Funktion TODO1 durch den folgenden Code. Beachten Sie, dass diese Zeile die ParagraphCollection.getFirst -Methode verwendet, um einen Verweis auf den ersten Absatz abzurufen, und dann die Paragraph.getNext -Methode verwendet, um einen Verweis auf den zweiten Absatz abzurufen.

    const secondParagraph = context.document.body.paragraphs.getFirst().getNext();

  7. Ersetzen Sie in der insertTable()-Funktion TODO2 durch den folgenden Code. Hinweis:

    • Die ersten beiden Parameter der insertTable-Methode geben die Anzahl der Zeilen und Spalten an.

    • Der dritte Parameter gibt an, wo die Tabelle eingefügt werden soll, in diesem Fall nach dem Absatz.

    • Der vierte Parameter ist ein zweidimensionales Array, das die Werte der Tabellenzellen festlegt.

    • Die Tabelle hat die einfache Standardformatierung, aber die insertTable-Methode gibt ein Table-Objekt mit vielen Elementen zurück, von denen einige zum Formatieren der Tabelle verwendet werden.

    const tableData = [
        ["Name", "ID", "Birth City"],
        ["Bob", "434", "Chicago"],
        ["Sue", "719", "Havana"],
    ];
secondParagraph.insertTable(3, 3, Word.InsertLocation.after, tableData);

  8. Speichern Sie alle Änderungen am Projekt.

Testen des Add-Ins

  1. Wenn der lokale Webserver bereits ausgeführt wird und Ihr Add-In bereits in Word geladen ist, fahren Sie mit Schritt 2 fort. Starten Sie andernfalls den lokalen Webserver, und laden Sie das Add-In quer.

    • Führen Sie zum Testen Ihres Add-Ins in Word den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Dadurch wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird) und Word mit geladenem Add-In geöffnet.

      npm start

    • Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um Ihr Add-In in Word im Web zu testen. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet. Ersetzen Sie "{url}" durch die URL eines Word-Dokuments auf Ihrem OneDrive oder einer SharePoint-Bibliothek, für die Sie Berechtigungen haben.

      Hinweis

      Wenn Sie auf einem Mac entwickeln, schließen Sie die {url} in einfache Anführungszeichen ein. Tun Sie dies nicht unter Windows.

      npm run start:web -- --document {url}

      Es folgen einige Beispiele.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Wenn Ihr Add-In das Dokument nicht querladen wird, laden Sie es manuell quer, indem Sie die Anweisungen unter Manuelles Querladen von Add-Ins in Office im Web befolgen.

  2. Wenn der Add-In-Aufgabenbereich noch nicht in Word geöffnet ist, wechseln Sie zur Registerkarte Start, und wählen Sie im Menüband die Schaltfläche Aufgabenbereich anzeigen aus, um ihn zu öffnen.

  3. Wählen Sie im Aufgabenbereich mindestens dreimal die Schaltfläche Absatz einfügen, um sicherzustellen, dass es ein paar Absätze im Dokument gibt.

  4. Wählen Sie die Schaltfläche Bild einfügen, und beachten Sie, dass ein Bild am Ende des Dokuments eingefügt wird.

  5. Wählen Sie die Schaltfläche HTML einfügen aus, und beachten Sie, dass zwei Absätze am Ende des Dokuments eingefügt werden und dass der erste die Verdana-Schriftart aufweist.

  6. Wählen Sie die Schaltfläche Tabelle einfügen, und beachten Sie, dass eine Tabelle nach dem zweiten Absatz eingefügt wird.

    Die Ergebnisse der Auswahl der Add-In-Schaltflächen Bild einfügen, HTML einfügen und Tabelle einfügen.

Erstellen und Aktualisieren von Inhaltssteuerelementen

In diesem Schritt des Lernprogramms erfahren Sie, wie Sie Rich-Text-Inhaltssteuerelemente im Dokument erstellen und dann Inhalte in den Steuerelementen einfügen und ersetzen.

Hinweis

Bevor Sie mit diesem Schritt des Lernprogramms beginnen, empfehlen wir Ihnen, Rich-Text-Inhaltssteuerelemente über die Word-Benutzeroberfläche zu erstellen und zu ändern, damit Sie sich mit den Steuerelementen und deren Eigenschaften vertraut machen können. Einzelheiten hierzu finden Sie unter Erstellen von Formularen, die in Word ausgefüllt oder gedruckt werden können.

Erstellen eines Inhaltssteuerelements

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche insert-table, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="create-content-control">Create Content Control</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche insert-table einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("create-content-control").onclick = () => tryCatch(createContentControl);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function createContentControl() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to create a content control.

        await context.sync();
    });
}

  6. Ersetzen Sie in der createContentControl()-Funktion TODO1 durch den folgenden Code. Hinweis:

    • Dieser Code soll den Ausdruck "Microsoft 365" in einem Inhaltssteuerelement umschließen. Vereinfachend wird davon ausgegangen, dass die Zeichenfolge vorhanden ist und der Benutzer sie ausgewählt hat.

    • Die ContentControl.title-Eigenschaft gibt den sichtbaren Titel des Inhaltssteuerelements an.

    • Die ContentControl.tag-Eigenschaft gibt ein Tag an, mit dem ein Verweis auf ein Inhaltssteuerelement mithilfe der ContentControlCollection.getByTag-Methode abgerufen werden kann, die Sie in einer späteren Funktion verwenden werden.

    • Die ContentControl.appearance-Eigenschaft gibt die visuelle Darstellung des Steuerelements an. Der Wert "Tags" bedeutet, dass das Steuerelement in öffnende und schließende Tags eingeschlossen wird und das öffnende Tag den Titel des Inhaltssteuerelements enthält. Andere mögliche Werte sind "BoundingBox" und "None".

    • Die ContentControl.color-Eigenschaft gibt die Farbe der Tags oder des Rahmens des umgebenden Felds an.

    const serviceNameRange = context.document.getSelection();
const serviceNameContentControl = serviceNameRange.insertContentControl();
serviceNameContentControl.title = "Service Name";
serviceNameContentControl.tag = "serviceName";
serviceNameContentControl.appearance = "Tags";
serviceNameContentControl.color = "blue";

Ersetzen des Inhalts des Inhaltssteuerelements

  1. Öffnen Sie die Datei ./src/taskpane/taskpane.html.

  2. Suchen Sie das <button>-Element für die Schaltfläche create-content-control, und fügen Sie nach dieser Zeile das folgende Markup hinzu.

    <button class="ms-Button" id="replace-content-in-control">Rename Service</button><br/><br/>

  3. Öffnen Sie die Datei ./src/taskpane/taskpane.js.

  4. Suchen Sie im Funktionsaufruf Office.onReady die Zeile, die der Schaltfläche create-content-control einen Click-Handler zuweist, und fügen Sie den folgenden Code nach dieser Zeile hinzu.

    document.getElementById("replace-content-in-control").onclick = () => tryCatch(replaceContentInControl);

  5. Fügen Sie die folgende Funktion am Ende der Datei hinzu.

    async function replaceContentInControl() {
    await Word.run(async (context) => {

        // TODO1: Queue commands to replace the text in the Service Name
        //        content control.

        await context.sync();
    });
}

  6. Ersetzen Sie in der replaceContentInControl()-Funktion TODO1 durch den folgenden Code. Hinweis:

    • Die ContentControlCollection.getByTag-Methode gibt eine ContentControlCollection aller Inhaltssteuerelemente des angegebenen Tags zurück. Wir verwenden getFirst, um einen Verweis auf das gewünschte Steuerelement abzurufen.
    const serviceNameContentControl = context.document.contentControls.getByTag("serviceName").getFirst();
serviceNameContentControl.insertText("Fabrikam Online Productivity Suite", Word.InsertLocation.replace);

  7. Speichern Sie alle Änderungen am Projekt.

Testen des Add-Ins

  1. Wenn der lokale Webserver bereits ausgeführt wird und Ihr Add-In bereits in Word geladen ist, fahren Sie mit Schritt 2 fort. Starten Sie andernfalls den lokalen Webserver, und laden Sie das Add-In quer.

    • Führen Sie zum Testen Ihres Add-Ins in Word den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. Dadurch wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird) und Word mit geladenem Add-In geöffnet.

      npm start

    • Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus, um Ihr Add-In in Word im Web zu testen. Wenn Sie diesen Befehl ausführen, wird der lokale Webserver gestartet. Ersetzen Sie "{url}" durch die URL eines Word-Dokuments auf Ihrem OneDrive oder einer SharePoint-Bibliothek, für die Sie Berechtigungen haben.

      Hinweis

      Wenn Sie auf einem Mac entwickeln, schließen Sie die {url} in einfache Anführungszeichen ein. Tun Sie dies nicht unter Windows.

      npm run start:web -- --document {url}

      Es folgen einige Beispiele.

      • npm run start:web -- --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
      • npm run start:web -- --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
      • npm run start:web -- --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

      Wenn Ihr Add-In das Dokument nicht querladen wird, laden Sie es manuell quer, indem Sie die Anweisungen unter Manuelles Querladen von Add-Ins in Office im Web befolgen.

  2. Wenn der Add-In-Aufgabenbereich noch nicht in Word geöffnet ist, wechseln Sie zur Registerkarte Start, und wählen Sie im Menüband die Schaltfläche Aufgabenbereich anzeigen aus, um ihn zu öffnen.

  3. Wählen Sie im Aufgabenbereich die Schaltfläche Absatz einfügen aus, um sicherzustellen, dass sich oben im Dokument ein Absatz mit "Microsoft 365" befindet.

  4. Markieren Sie im Dokument den Text „Microsoft 365“ und wählen Sie dann die Schaltfläche Inhaltssteuerelement erstellen aus. Beachten Sie, dass der Ausdruck in Tags mit der Bezeichnung "Service Name" eingeschlossen ist.

  5. Wählen Sie die Schaltfläche Dienst umbenennen, und beachten Sie, dass der Text des Inhaltssteuerelements in "Fabrikam Online Productivity Suite" geändert wird.

    Die Ergebnisse der Auswahl der Add-In-Schaltflächen Inhaltssteuerelement erstellen und Dienst umbenennen.

Nächste Schritte

In diesem Lernprogramm haben Sie ein Word-Aufgabebereich-Add-In erstellt, das Text, Bilder und andere Dokument in ein Word-Dokument einfügt und diese ersetzt. Weitere Informationen zum Entwickeln von Word-Add-Ins erhalten Sie im folgenden Artikel.

Übersicht über Word-Add-Ins

Codebeispiele

Siehe auch