In diesem Artikel werden Sie schrittweise durch den Prozess der Erstellung eines Word-Aufgabenbereich-Add-Ins geführt.
Erstellen des Add-Ins
Sie können ein Office-Add-In erstellen, indem Sie denYeoman-Generator für Office-Add-Ins oder Visual Studio verwenden. Der Yeoman-Generator erstellt ein Node.js-Projekt, das mit Visual Studio Code oder einem beliebigen anderen Editor verwaltet werden kann, während Visual Studio eine Visual Studio-Lösung erstellt. Wählen Sie die Registerkarte für die Option aus, die Sie verwenden möchten und folgen Sie den Anweisungen, um das Add-In zu erstellen und lokal zu testen.
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.
Erstellen des Add-In-Projekts
Führen Sie den folgenden Befehl aus, um ein Add-In-Projekt mit dem Yeoman-Generator zu erstellen:
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
Nach Abschluss des Assistenten erstellt der Generator erstellt das Projekt und installiert unterstützende Node-Komponenten.
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.
Erkunden des Projekts
Das Add-In-Projekt, das Sie mit dem Yeoman-Generator erstellt haben, enthält Beispielcode für ein einfaches Aufgabenbereich-Add-In. Wenn Sie die Komponenten Ihres Add-In-Projekts untersuchen möchten, öffnen Sie das Projekt in Ihrem Codeeditor, und überprüfen Sie die unten aufgeführten Dateien. Wenn Sie bereit sind, das Add-In zu testen, fahren Sie mit dem nächsten Abschnitt fort.
Die ./manifest.xml-Datei im Stammverzeichnis des Projekts definiert die Einstellungen und Funktionen des Add-Ins. Weitere Informationen zur Datei manifest.xml finden Sie unter XML-Manifest für Office-Add-Ins.
Die ./src/taskpane/taskpane.html-Datei enthält das HTML-Markup für den Aufgabenbereich.
Die ./src/taskpane/taskpane.css-Datei enthält das CSS, das auf die Inhalte im Aufgabenbereich angewendet wird.
Die ./src/taskpane/taskpane.js-Datei enthält den Office-JavaScript-API-Code, der die Interaktion zwischen dem Aufgabenbereich und der Office-Clientanwendung erleichtert.
Probieren Sie es aus
Navigieren Sie zum Stammordner des Projekts.
cd "My Office Add-in"
Führen Sie die folgenden Schritte aus, um den lokalen Webserver zu starten und das Add-In querzuladen.
Hinweis
Auch von Ihnen erstellte Office-Add-Ins sollten 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 müssen Sie Ihre Eingabeaufforderung oder Ihr Terminal auch 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 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. Damit wird der lokale Webserver gestartet (sofern er noch nicht ausgeführt wird), Word wird geöffnet, und das Add-In wird in Word geladen.
npm start
Führen Sie zum Testen Ihres Add-Ins in Word in einem Browser den folgenden Befehl im Stammverzeichnis Ihres Projekts aus. 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.
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
Hinweis
Wenn Sie auf einem Mac entwickeln, schließen Sie die {url} in einfache Anführungszeichen ein. Tun Sie dies nicht unter Windows.
Wenn der Aufgabenbereich "Mein Office-Add-In" in Word noch nicht geöffnet ist, öffnen Sie ein neues Dokument, wählen Sie die Registerkarte Start aus, und wählen Sie dann im Menüband die Schaltfläche Aufgabenbereich anzeigen aus, um den Add-In-Aufgabenbereich zu öffnen.
Wählen Sie am unteren Rand des Aufgabenbereichs den Link Ausführen aus, um den Text „Hallo Welt“ in blauer Schrift in das Dokument einzufügen.
Nächste Schritte
Herzlichen Glückwunsch, Sie haben erfolgreich ein Word-Aufgabenbereich-Add-In erstellt! Erfahren Sie als Nächstes mehr über die Funktionen eines Word-Add-Ins, und erstellen Sie ein komplexeres Add-In mithilfe des Lernprogramms zum Word-Add-In.
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 am Microsoft 365-Entwicklerprogramm teilnehmen, um ein kostenloses, um 90 Tage verlängerbares Microsoft 365-Abonnement zu erhalten, das Sie während der Entwicklung nutzen können.
Erstellen des Add-In-Projekts
Wählen Sie in Visual Studio Neues Projekt erstellen.
Geben Sie Add-In in das Suchfeld ein. Wählen Sie Word-Web-Add-In und dann Weiter aus.
Benennen Sie Ihr Projekt und wählen Sie Erstellen aus.
Visual Studio erstellt eine Projektmappe, und die beiden Projekte werden im Projektmappen-Explorer angezeigt. Die Datei Home.html wird in Visual Studio geöffnet.
Erkunden der Visual Studio-Projektmappe
Wenn Sie den Assistenten abgeschlossen haben, erstellt Visual Studio eine Projektmappe, die zwei Projekte enthält.
Projekt
Beschreibung
Add-In-Projekt
Enthält nur eine XML-Manifestdatei, die alle Einstellungen enthält, die das Add-in beschreiben. Anhand dieser Einstellungen kann die Office-Anwendung ermitteln, wann das Add-In aktiviert und wann das Add-In angezeigt werden sollte. Visual Studio generiert die Inhalte dieser Datei für Sie, damit Sie das Projekt ausführen und das Add-In sofort verwenden können. Durch Ändern der XML-Datei können Sie diese Einstellungen jederzeit ändern.
Webanwendungsprojekt
Enthält die Inhaltsseiten Ihres Add-Ins, darunter alle Dateien und Dateiverweise, die Sie zum Entwickeln von Office-fähigen HTML- und JavaScript-Seiten benötigen. Während Sie Ihr Add-in entwickeln, wird die Webanwendung von Visual Studio auf Ihrem lokalen IIS-Server gehostet. Sobald Sie Ihr Add-In veröffentlichen möchten, müssen Sie dieses Webanwendungsprojekt auf einem Webserver bereitstellen.
Aktualisieren des Codes
Home.html gibt den HTML-Code an, der im Add-In-Aufgabenbereich gerendert wird. Ersetzen Sie in Home.html das Element <body> durch den folgenden Markup-Code, und speichern Sie die Datei.
<body>
<div id="content-header">
<div class="padding">
<h1>Welcome</h1>
</div>
</div>
<div id="content-main">
<div class="padding">
<p>Choose the buttons below to add boilerplate text to the document by using the Word JavaScript API.</p>
<br />
<h3>Try it out</h3>
<button id="emerson">Add quote from Ralph Waldo Emerson</button>
<br /><br />
<button id="checkhov">Add quote from Anton Chekhov</button>
<br /><br />
<button id="proverb">Add Chinese proverb</button>
</div>
</div>
<br />
<div id="supportedVersion"/>
</body>
Öffnen Sie die Datei Home.js im Stammordner des Webanwendungsprojekts. Diese Datei gibt das Skript für das Add-In an. Ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.
'use strict';
(function () {
Office.onReady(function() {
// Office is ready.
$(document).ready(function () {
// The document is ready.
// Use this to check whether the API is supported in the Word client.
if (Office.context.requirements.isSetSupported('WordApi', '1.1')) {
// Do something that is only available via the new APIs.
$('#emerson').click(insertEmersonQuoteAtSelection);
$('#checkhov').click(insertChekhovQuoteAtTheBeginning);
$('#proverb').click(insertChineseProverbAtTheEnd);
$('#supportedVersion').html('This code is using Word 2016 or later.');
}
else {
// Just letting you know that this code will not work with your version of Word.
$('#supportedVersion').html('This code requires Word 2016 or later.');
}
});
});
async function insertEmersonQuoteAtSelection() {
await Word.run(async (context) => {
// Create a proxy object for the document.
const thisDocument = context.document;
// Queue a command to get the current selection.
// Create a proxy range object for the selection.
const range = thisDocument.getSelection();
// Queue a command to replace the selected text.
range.insertText('"Hitch your wagon to a star."\n', Word.InsertLocation.replace);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync();
console.log('Added a quote from Ralph Waldo Emerson.');
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
async function insertChekhovQuoteAtTheBeginning() {
await Word.run(async (context) => {
// Create a proxy object for the document body.
const body = context.document.body;
// Queue a command to insert text at the start of the document body.
body.insertText('"Knowledge is of no value unless you put it into practice."\n', Word.InsertLocation.start);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync();
console.log('Added a quote from Anton Chekhov.');
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
async function insertChineseProverbAtTheEnd() {
await Word.run(async (context) => {
// Create a proxy object for the document body.
const body = context.document.body;
// Queue a command to insert text at the end of the document body.
body.insertText('"To know the road ahead, ask those coming back."\n', Word.InsertLocation.end);
// Synchronize the document state by executing the queued commands,
// and return a promise to indicate task completion.
await context.sync();
console.log('Added a quote from a Chinese proverb.');
})
.catch(function (error) {
console.log('Error: ' + JSON.stringify(error));
if (error instanceof OfficeExtension.Error) {
console.log('Debug info: ' + JSON.stringify(error.debugInfo));
}
});
}
})();
Öffnen Sie die Datei Home.css im Stammordner des Webanwendungsprojekts. Diese Datei gibt die benutzerdefinierten Formatvorlagen für das Add-In an. Ersetzen Sie den gesamten Inhalt durch den folgenden Code, und speichern Sie die Datei.
Öffnen Sie die XML-Manifestdatei im Add-In-Projekt. Diese Datei legt die Einstellungen und Funktionen des Add-Ins fest.
Das ProviderName-Element weist einen Platzhalterwert auf. Ersetzen Sie dieses nur Ihren Namen.
Das DefaultValue-Attribut des DisplayName-Elements weist einen Platzhalter auf. Ersetzen Sie ihn durch Mein Office-Add-In.
Das DefaultValue-Attribut des Description-Elements weist einen Platzhalter auf. Ersetzen Sie ihn durch Ein Aufgabenbereich-Add-In für Word.
Speichern Sie die Datei.
...
<ProviderName>John Doe</ProviderName>
<DefaultLocale>en-US</DefaultLocale>
<!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
<DisplayName DefaultValue="My Office Add-in" />
<Description DefaultValue="A task pane add-in for Word"/>
...
Probieren Sie es aus
Testen Sie mithilfe von Visual Studio das neu erstellte Word-Add-In, indem Sie F5 drücken oder Debuggen>Debuggen Debuggen starten auswählen, um Word mit der im Menüband angezeigten Schaltfläche Aufgabenbereich anzeigen zu starten. Das Add-In wird lokal auf IIS gehostet.
Wählen Sie in Word die Registerkarte Start und dann die Schaltfläche Aufgabenbereich anzeigen im Menüband aus, um den Add-In-Aufgabenbereich zu öffnen. (Wenn Sie die volumenlizenzierte unbefristete Version von Office anstelle der Microsoft 365-Version oder einer unbefristeten Verkaufsversion verwenden, werden benutzerdefinierte Schaltflächen nicht unterstützt. Stattdessen wird der Aufgabenbereich sofort geöffnet.)
Wählen Sie im Aufgabenbereich eine der Schaltflächen, um Textbausteine zum Dokument hinzuzufügen.
Herzlichen Glückwunsch, Sie haben erfolgreich ein Word-Aufgabenbereich-Add-In erstellt! Fahren Sie als Nächstes mit dem folgenden Artikel fort, um mehr über die Entwicklung von Office-Add-Ins mit Visual Studio zu erfahren.
