Crear un complemento de panel de tareas de diccionario

Artículo
06/15/2023

En este artículo se muestra un ejemplo de un complemento de panel de tareas con un servicio web complementario que proporciona definiciones de diccionario o sinónimos de sinónimos para la selección actual del usuario en un documento de Word.

Una Complemento de Office de diccionario se basa en el complemento de panel de tareas estándar con funciones complementarias para la consulta y presentación de definiciones de un servicio web XML de diccionarios en lugares adicionales de la interfaz de usuario de la aplicación de Office.

En un complemento de panel de tareas de diccionario normal, un usuario selecciona una palabra o frase en el documento y, después, la lógica de JavaScript que hay detrás del complemento pasa esta selección al servicio web XML del proveedor de diccionario. Luego, se actualiza la página web del proveedor de diccionario para mostrar las definiciones de la selección al usuario.

El componente de servicio web XML devuelve hasta tres definiciones en el formato definido por el esquema XML de ejemplo OfficeDefinitions, que luego se muestran al usuario en otros lugares de la interfaz de usuario de la aplicación de Office de hospedaje.

En la figura 1 se muestra la experiencia de selección y visualización de un complemento de diccionario con marca bing que se ejecuta en Word.

Figura 1. Complemento de diccionario que muestra definiciones para la palabra seleccionada.

Aplicación de diccionario que muestra una definición.

Depende de usted determinar si al seleccionar el vínculo Ver más en la interfaz de usuario HTML del complemento de diccionario se muestra más información en el panel de tareas o se abre una ventana independiente a la página web completa para la palabra o frase seleccionada.

En la figura 2 se muestra el comando Definir en el menú contextual que permite a los usuarios iniciar rápidamente diccionarios instalados. Las figuras 3 a 5 muestran los lugares de la interfaz de usuario de Office donde se usan los servicios XML de diccionario para proporcionar definiciones en Word.

Figura 2. Comando Definir del menú contextual

Defina el menú contextual.

Figura 3. Definiciones en los paneles Ortografía y Gramática

Definiciones en los paneles Ortografía y Gramática.

Figura 4. Definiciones en el panel Sinónimos

Definiciones en el panel Diccionario de sinónimos.

Figura 5. Definiciones en modo de lectura

Definiciones en modo de lectura.

Para crear un complemento de panel de tareas que proporcione una búsqueda de diccionario, cree dos componentes principales.

Un servicio web XML que busque las definiciones en un servicio de diccionarios y devuelva los valores en un formato XML que el complemento de diccionario pueda usar y mostrar.
Un complemento de panel de tareas que envíe la selección actual del usuario al servicio web de diccionarios, muestre las definiciones y, opcionalmente, pueda insertar los valores en el documento.

Las secciones siguientes muestran la manera de crear estos componentes.

Requisitos previos

Visual Studio 2019 o posterior con la carga de trabajo de Desarrollo de Office y SharePoint ya instalada.

Nota:

Si ya ha instalado Visual Studio, use el Instalador de Visual Studio para asegurarse de que la carga de trabajo Desarrollo de Office y SharePoint esté instalada.
Office está conectado a una suscripción Microsoft 365 (incluido Office en la Web).

A continuación, cree un proyecto de complemento de Word en Visual Studio.

En Visual Studio, seleccione Crear un nuevo proyecto.
Utilizando el cuadro de búsqueda, escribacomplemento. Seleccioneun complemento de Web de Word,y a continuación, seleccioneSiguiente.
Asigne un nombre al proyecto y seleccioneCrear.
Visual Studio crea una solución, y los dos proyectos que contiene aparecen en el Explorador de soluciones. El archivo Home.html se abre en Visual Studio.

Para obtener más información sobre los proyectos de una solución de complemento de Word, consulte el inicio rápido.

Creación de un servicio web XML de diccionario

El servicio web XML debe devolver las consultas al servicio web XML que cumple con el esquema XML de OfficeDefinitions. Las dos secciones siguientes describen el esquema XML de OfficeDefinitions y muestran un ejemplo de cómo codificar un servicio web XML que devuelva las consultas en ese formato XML.

