Compartilhar via


Criar um suplemento de painel de tarefas de dicionário

Este artigo mostra um exemplo de um suplemento de painel de tarefas com um serviço Web que acompanha que fornece definições de dicionário ou sinônimos de dicionário para a seleção atual do usuário em um documento Word.

Um Suplemento do Office de dicionário baseia-se no suplemento de painel de tarefas padrão, com recursos adicionais para dar suporte a consultas e exibir definições de um serviço Web XML de dicionário em locais adicionais na interface do usuário do aplicativo do Office.

Em um suplemento de painel de tarefas de dicionário típico, um usuário seleciona uma palavra ou frase no documento e a lógica de JavaScript por trás do suplemento passa essa seleção ao serviço Web XML do provedor do dicionário. A página Web do provedor do dicionário então é atualizada para mostrar as definições para a seleção ao usuário.

O componente do serviço Web XML retorna até três definições no formato definido pelo exemplo do esquema XML do OfficeDefinitions, que são exibidos para o usuário em outros locais na interface do usuário do aplicativo do Office de hospedagem.

A Figura 1 mostra a experiência de seleção e exibição de um suplemento de dicionário da marca Bing que está em execução em Word.

Figura 1. Suplemento de dicionário exibindo definições para a palavra selecionada

Aplicativo de dicionário que exibe uma definição.

Cabe a você determinar se selecionar o link Ver Mais na interface do usuário HTML do suplemento do dicionário exibe mais informações no painel de tarefas ou abre uma janela separada para a página da Web completa para a palavra ou frase selecionada.

A Figura 2 mostra o comando Definir no menu de contexto que permite que os usuários iniciem dicionários instalados rapidamente. Os números 3 a 5 mostram os locais na interface do usuário do Office em que os serviços XML do dicionário são usados para fornecer definições em Word.

Figura 2. Definir comando no menu de contexto

Definir menu de contexto.

Figura 3. Definições nos painéis Ortografia e Gramática

Definições nos painéis Ortografia e Gramática.

Figura 4. Definições no painel Dicionário de Sinônimos

Definições no painel Thesaurus.

Figura 5. Definitions in Reading Mode

Definições no Modo de Leitura.

Para criar um suplemento de painel de tarefas que forneça uma pesquisa de dicionário, crie dois componentes main.

  • Um serviço Web XML que pesquisa definições de um serviço de dicionário e, em seguida, retorna os valores em um formato XML que pode ser consumido e exibido pelo suplemento de dicionário.
  • Um suplemento de painel de tarefas que envia a seleção atual do usuário ao serviço Web de dicionário, exibe definições e, opcionalmente, pode inserir esses valores no documento.

As seções a seguir fornecem exemplos de como criar esses componentes.

Pré-requisitos

  • Visual Studio 2019 ou posterior com a carga de trabalho Desenvolvimento Office/SharePoint instalada.

    Observação

    Se você já instalou o Visual Studio, use o Instalador do Visual Studio para garantir que a carga de trabalho de desenvolvimento do Office/SharePoint esteja instalada.

  • Office conectado a uma assinatura Microsoft 365 (incluindo o Office na web).

Em seguida, crie um projeto de suplemento Word no Visual Studio.

  1. No Visual Studio, escolha Criar um novo projeto.

  2. Usando a caixa de pesquisa, insira suplemento. Escolha Suplemento do Word Web , em seguida, selecione Próximo.

  3. Nomeie seu projeto e selecione Criar.

  4. O Visual Studio cria uma solução, e os dois projetos dele aparecem no Gerenciador de Soluções. O arquivo Home.html é aberto no Visual Studio.

Para saber mais sobre os projetos em uma solução de suplemento Word, confira o início rápido.

Criar um serviço Web XML do dicionário

O serviço Web XML deve retornar consultas ao serviço Web como XML que estejam de acordo com o esquema XML OfficeDefinitions. As duas seções a seguir descrevem o esquema XML OfficeDefinitions e fornecem um exemplo de como escrever código para um serviço Web XML que retorna consultas nesse formato XML.

Esquema XML OfficeDefinitions

O código a seguir mostra o exemplo XSD para o exemplo de esquema XML do 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>

O XML retornado consiste em um elemento de resultado> raiz< que contém um <elemento Definitions com zero a três elementos> filho definição>.< Cada elemento filho contém definições que têm no máximo 400 caracteres de comprimento. Além disso, a URL para a página completa no site do dicionário deve ser fornecida no <elemento SeeMoreURL> . O exemplo a seguir mostra a estrutura do XML retornado que está em conformidade com o esquema 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>

Serviço Web XML de dicionário de exemplo

O código C# a seguir fornece um exemplo de como gravar código para um serviço Web XML que retorna o resultado de uma consulta de dicionário no formato XML do 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 começar a desenvolver, você pode fazer o seguinte.

