Créer un complément dictionnaire du volet Office
Cet article vous montre un exemple de complément du volet Office avec un service web associé qui fournit des définitions de dictionnaire ou des synonymes de dictionnaire des synonymes pour la sélection actuelle de l’utilisateur dans un document Word.
Une Complément Office de dictionnaire est basée sur le complément du volet Office standard avec des fonctionnalités supplémentaires pour prendre en charge l’interrogation et l’affichage de définitions à partir d’un service web XML de dictionnaire à des endroits supplémentaires dans l’interface utilisateur du complément Office.
Dans un complément du volet Office classique, un utilisateur sélectionne un mot ou une expression dans son document, puis la logique JavaScript sous-jacente du complément transmet cette sélection au service web XML du fournisseur de dictionnaire. La page web du fournisseur de dictionnaire s’actualise ensuite pour afficher les définitions de la sélection pour l’utilisateur.
Le composant de service web XML retourne jusqu’à trois définitions au format défini par l’exemple de schéma XML OfficeDefinitions, qui sont ensuite affichées à l’utilisateur à d’autres endroits dans l’interface utilisateur de l’application Office d’hébergement.
La figure 1 montre l’expérience de sélection et d’affichage d’un complément de dictionnaire bing qui s’exécute dans Word.
Figure 1. Complément de dictionnaire affichant des définitions pour le mot sélectionné
Il vous appartient de déterminer si la sélection du lien Voir plus dans l’interface utilisateur HTML du complément de dictionnaire affiche plus d’informations dans le volet Office ou ouvre une fenêtre distincte sur la page web complète pour le mot ou l’expression sélectionné.
La figure 2 montre la commande Définir dans le menu contextuel qui permet aux utilisateurs de lancer rapidement les dictionnaires installés. Les figures 3 à 5 montrent les emplacements de l’interface utilisateur Office où les services XML de dictionnaire sont utilisés pour fournir des définitions dans Word.
Figure 2. Commande Définir dans le menu contextuel
Figure 3. Définitions dans les volets Orthographe et Grammaire
Figure 4. Définitions dans le volet Thesaurus
Figure 5. Définitions dans le mode de Lecture
Pour créer un complément du volet Office qui fournit une recherche de dictionnaire, créez deux composants main.
- Un service web XML qui recherche des définitions dans un service de dictionnaire, puis renvoie ces valeurs dans un format XML pouvant être consommé et affiché par le complément de dictionnaire.
- Un complément du volet Office qui soumet la sélection actuelle de l’utilisateur au service web de dictionnaire, affiche des définitions, puis insère facultativement ces valeurs dans le document.
Les sections suivantes fournissent des exemples sur la création de ces composants.
Configuration requise
Visual Studio 2019 ou une version ultérieure avec la charge de travail de développement Office/SharePoint installée.
Remarque
Si vous avez déjà installé Visual Studio, utilisez le programme d'installation de Visual Studio pour vous assurer que la charge de travail de développement Office/SharePoint est installée.
Office connecté à un abonnement Microsoft 365 (y compris Office on the web).
Ensuite, créez un projet de complément Word dans Visual Studio.
Dans Visual Studio, choisissez Créer un nouveau projet.
À l’aide de la zone de recherche, entrez complément. Choisissez Complément web Word, puis sélectionnez Suivant.
Nommez votre projet et sélectionnez Créer.
Visual Studio crée une solution et ses deux projets apparaissent dans l’Explorateur de solutions. Le fichier Home.html s’ouvre dans Visual Studio.
Pour en savoir plus sur les projets d’une solution de complément Word, consultez le guide de démarrage rapide.
Créer un service web XML de dictionnaire
Le service web XML doit renvoyer des requêtes au service web sous la forme de code XML conforme au schéma XML OfficeDefinitions. Les deux sections suivantes décrivent le schéma XML OfficeDefinitions, et fournissent un exemple illustrant comment coder un service web XML qui renvoie des requêtes dans ce format XML.
Schéma XML OfficeDefinitions
Le code suivant montre un exemple de code XSD pour l’exemple de schéma XML OfficeDefinitions.
<?xml version="1.0" encoding="utf-8"?>
<xs:schema
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xs="https://www.w3.org/2001/XMLSchema"
targetNamespace="http://schemas.microsoft.com/contoso/OfficeDefinitions"
xmlns="http://schemas.microsoft.com/contoso/OfficeDefinitions">
<xs:element name="Result">
<xs:complexType>
<xs:sequence>
<xs:element name="SeeMoreURL" type="xs:anyURI"/>
<xs:element name="Definitions" type="DefinitionListType"/>
</xs:sequence>
</xs:complexType>
</xs:element>
<xs:complexType name="DefinitionListType">
<xs:sequence>
<xs:element name="Definition" maxOccurs="3">
<xs:simpleType>
<xs:restriction base="xs:normalizedString">
<xs:maxLength value="400"/>
</xs:restriction>
</xs:simpleType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:schema>
Le code XML retourné se compose d’un élément Result> racine< qui contient un <élément Definitions> avec de zéro à trois <éléments enfants Definition>. Chaque élément enfant contient des définitions d’au plus 400 caractères. En outre, l’URL de la page entière du site du dictionnaire doit être fournie dans l’élément <SeeMoreURL> . L’exemple suivant illustre la structure du code XML renvoyé conforme au schéma OfficeDefinitions.
<?xml version="1.0" encoding="utf-8"?>
<Result xmlns="http://schemas.microsoft.com/contoso/OfficeDefinitions">
<SeeMoreURL xmlns="">https://www.bing.com/search?q=example</SeeMoreURL>
<Definitions xmlns="">
<Definition>Definition1</Definition>
<Definition>Definition2</Definition>
<Definition>Definition3</Definition>
</Definitions>
</Result>
Exemple de service web XML de dictionnaire
Le code C# suivant fournit un exemple d’écriture de code pour un service web XML qui retourne le résultat d’une requête de dictionnaire au format XML OfficeDefinitions.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Xml;
using System.Text;
using System.IO;
using System.Net;
using System.Web.Script.Services;
/// <summary>
/// Summary description for _Default.
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this web service to be called from script, using ASP.NET AJAX, include the following line.
[ScriptService]
public class WebService : System.Web.Services.WebService {
public WebService () {
// Uncomment the following line if using designed components.
// InitializeComponent();
}
// You can replace this method entirely with your own method that gets definitions
// from your data source and then formats it into the example OfficeDefinitions XML format.
// If you need a reference for constructing the returned XML, you can use this example as a basis.
[WebMethod]
public XmlDocument Define(string word)
{
StringBuilder sb = new StringBuilder();
XmlWriter writer = XmlWriter.Create(sb);
{
writer.WriteStartDocument();
writer.WriteStartElement("Result", "http://schemas.microsoft.com/contoso/OfficeDefinitions");
// See More URL should be changed to the dictionary publisher's page for that word on
// their website.
writer.WriteElementString("SeeMoreURL", "https://www.bing.com/search?q=" + word);
writer.WriteStartElement("Definitions");
writer.WriteElementString("Definition", "Definition 1 of " + word);
writer.WriteElementString("Definition", "Definition 2 of " + word);
writer.WriteElementString("Definition", "Definition 3 of " + word);
writer.WriteEndElement(); // End of Definitions element.
writer.WriteEndElement(); // End of Result element.
writer.WriteEndDocument();
}
writer.Close();
XmlDocument doc = new XmlDocument();
doc.LoadXml(sb.ToString());
return doc;
}
}
Pour commencer à développer, vous pouvez effectuer les opérations suivantes.
Créer le service web
- Ajoutez un service web (ASMX) au projet d’application web du complément dans Visual Studio et nommez-le DictionaryWebService.
- Remplacez tout le contenu du fichier .asmx.cs associé par l’exemple de code C# précédent.
Mettre à jour le balisage du service web
Dans le Explorateur de solutions, sélectionnez le fichier DictionaryWebService.asmx, puis ouvrez son menu contextuel et choisissez Afficher le balisage.
Remplacez le contenu de DictionaryWebService.asmx par le code suivant.
<%@ WebService Language="C#" CodeBehind="DictionaryWebService.asmx.cs" Class="WebService" %>
Mettre à jour le web.config
Dans le Web.config du projet d’application web du complément, ajoutez ce qui suit au <nœud system.web> .
<webServices> <protocols> <add name="HttpGet" /> <add name="HttpPost" /> </protocols> </webServices>Enregistrez vos modifications.
Composants d’un complément de dictionnaire
Un complément de dictionnaire est composé de trois fichiers de composants principaux :
- Un fichier de manifeste XML qui décrit le complément.
- Un fichier HTML qui fournit l’interface utilisateur du complément.
- Un fichier JavaScript qui fournit la logique pour obtenir la sélection de l’utilisateur dans le document, envoie la sélection sous forme de requête au service web, puis affiche les résultats renvoyés dans l’interface utilisateur du complément.
Exemple de fichier manifeste d’un complément de dictionnaire
L’exemple suivant illustre un fichier de manifeste pour un complément de dictionnaire.
<?xml version="1.0" encoding="utf-8"?>
<OfficeApp xmlns="http://schemas.microsoft.com/office/appforoffice/1.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:type="TaskPaneApp">
<Id>7164e750-dc86-49c0-b548-1bac57abdc7c</Id>
<Version>15.0</Version>
<ProviderName>Microsoft Office Demo Dictionary</ProviderName>
<DefaultLocale>en-us</DefaultLocale>
<!--DisplayName is the name that will appear in the user's list of applications.-->
<DisplayName DefaultValue="Microsoft Office Demo Dictionary" />
<!--Description is a 2-3 sentence description of this dictionary. -->
<Description DefaultValue="The Microsoft Office Demo Dictionary is an example built to demonstrate how a
publisher can create a dictionary that integrates with Office. It doesn't return real definitions." />
<!--IconUrl is the URI for the icon that will appear in the user's list of applications.-->
<IconUrl DefaultValue="http://contoso/_layouts/images/general/office_logo.jpg" />
<SupportUrl DefaultValue="[Insert the URL of a page that provides support information for the app]" />
<!--Hosts specifies the kind of Office application your dictionary add-in will support.
You shouldn't have to modify this area.-->
<Hosts>
<Host Name="Document"/>
</Hosts>
<DefaultSettings>
<!--SourceLocation is the URL for your dictionary.-->
<SourceLocation DefaultValue="http://contoso/ExampleDictionary/DictionaryHome.html" />
</DefaultSettings>
<!--Permissions is the set of permissions a user will have to give your dictionary.
If you need write access, such as to allow a user to replace the highlighted word with a synonym,
use ReadWriteDocument. -->
<Permissions>ReadDocument</Permissions>
<Dictionary>
<!--TargetDialects is the set of regional languages your dictionary contains. For example, if your
dictionary applies to Spanish (Mexico) and Spanish (Peru), but not Spanish (Spain), you can specify
that here. Do not put more than one language (for example, Spanish and English) here. Publish
separate languages as separate dictionaries. -->
<TargetDialects>
<TargetDialect>EN-AU</TargetDialect>
<TargetDialect>EN-BZ</TargetDialect>
<TargetDialect>EN-CA</TargetDialect>
<TargetDialect>EN-029</TargetDialect>
<TargetDialect>EN-HK</TargetDialect>
<TargetDialect>EN-IN</TargetDialect>
<TargetDialect>EN-ID</TargetDialect>
<TargetDialect>EN-IE</TargetDialect>
<TargetDialect>EN-JM</TargetDialect>
<TargetDialect>EN-MY</TargetDialect>
<TargetDialect>EN-NZ</TargetDialect>
<TargetDialect>EN-PH</TargetDialect>
<TargetDialect>EN-SG</TargetDialect>
<TargetDialect>EN-ZA</TargetDialect>
<TargetDialect>EN-TT</TargetDialect>
<TargetDialect>EN-GB</TargetDialect>
<TargetDialect>EN-US</TargetDialect>
<TargetDialect>EN-ZW</TargetDialect>
</TargetDialects>
<!--QueryUri is the address of this dictionary's XML web service (which is used to put definitions in
additional contexts, such as the spelling checker.)-->
<QueryUri DefaultValue="http://contoso/ExampleDictionary/WebService.asmx/Define?word="/>
<!--Citation Text, Dictionary Name, and Dictionary Home Page will be combined to form the citation line
(for example, this would produce "Examples by: Contoso",
where "Contoso" is a hyperlink to http://www.contoso.com).-->
<CitationText DefaultValue="Examples by: " />
<DictionaryName DefaultValue="Contoso" />
<DictionaryHomePage DefaultValue="http://www.contoso.com" />
</Dictionary>
</OfficeApp>
L’élément< Dictionary> et ses éléments enfants spécifiques à la création du fichier manifeste d’un complément de dictionnaire sont décrits dans les sections suivantes. Pour plus d’informations sur les autres éléments du fichier de manifeste, voir Manifeste XML des compléments Office.
Élément Dictionary
Spécifie les paramètres pour les compléments de dictionnaire.
Élément parent
<OfficeApp>
Éléments enfants
<TargetDialects>, <QueryUri>, <CitationText>, <Name>, <DictionaryHomePage>
Remarques
L’élément< Dictionary> et ses éléments enfants sont ajoutés au manifeste d’un complément du volet Office lorsque vous créez un complément de dictionnaire.
Élément TargetDialects
Indique les langues régionales prises en charge par ce dictionnaire. Requis pour les compléments de dictionnaire.
Élément parent
<Dictionary>
Élément enfant
<TargetDialect>
Remarques
L’élément< TargetDialects> et ses éléments enfants spécifient l’ensemble des langues régionales que contient votre dictionnaire. Par exemple, si votre dictionnaire s’applique à l’espagnol (Mexique) et à l’espagnol (Pérou), mais pas à l’espagnol (Espagne), vous pouvez le préciser dans cet élément. N’indiquez pas plus d’une langue (par exemple, espagnol et anglais) dans ce manifeste. Publiez les langues distinctes dans des dictionnaires différents.
Exemple
<TargetDialects>
<TargetDialect>EN-AU</TargetDialect>
<TargetDialect>EN-BZ</TargetDialect>
<TargetDialect>EN-CA</TargetDialect>
<TargetDialect>EN-029</TargetDialect>
<TargetDialect>EN-HK</TargetDialect>
<TargetDialect>EN-IN</TargetDialect>
<TargetDialect>EN-ID</TargetDialect>
<TargetDialect>EN-IE</TargetDialect>
<TargetDialect>EN-JM</TargetDialect>
<TargetDialect>EN-MY</TargetDialect>
<TargetDialect>EN-NZ</TargetDialect>
<TargetDialect>EN-PH</TargetDialect>
<TargetDialect>EN-SG</TargetDialect>
<TargetDialect>EN-ZA</TargetDialect>
<TargetDialect>EN-TT</TargetDialect>
<TargetDialect>EN-GB</TargetDialect>
<TargetDialect>EN-US</TargetDialect>
<TargetDialect>EN-ZW</TargetDialect>
</TargetDialects>
Élément TargetDialect
Spécifie une langue régionale prise en charge par ce dictionnaire. Requis pour les compléments de dictionnaire.
Élément parent
<TargetDialects>
Remarques
Spécifiez la valeur d’une langue régionale au format de balise RFC1766 language , par exemple EN-US.
Exemple
<TargetDialect>EN-US</TargetDialect>
Élément QueryUri
Spécifie le point d’extrémité pour le service de requête de dictionnaire. Requis pour les compléments de dictionnaire.
Élément parent
<Dictionary>
Remarques
C’est l’URI du service web XML pour le fournisseur de dictionnaire. La requête correctement formulée sera ajoutée à cette URI.
Exemple
<QueryUri DefaultValue="http://msranlc-lingo1/proof.aspx?q="/>
Élément CitationText
Spécifie le texte à utiliser dans les citations. Requis pour les compléments de dictionnaire.
Élément parent
<Dictionary>
Remarques
Cet élément spécifie le début du texte de citation qui sera affiché sur une ligne sous le contenu qui est renvoyé du service web (par exemple, « Résultats par : » ou « Optimisé par : »).
Pour cet élément, vous pouvez spécifier des valeurs pour des paramètres régionaux supplémentaires à l’aide de l’élément <Override> . Par exemple si un utilisateur exécute le SKU espagnol d’Office, mais utilise un dictionnaire anglais, ceci permet à la ligne de citation de prendre la valeur « Resultados por: Bing » et non « Results by: Bing ». Pour plus d’informations sur la façon de spécifier des valeurs pour des paramètres régionaux supplémentaires, consultez Localisation.
Exemple
<CitationText DefaultValue="Results by: " />
Élément DictionaryName
Spécifie le nom de ce dictionnaire. Requis pour les compléments de dictionnaire.
Élément parent
<Dictionary>
Remarques
Cet élément spécifie le texte du lien dans le texte de citation. Le texte de citation s’affiche sur une ligne sous le contenu qui est renvoyé du service web.
Pour cet élément, vous pouvez spécifier des valeurs pour des paramètres régionaux supplémentaires.
Exemple
<DictionaryName DefaultValue="Bing Dictionary" />
Élément DictionaryHomePage
Spécifie l’URL de la page d’accueil pour le dictionnaire. Requis pour les compléments de dictionnaire.
Élément parent
<Dictionary>
Remarques
Cet élément spécifie l’URL du lien dans le texte de citation. Le texte de citation s’affiche sur une ligne sous le contenu qui est renvoyé du service web.
Pour cet élément, vous pouvez spécifier des valeurs pour des paramètres régionaux supplémentaires.
Exemple
<DictionaryHomePage DefaultValue="https://www.bing.com" />
Mettre à jour le fichier manifeste de votre complément de dictionnaire
Ouvrez le fichier manifeste XML dans le projet de complément.
Mettez à jour la valeur de l’élément <ProviderName> avec votre nom.
Remplacez la valeur de l’attribut DefaultValue> de< l’élément <DisplayName> par un nom approprié, par exemple« Microsoft Office Demo Dictionary ».
Remplacez la valeur de l’attribut DefaultValue> de< l’élément <Description> par une description appropriée, par exemple , « Le dictionnaire de démonstration Microsoft Office est un exemple créé pour montrer comment un éditeur peut créer un dictionnaire qui s’intègre à Office. Il ne retourne pas de définitions réelles. »
Ajoutez le code suivant après le <nœud Autorisations> , en remplaçant les références « contoso » par le nom de votre entreprise, puis enregistrez vos modifications.
<Dictionary> <!--TargetDialects is the set of regional languages your dictionary contains. For example, if your dictionary applies to Spanish (Mexico) and Spanish (Peru), but not Spanish (Spain), you can specify that here. Do not put more than one language (for example, Spanish and English) here. Publish separate languages as separate dictionaries. --> <TargetDialects> <TargetDialect>EN-AU</TargetDialect> <TargetDialect>EN-BZ</TargetDialect> <TargetDialect>EN-CA</TargetDialect> <TargetDialect>EN-029</TargetDialect> <TargetDialect>EN-HK</TargetDialect> <TargetDialect>EN-IN</TargetDialect> <TargetDialect>EN-ID</TargetDialect> <TargetDialect>EN-IE</TargetDialect> <TargetDialect>EN-JM</TargetDialect> <TargetDialect>EN-MY</TargetDialect> <TargetDialect>EN-NZ</TargetDialect> <TargetDialect>EN-PH</TargetDialect> <TargetDialect>EN-SG</TargetDialect> <TargetDialect>EN-ZA</TargetDialect> <TargetDialect>EN-TT</TargetDialect> <TargetDialect>EN-GB</TargetDialect> <TargetDialect>EN-US</TargetDialect> <TargetDialect>EN-ZW</TargetDialect> </TargetDialects> <!--QueryUri is the address of this dictionary's XML web service (which is used to put definitions in additional contexts, such as the spelling checker.)--> <QueryUri DefaultValue="~remoteAppUrl/DictionaryWebService.asmx"/> <!--Citation Text, Dictionary Name, and Dictionary Home Page will be combined to form the citation line (for example, this would produce "Examples by: Contoso", where "Contoso" is a hyperlink to http://www.contoso.com).--> <CitationText DefaultValue="Examples by: " /> <DictionaryName DefaultValue="Contoso" /> <DictionaryHomePage DefaultValue="http://www.contoso.com" /> </Dictionary>
Créer l’interface utilisateur HTML d’un complément de dictionnaire
Les deux exemples suivants montrent les fichiers HTML et CSS pour l’interface utilisateur du complément de dictionnaire de démonstration. Pour découvrir comment l’interface utilisateur s’affiche dans le volet Office du complément, voir la figure 6 à la suite du code. Pour voir comment l’implémentation de JavaScript fournit une logique de programmation pour cette interface utilisateur HTML, consultez Écrire l’implémentation JavaScript immédiatement après cette section.
Dans le projet d’application web du complément dans Visual Studio, vous pouvez remplacer le contenu du fichier ./Home.html par l’exemple HTML suivant.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<!--The title will not be shown but is supplied to ensure valid HTML.-->
<title>Example Dictionary</title>
<!--Required library includes.-->
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1/hosted/office.js" type="text/javascript"></script>
<!--Optional library includes.-->
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js"></script>
<!--App-specific CSS and JS.-->
<link rel="Stylesheet" type="text/css" href="Home.css" />
<script type="text/javascript" src="Home.js"></script>
</head>
<body>
<div id="mainContainer">
<div>INSTRUCTIONS</div>
<ol>
<li>Ensure there's text in the document.</li>
<li>Select text.</li>
</ol>
<div id="header">
<span id="headword"></span>
</div>
<div>DEFINITIONS</div>
<ol id="definitions">
</ol>
<div id="SeeMore">
<a id="SeeMoreLink" target="_blank">See More...</a>
</div>
<div id="message"></div>
</div>
</body>
</html>
L’exemple suivant montre le contenu du fichier .css.
Dans le projet d’application web du complément dans Visual Studio, vous pouvez remplacer le contenu du fichier ./Home.css par l’exemple CSS suivant.
#mainContainer
{
font-family: Segoe UI;
font-size: 11pt;
}
#headword
{
font-family: Segoe UI Semibold;
color: #262626;
}
#definitions
{
font-size: 8.5pt;
}
a
{
font-size: 8pt;
color: #336699;
text-decoration: none;
}
a:visited
{
color: #993366;
}
a:hover, a:active
{
text-decoration: underline;
}
Figure 6. Interface utilisateur du dictionnaire de démonstration
Écrire l’implémentation JavaScript
L’exemple suivant montre l’implémentation JavaScript dans le fichier .js appelé à partir de la page HTML du complément pour fournir la logique de programmation du complément Dictionnaire de démonstration. Ce script utilise le service web XML décrit précédemment. Lorsqu’il est placé dans le même répertoire que l’exemple de service web, le script obtient des définitions de ce service. Il peut être utilisé avec un service web XML public conforme à OfficeDefinitions en modifiant la xmlServiceURL variable en haut du fichier.
Les membres principaux de l’API JavaScript Office (Office.js) qui sont appelés à partir de cette implémentation sont indiqués dans la liste suivante.
- Événement initialize de l’objet
Office, qui est déclenché lorsque le contexte du complément est initialisé et donne accès à un objet Document instance qui représente le document avec lequel le complément interagit. - Méthode addHandlerAsync de l’objet
Document, appelée dans lainitializefonction pour ajouter un gestionnaire d’événements pour l’événement SelectionChanged du document afin d’écouter les modifications de sélection de l’utilisateur. - Méthode getSelectedDataAsync de l’objet
Document, qui est appelée dans la fonction lorsque leSelectionChangedtryUpdatingSelectedWord()gestionnaire d’événements est déclenché pour obtenir le mot ou l’expression sélectionné par l’utilisateur, le contraindre au texte brut, puis exécuter laselectedTextCallbackfonction de rappel asynchrone. - Lorsque la
selectTextCallbackfonction de rappel asynchrone passée en tant qu’argument de rappel de lagetSelectedDataAsyncméthode s’exécute, elle obtient la valeur du texte sélectionné lorsque le rappel est retourné. Il obtient cette valeur à partir de l’argument selectedText du rappel (qui est de type AsyncResult) à l’aide de la propriété value de l’objet retournéAsyncResult. - Le reste du code dans la
selectedTextCallbackfonction interroge le service web XML pour obtenir des définitions. - Le code restant dans le fichier .js affiche la liste des définitions dans l’interface utilisateur HTML du complément.
Dans le projet d’application web du complément dans Visual Studio, vous pouvez remplacer le contenu du fichier ./Home.js par l’exemple JavaScript suivant.
// The document the dictionary add-in is interacting with.
let _doc;
// The last looked-up word, which is also the currently displayed word.
let lastLookup;
// The base URL for the OfficeDefinitions-conforming XML web service to query for definitions.
const xmlServiceUrl = "DictionaryWebService.asmx/Define";
// Initialize the add-in.
// Office.initialize or Office.onReady is required for all add-ins.
Office.initialize = function (reason) {
// Checks for the DOM to load using the jQuery ready method.
$(document).ready(function () {
// After the DOM is loaded, app-specific code can run.
// Store a reference to the current document.
_doc = Office.context.document;
// Check whether text is already selected.
tryUpdatingSelectedWord();
// Add a handler to refresh when the user changes selection.
_doc.addHandlerAsync("documentSelectionChanged", tryUpdatingSelectedWord);
});
}
// Executes when event is raised on the user's selection changes, and at initialization time.
// Gets the current selection and passes that to asynchronous callback function.
function tryUpdatingSelectedWord() {
_doc.getSelectedDataAsync(Office.CoercionType.Text, selectedTextCallback);
}
// Async callback that executes when the add-in gets the user's selection. Determines whether anything should
// be done. If so, it makes requests that will be passed to various functions.
function selectedTextCallback(selectedText) {
selectedText = $.trim(selectedText.value);
// Be sure user has selected text. The SelectionChanged event is raised every time the user moves
// the cursor, even if no selection.
if (selectedText != "") {
// Check whether the user selected the same word the pane is currently displaying to
// avoid unnecessary web calls.
if (selectedText != lastLookup) {
// Update the lastLookup variable.
lastLookup = selectedText;
// Set the "headword" span to the word you looked up.
$("#headword").text("Selected text: " + selectedText);
// AJAX request to get definitions for the selected word; pass that to refreshDefinitions.
$.ajax(xmlServiceUrl,
{
data: { word: selectedText },
dataType: 'xml',
success: refreshDefinitions,
error: errorHandler
});
}
}
// This function is called when the add-in gets back the definitions target word.
// It removes the old definitions and replaces them with the definitions for the current word.
// It also sets the "See More" link.
function refreshDefinitions(data, textStatus, jqXHR) {
$(".definition").remove();
// Make a new list item for each returned definition that was returned, set the CSS class,
// and append it to the definitions div.
$(data).find("Definition").each(function () {
$(document.createElement("li"))
.text($(this).text())
.addClass("definition")
.appendTo($("#definitions"));
});
// Change the "See More" link to direct to the correct URL.
$("#SeeMoreLink").attr("href", $(data).find("SeeMoreURL").text());
}
// Basic error handler that writes to a div with id='message'.
function errorHandler(jqXHR, textStatus, errorThrown) {
document.getElementById('message').innerText
+= ("textStatus:- " + textStatus
+ "\nerrorThrown:- " + errorThrown
+ "\njqXHR:- " + JSON.stringify(jqXHR));
}
Try it out
À l’aide de Visual Studio, testez le complément Word nouvellement créé en appuyant sur F5 ou en choisissant Déboguer>Démarrer le débogage pour lancer Word avec le bouton Afficher le complément du volet Tâches affiché sur le ruban. Le complément est hébergé localement sur IIS.
Dans Word, si le volet Office du complément n’est pas déjà ouvert, choisissez l’onglet Accueil, puis le bouton Afficher le volet Office pour ouvrir le volet Office du complément. (Si vous utilisez la version perpétuelle sous licence en volume d’Office, au lieu de la version Microsoft 365 ou d’une version commerciale perpétuelle, les boutons personnalisés ne sont pas pris en charge. Au lieu de cela, le volet Office s’ouvre immédiatement.)
Dans Word, ajoutez du texte au document, puis sélectionnez tout ou partie de ce texte.
Commentaires
Bientôt disponible : Tout au long de 2024, nous allons supprimer progressivement GitHub Issues comme mécanisme de commentaires pour le contenu et le remplacer par un nouveau système de commentaires. Pour plus d’informations, consultez https://aka.ms/ContentUserFeedback.
Envoyer et afficher des commentaires pour