Esquema XML OfficeDefinitions

En el código siguiente se muestra un XSD de ejemplo para el ejemplo de esquema 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>

XML devuelto consta de un elemento Result> raíz< que contiene un <elemento Definitions con de cero a tres elementos secundarios>Definition>.< Cada elemento secundario contiene definiciones que tienen como máximo 400 caracteres de longitud. Además, la dirección URL a la página completa del sitio de diccionario debe proporcionarse en el <elemento SeeMoreURL> . En el siguiente ejemplo se muestra la estructura del XML devuelto que cumple con el esquema de 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>

Servicio web de XML de diccionarios de muestra

El siguiente código de C# proporciona un ejemplo de cómo escribir código para un servicio web XML que devuelve el resultado de una consulta de diccionario en formato 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;
    }
}

Para empezar a trabajar con el desarrollo, puede hacer lo siguiente.

Creación del servicio web

Agregue un servicio web (ASMX) al proyecto de aplicación web del complemento en Visual Studio y asígnele el nombre DictionaryWebService.
Reemplace todo el contenido del archivo de .asmx.cs asociado por el ejemplo de código de C# anterior.

Actualización del marcado del servicio web

En el Explorador de soluciones, seleccione el archivo DictionaryWebService.asmx , abra su menú contextual y elija Ver marcado.

Reemplace el contenido de DictionaryWebService.asmx por el código siguiente.

<%@ WebService Language="C#" CodeBehind="DictionaryWebService.asmx.cs" Class="WebService" %>

Actualizar el web.config

En el Web.config del proyecto de aplicación web del complemento, agregue lo siguiente al <nodo system.web> .

<webServices>
  <protocols>
    <add name="HttpGet" />
    <add name="HttpPost" />
  </protocols>
</webServices>

Guarde los cambios.

Componentes de un complemento de diccionario

Un complemento de diccionario consta de tres archivos de componentes principales:

Un archivo de manifiesto de solo complemento con formato XML que describe el complemento.
Un archivo HTML que proporciona la interfaz de usuario del complemento.
Un archivo JavaScript que proporciona la lógica para obtener la selección del usuario desde el documento, envía la selección como una consulta al servicio web y muestra los resultados devueltos en la UI del complemento.

Ejemplo del archivo de manifiesto de un complemento de diccionario

A continuación se muestra un ejemplo de archivo de manifiesto para un complemento de diccionario.

<?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>

El <elemento Dictionary> y sus elementos secundarios específicos para crear el archivo de manifiesto de un complemento de diccionario se describen en las secciones siguientes. Para obtener información sobre los demás elementos del archivo de manifiesto, vea Complementos de Office con el manifiesto de solo complemento.

Elemento Dictionary

Especifica la configuración para los complementos de diccionario.

Elemento primario

<OfficeApp>

Elementos secundarios

<TargetDialects>, <QueryUri>, <CitationText>, <Name>, <DictionaryHomePage>

Comentarios

El <elemento Dictionary> y sus elementos secundarios se agregan al manifiesto de un complemento de panel de tareas al crear un complemento de diccionario.

Elemento TargetDialects

Especifica las variedades regionales que admite el diccionario. Es obligatorio para complementos de diccionario.

Elemento primario

<Dictionary>

Elemento secundario

<TargetDialect>

Comentarios

El <elemento TargetDialects y sus elementos secundarios> especifican el conjunto de idiomas regionales que contiene el diccionario. Por ejemplo, si el diccionario se aplicable para español (México) y español (Perú), pero no español (España), puede especificarlo en este elemento. No especifique más de un idioma (por ejemplo, español e inglés) en este manifiesto. Publique idiomas separados como diccionarios independientes.

Ejemplo

<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>

Elemento TargetDialect

Especifica una variedad regional que admite el diccionario. Es obligatorio para complementos de diccionario.

Elemento primario