Criar o serviço Web

  1. Adicione um ASMX (Serviço Web) ao projeto de aplicativo Web do suplemento no Visual Studio e nomeie-o DictionaryWebService.
  2. Substitua todo o conteúdo do arquivo .asmx.cs associado pelo exemplo de código C# anterior.

Atualizar a marcação do serviço Web

  1. No Gerenciador de Soluções, selecione o arquivo DictionaryWebService.asmx e abra seu menu de contexto e escolha Exibir Marcação.

  2. Substitua o conteúdo de DictionaryWebService.asmx pelo código a seguir.

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

Atualizar o web.config

  1. No Web.config do projeto de aplicativo Web do suplemento, adicione o seguinte ao <nó system.web> .

    <webServices>
      <protocols>
        <add name="HttpGet" />
        <add name="HttpPost" />
      </protocols>
    </webServices>
    
  2. Salve suas alterações.

Componentes de um suplemento de dicionário

Um suplemento de dicionário consiste em três arquivos de componentes principais:

  • Um arquivo de manifesto XML que descreve o suplemento.
  • Um arquivo HTML que fornece a interface do usuário do suplemento.
  • Um arquivo JavaScript que fornece a lógica para obter a seleção do usuário do documento, envia a seleção como uma consulta ao serviço Web e exibe os resultados retornados na interface do usuário do suplemento.

Exemplo do arquivo de manifesto de um suplemento de dicionário

A seguir há um arquivo de manifesto de exemplo para um suplemento de dicionário.

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

O <elemento Dictionary> e seus elementos filho específicos para criar um arquivo de manifesto do suplemento de dicionário são descritos nas seções a seguir. Para obter informações sobre os outros elementos no arquivo de manifesto, confira Manifesto XML de suplementos do Office.

Elemento Dictionary

Especifica configurações para suplementos de dicionário.

Elemento pai

<OfficeApp>

Elementos filho

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

Comentários

O <elemento Dictionary> e seus elementos filho são adicionados ao manifesto de um suplemento do painel de tarefas quando você cria um suplemento de dicionário.

Elemento TargetDialects

Especifica os idiomas regionais aos quais o dicionário oferece suporte. Necessário para suplementos de dicionário.

Elemento pai

<Dictionary>

Elemento filho

<TargetDialect>

Comentários

O <elemento TargetDialects e seus elementos> filho especificam o conjunto de idiomas regionais que seu dicionário contém. Por exemplo, se o dicionário se aplica a Espanhol (México) e Espanhol (Peru), mas não a Espanhol (Espanha), é possível especificar isso nesse elemento. Não especifique mais de um idioma (por exemplo, espanhol e inglês) nesse manifesto. Publique idiomas separados como dicionários separados.

Exemplo

<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 um idioma regional ao qual o dicionário oferece suporte. Necessário para suplementos de dicionário.

Elemento pai

<TargetDialects>

Comentários

Especifique o valor de uma linguagem regional no formato de marca RFC1766 language , como EN-US.

Exemplo

<TargetDialect>EN-US</TargetDialect>

Elemento QueryUri

Especifica o ponto de extremidade do serviço de consulta de dicionário. Necessário para suplementos de dicionário.

Elemento pai

<Dictionary>

Comentários

Esse é o URI do serviço Web XML para o provedor do dicionário. A consulta com escape correto será anexada a esse URI.

Exemplo

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

Elemento CitationText

Especifica o texto a ser usado em citações. Necessário para suplementos de dicionário.

Elemento pai

<Dictionary>

Comentários

Esse elemento especifica o início do texto de citação que será exibido em uma linha abaixo do conteúdo que é retornado do serviço Web (por exemplo, "Resultados do:" ou "Da plataforma:").

Para esse elemento, você pode especificar valores para localidades adicionais usando o elemento Substituição<>. Por exemplo, se um usuário está executando a SKU do português brasileiro do Office, mas usando um dicionário de inglês, isso permite que a linha de citação seja "Resultados por: Bing"em vez de "Results by: Bing". Para obter mais informações sobre como especificar valores para localidades adicionais, consulte Localização.

Exemplo

<CitationText DefaultValue="Results by: " />

Elemento DictionaryName

Especifica o nome deste dicionário. Necessário para suplementos de dicionário.

Elemento pai

<Dictionary>

Comentários

Esse elemento especifica o texto do link no texto de citação. O texto de citação é exibido em uma linha abaixo do conteúdo que é retornado do serviço Web.

Para esse elemento, você pode especificar valores para localidades adicionais.

Exemplo

<DictionaryName DefaultValue="Bing Dictionary" />

Elemento DictionaryHomePage

Especifica a URL da página inicial do dicionário. Necessário para suplementos de dicionário.

Elemento pai

<Dictionary>

Comentários

Esse elemento especifica a URL do link no texto de citação. O texto de citação é exibido em uma linha abaixo do conteúdo que é retornado do serviço Web.

Para esse elemento, você pode especificar valores para localidades adicionais.