<TargetDialects>

Comentarios

Especifique el valor de un idioma regional en el formato de etiqueta RFC1766 language , como EN-US.

Ejemplo

<TargetDialect>EN-US</TargetDialect>

Elemento QueryUri

Especifica el punto de conexión para el servicio de consulta del diccionario. Es obligatorio para complementos de diccionario.

Elemento primario

<Dictionary>

Comentarios

Este es el URI del servicio web XML para el proveedor del diccionario. La consulta realizada correctamente se anexará a este URI.

Ejemplo

<QueryUri DefaultValue="http://msranlc-lingo1/proof.aspx?q="/>

Elemento CitationText

Especifica el texto que se debe usar en las citas. Es obligatorio para complementos de diccionario.

Elemento primario

<Dictionary>

Comentarios

Este elemento especifica el principio del texto de cita que se mostrará en una línea debajo del contenido devuelto desde el servicio web (por ejemplo, "Resultados de:" o "Con la tecnología de:").

Para este elemento, puede especificar valores para configuraciones regionales adicionales mediante el <elemento Override> . Por ejemplo, si un usuario está ejecutando la SKU de español de Office, pero usa un diccionario en inglés, esto permite que la línea de cita muestre "Resultados por: Bing" en vez de "Results by: Bing". Para obtener más información sobre cómo especificar valores para configuraciones regionales adicionales, vea Localización.

Ejemplo

<CitationText DefaultValue="Results by: " />

Elemento DictionaryName

Especifica el nombre de este diccionario. Es obligatorio para complementos de diccionario.

Elemento primario

<Dictionary>

Comentarios

Este elemento especifica el texto del vínculo en el texto de la cita. El texto de la cita se muestra en una línea debajo del contenido devuelto desde el servicio web.

Para este elemento, se pueden especificar valores para configuraciones regionales adicionales.

Ejemplo

<DictionaryName DefaultValue="Bing Dictionary" />

Elemento DictionaryHomePage

Especifica la dirección URL de la página de inicio del diccionario. Es obligatorio para complementos de diccionario.

Elemento primario

<Dictionary>

Comentarios

Este elemento especifica la dirección URL del vínculo en el texto de la cita. El texto de la cita se muestra en una línea debajo del contenido devuelto desde el servicio web.

Para este elemento, se pueden especificar valores para configuraciones regionales adicionales.

Ejemplo

<DictionaryHomePage DefaultValue="https://www.bing.com" />

Actualizar el archivo de manifiesto del complemento de diccionario

Abra el archivo de manifiesto en el proyecto del complemento.
Actualice el valor del <elemento ProviderName> con su nombre.
Reemplace el valor del atributo DefaultValue> del< elemento DisplayName> por un nombre adecuado, por ejemplo, "Diccionario de demostración de Microsoft Office".<
Reemplace el valor del atributo DefaultValue> del< elemento Description> por una descripción adecuada, por ejemplo, "El diccionario de demostración de Microsoft Office es un ejemplo creado para demostrar cómo un publicador podría crear un diccionario que se integra con Office.< No devuelve definiciones reales".

Agregue el código siguiente después del <nodo Permisos> , reemplazando las referencias "contoso" por su propio nombre de empresa y, a continuación, guarde los cambios.

<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>

Creación de la interfaz de usuario HTML de un complemento de diccionario

Los dos ejemplos siguientes muestran los archivos HTML y CSS para la UI del complemento de la demo del diccionario. Para ver cómo se muestra la UI en el panel de tareas del complemento, consulte la Figura 6, después del código. Para ver cómo la implementación de JavaScript proporciona lógica de programación para esta interfaz de usuario HTML, consulte Escritura de la implementación de JavaScript inmediatamente después de esta sección.

En el proyecto de aplicación web del complemento en Visual Studio, puede reemplazar el contenido del archivo ./Home.html por el siguiente código HTML de ejemplo.

<!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>

En el ejemplo siguiente se muestra el contenido del archivo .css.

En el proyecto de aplicación web del complemento en Visual Studio, puede reemplazar el contenido del archivo ./Home.css por el siguiente CSS de ejemplo.

#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;
}

Figura 6. UI de la demo del diccionario

Interfaz de usuario del diccionario de demostración.

Escritura de la implementación de JavaScript

En el ejemplo siguiente se muestra la implementación de JavaScript en el archivo .js al que se llama desde la página HTML del complemento para proporcionar la lógica de programación para el complemento Demo Dictionary. Este script usa el servicio web XML descrito anteriormente. Cuando se coloca en el mismo directorio que el servicio web de ejemplo, la secuencia de comandos obtiene las definiciones de dicho servicio. Se puede usar con un servicio web XML compatible con OfficeDefinitions público modificando la xmlServiceURL variable en la parte superior del archivo.

Los miembros principales de la API de JavaScript de Office (Office.js) a los que se llama desde esta implementación se muestran en la lista siguiente.

Evento de inicialización del Office objeto, que se genera cuando se inicializa el contexto del complemento y proporciona acceso a una instancia de objeto Document que representa el documento con el que interactúa el complemento.
El método addHandlerAsync del Document objeto , al que se llama en la initialize función para agregar un controlador de eventos para el evento SelectionChanged del documento para escuchar los cambios de selección del usuario.
El método getSelectedDataAsync del Document objeto, al que se llama en la tryUpdatingSelectedWord() función cuando se genera el SelectionChanged controlador de eventos para obtener la palabra o frase seleccionada por el usuario, la convierte en texto sin formato y, a continuación, ejecuta la selectedTextCallback función de devolución de llamada asincrónica.
Cuando se ejecuta la selectTextCallback función de devolución de llamada asincrónica que se pasa como argumento de devolución de llamada del getSelectedDataAsync método, obtiene el valor del texto seleccionado cuando se devuelve la devolución de llamada. Obtiene ese valor del argumento selectedText de la devolución de llamada (que es de tipo AsyncResult) mediante la propiedad value del objeto devuelto AsyncResult .
El resto del código de la selectedTextCallback función consulta las definiciones del servicio web XML.
El código restante del archivo .js muestra la lista de definiciones en la interfaz de usuario HTML del complemento.

En el proyecto de aplicación web del complemento en Visual Studio, puede reemplazar el contenido del archivo ./Home.js por el siguiente ejemplo de JavaScript.

// 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));
}

Pruébelo

Con Visual Studio, pruebe el complemento de Word recién creado presionando F5 o eligiendo Depurar>Iniciar depuración para iniciar Word con el botón Mostrar complemento panel de tareas que se muestra en la cinta de opciones. El complemento se hospedará localmente en IIS.
En Word, si el panel de tareas del complemento aún no está abierto, elija la pestaña Inicio y, a continuación, elija el botón Mostrar panel de tareas para abrir el panel de tareas del complemento. (Si usa la versión perpetua con licencia por volumen de Office, en lugar de la versión de Microsoft 365 o una versión perpetuo comercial, no se admiten botones personalizados. En su lugar, el panel de tareas se abrirá inmediatamente).
En Word, agregue texto al documento y seleccione cualquiera o todo ese texto.

Compartir a través de

Crear un complemento de panel de tareas de diccionario

Requisitos previos

Creación de un servicio web XML de diccionario

Esquema XML OfficeDefinitions

Servicio web de XML de diccionarios de muestra

Creación del servicio web

Actualización del marcado del servicio web

Actualizar el web.config

Componentes de un complemento de diccionario

Ejemplo del archivo de manifiesto de un complemento de diccionario

Elemento Dictionary

Elemento TargetDialects

Elemento TargetDialect

Elemento QueryUri

Elemento CitationText

Elemento DictionaryName

Elemento DictionaryHomePage

Actualizar el archivo de manifiesto del complemento de diccionario

Creación de la interfaz de usuario HTML de un complemento de diccionario

Escritura de la implementación de JavaScript

Pruébelo

Recursos adicionales