Exemplo

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

Atualizar o arquivo de manifesto do suplemento do dicionário

  1. Abra o arquivo de manifesto XML do projeto do suplemento.

  2. Atualize o valor do <elemento ProviderName> com seu nome.

  3. Substitua o valor do atributo DefaultValue> do< elemento DisplayName> por um nome apropriado, por exemplo, "Dicionário de Demonstração do Microsoft Office".<

  4. Substitua o valor do atributo DefaultValue> do< elemento Description> por uma descrição apropriada, por exemplo, "O Dicionário de Demonstração do Microsoft Office é um exemplo criado para demonstrar como um editor poderia criar um dicionário que se integra ao Office.< Ele não retorna definições reais."

  5. Adicione o código a seguir após o <nó Permissões> , substituindo referências "contoso" pelo nome da sua própria empresa e salve suas alterações.

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

Criar uma interface de usuário HTML do suplemento de dicionário

Os dois exemplos a seguir mostram os arquivos HTML e CSS para a interface do usuário do suplemento de Dicionário de Demonstração. Para ver como a interface do usuário é exibida no suplemento de painel de tarefas, confira a Figura 6 após o código. Para ver como a implementação do JavaScript fornece lógica de programação para essa interface do usuário HTML, consulte Escrever a implementação javaScript imediatamente após esta seção.

No projeto do aplicativo Web do suplemento no Visual Studio, você pode substituir o conteúdo do arquivo ./Home.html pelo HTML de exemplo a seguir.

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

O exemplo a seguir mostra o conteúdo do arquivo .css.

No projeto do aplicativo Web do suplemento no Visual Studio, você pode substituir o conteúdo do arquivo ./Home.css pelo CSS de exemplo a seguir.

#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. Demonstração da interface de usuário do dicionário

Interface do usuário do dicionário de demonstração.

Gravar a implementação do JavaScript

O exemplo a seguir mostra a implementação javaScript no arquivo .js chamado da página HTML do suplemento para fornecer a lógica de programação para o suplemento do Dicionário de Demonstração. Este script usa o serviço Web XML descrito anteriormente. Quando colocado no mesmo diretório que o serviço Web de exemplo, o script obterá definições desse serviço. Ele pode ser usado com um serviço Web XML em conformidade com OfficeDefinitions, modificando a xmlServiceURL variável na parte superior do arquivo.

Os principais membros da API JavaScript do Office (Office.js) chamados dessa implementação são mostrados na lista a seguir.

  • O evento de inicialização do Office objeto, que é gerado quando o contexto de suplemento é inicializado, e fornece acesso a uma instância de objeto Document que representa o documento com o qual o suplemento está interagindo.
  • O método addHandlerAsync do Document objeto, que é chamado na initialize função para adicionar um manipulador de eventos para o evento SelectionChanged do documento para ouvir as alterações de seleção do usuário.
  • O método getSelectedDataAsync do Document objeto, que é chamado na função quando o SelectionChanged manipulador de eventos é gerado para obter a palavra ou frase que o usuário selecionou, coagi-lo a texto simples e, em tryUpdatingSelectedWord() seguida, executar a selectedTextCallback função de retorno de chamada assíncrona.
  • Quando a selectTextCallback função de retorno de chamada assíncrona que é passada como o argumento de retorno de chamada do getSelectedDataAsync método é executada, ela obtém o valor do texto selecionado quando o retorno de chamada é retornado. Ele obtém esse valor do argumento SelectedText do retorno de chamada (que é do tipo AsyncResult) usando a propriedade value do objeto retornado AsyncResult .
  • O restante do código na selectedTextCallback função consulta o serviço Web XML para definições.
  • O código restante no arquivo .js exibe a lista de definições na interface do usuário HTML do suplemento.

No projeto de aplicativo Web do suplemento no Visual Studio, você pode substituir o conteúdo do arquivo ./Home.js pelo exemplo a seguir 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));
}

Experimente

  1. Usando o Visual Studio, teste o suplemento Word recém-criado pressionando F5 ou escolhendo Depurar>Iniciar Depuração para iniciar Word com o botão Mostrar Suplemento taskpane exibido na faixa de opções. O suplemento será hospedado localmente no IIS.

  2. Em Word, se o painel de tarefas de suplemento ainda não estiver aberto, escolha a guia Página Inicial e escolha o botão Mostrar Painel de Tarefas para abrir o painel de tarefas de suplemento. (Se você estiver usando a versão perpétua licenciada por volume do Office, em vez da versão do Microsoft 365 ou uma versão perpétua de varejo, não há suporte para botões personalizados. Em vez disso, o painel de tarefas será aberto imediatamente.)

    O aplicativo Word com o botão Mostrar Taskpane realçado.

  3. Em Word, adicione texto ao documento e selecione qualquer ou todo esse texto.

    Interface do usuário do painel de tarefas do dicionário.