Поделиться через

Создание надстройки области задач словаря

  • Статья

В этой статье показан пример надстройки области задач с сопроводительной веб-службой, которая предоставляет определения словаря или синонимы тезауруса для текущего выбора пользователя в Word документе.

Надстройка словаря Office базируется на стандартной надстройке области задач с дополнительными функциональными возможностями поддержки запросов и отображения определений из словарной веб-службы XML в дополнительных расположениях пользовательского интерфейса приложения Office.

В типичной надстройке области задач словаря пользователь выбирает слово или фразу в своем документе, а логика JavaScript за надстройкой передает этот выбор в веб-службу XML поставщика словаря. Затем веб-страница поставщика словаря обновляется, чтобы показать пользователю определения выделенного фрагмента.

Компонент веб-службы XML возвращает до трех определений в формате, определенном примером схемы XML OfficeDefinitions, которые затем отображаются для пользователя в других местах в пользовательском интерфейсе приложения Office.

На рисунке 1 показан процесс выбора и отображения для надстройки с фирменной символикой Bing для словаря, работающей в Word.

Рис. 1. Надстройка словаря, отображающая определения для выбранного слова

Приложение словаря, отображающее определение.

Вы можете определить, отображает ли ссылка Дополнительно в пользовательском интерфейсе HTML-интерфейса надстройки словаря дополнительные сведения в области задач или открывает отдельное окно для полной веб-страницы для выбранного слова или фразы.

На рисунке 2 показана команда Определить в контекстном меню, которая позволяет пользователям быстро запускать установленные словари. На рисунках 3–5 показаны места в пользовательском интерфейсе Office, где службы XML словаря используются для предоставления определений в Word.

Рис. 2. Команда "Определение" в контекстном меню

Определение контекстного меню.

Рис. 3. Определения в областях проверки правописания

Определения в области Правописание и Грамматика.

Рис. 4. Определения в области "Тезаурус"

Определения в области Тезауруса.

Рис. 5. Определения в режиме чтения

Определения в режиме чтения.

Чтобы создать надстройку области задач с подстановкой в словаре, создайте два компонента main.

  • веб-службу XML, которая ищет определения в словарной службе, а затем возвращает результаты в формате XML, которые могут быть отображены в надстройке словаря;
  • надстройку области задач, которая отправляет выбранное пользователем слово или фразу в словарную веб-службу, отображает определения и может вставить эти значения в документ.

В следующих разделах приведены примеры создания этих компонентов.

Предварительные требования

  • Visual Studio 2019 или более поздней версии с установленной рабочей нагрузкой Разработка надстроек для Office и SharePoint.

    Примечание.

    Если вы уже установили Visual Studio, используйте установщик Visual Studio, чтобы убедиться, что также установлена рабочая нагрузка Разработка надстроек для Office и SharePoint.

  • Пакет Office, подключенный к подписке Microsoft 365 (включая Office в Интернете).

Затем создайте проект надстройки Word в Visual Studio.

  1. В Visual Studio выберите пункт Создать проект.

  2. Используя поле поиска, введите надстройка. Выберите вариант Веб-надстройка Word и нажмите кнопку Далее.

  3. Присвойте проекту имя и нажмите кнопку Создать.

  4. Visual Studio создаст решение, и два соответствующих проекта появятся в обозревателе решений. В Visual Studio откроется файл Home.html.

Дополнительные сведения о проектах в решении надстройки Word см. в кратком руководстве.

Создание xml-службы словаря

Веб-служба XML должна возвращать запросы веб-служб в виде XML-кода, который соответствует XML-схеме OfficeDefinitions. В двух следующих разделах описывается XML-схема OfficeDefinitions и предоставлен пример возможности кодирования веб-службы XML, возвращающей запросы в этом формате XML.

XML-схема OfficeDefinitions

В следующем коде показан пример XSD для примера схемы 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-код состоит из корневого <элемента Result> , который содержит <элемент Definitions> с от нуля до трех <дочерних элементов Definition> . Каждый дочерний элемент содержит определения длиной не более 400 символов. Кроме того, URL-адрес полной страницы на сайте словаря должен быть указан в элементе< SeeMoreURL>. В следующем примере показана структура возвращенного XML-кода, соответствующего схеме 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>

Пример словарной веб-службы XML

В следующем коде C# приведен пример написания кода для веб-службы XML, которая возвращает результат запроса словаря в формате 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;
    }
}

Чтобы приступить к разработке, можно сделать следующее.

Создание веб-службы

  1. Добавьте веб-службу (ASMX) в проект веб-приложения надстройки в Visual Studio и назовите ее DictionaryWebService.
  2. Замените все содержимое связанного файла .asmx.cs на предыдущий пример кода C#.

Обновление разметки веб-службы

  1. В Обозреватель решений выберите файл DictionaryWebService.asmx, затем откройте его контекстное меню и выберите Пункт Просмотр разметки.

  2. Замените содержимое DictionaryWebService.asmx следующим кодом.

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

Обновление web.config

  1. В Web.config проекта веб-приложения надстройки добавьте следующую команду в <узел system.web> .

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

  2. Сохраните изменения.

Компоненты надстройки словаря

Надстройка словаря состоит из трех основных файлов компонентов.

  • XML-файл манифеста, который описывает надстройку.
  • HTML-файл, который предоставляет пользовательский интерфейс надстройки.
  • Файл JavaScript, который содержит логику для получения выделенного пользователем фрагмента из документа, отправки выбранного слова или фразы в веб-службу и отображения возвращенных результатов в пользовательском интерфейсе надстройки.

Пример файла манифеста надстройки словаря

Ниже приведен пример файла манифеста для надстройки словаря.

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

Элемент <Dictionary> и его дочерние элементы, относящиеся к созданию файла манифеста надстройки словаря, описаны в следующих разделах. Сведения о других элементах в файле манифеста см. в разделе XML-манифест надстроек Office.

Элемент Dictionary

Определяет параметры надстроек словаря.

Родительский элемент

<OfficeApp>

Дочерние элементы

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

Замечания

Элемент <Dictionary> и его дочерние элементы добавляются в манифест надстройки области задач при создании надстройки словаря.

Элемент TargetDialects

Определяет региональные языки, которые поддерживает этот словарь. Обязательный для надстроек словаря.

Родительский элемент

<Dictionary>

Дочерний элемент

<TargetDialect>

Замечания

Элемент <TargetDialects> и его дочерние элементы указывают набор региональных языков, содержащихся в словаре. Например, если словарь применяется к испанскому языку, на котором разговаривают в Мексике и Перу, но не в Испании, это можно указать в данном элементе. Не указывайте в этом манифесте более одного языка (например, испанский и английский). Публикуйте разные языки для отдельных словарей.

Пример

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

Элемент TargetDialect

Определяет региональный язык, который поддерживает этот словарь. Обязательный для надстроек словаря.

Родительский элемент

<TargetDialects>

Замечания

Укажите значение для регионального языка в формате тега RFC1766 language , например EN-US.

Пример

<TargetDialect>EN-US</TargetDialect>

Элемент QueryUri

Указывает конечную точку для службы запросов словаря. Обязательный элемент для надстроек словаря.

Родительский элемент

<Dictionary>

Замечания

Это универсальный код ресурса (URI) XML-веб-службы поставщика словаря. К этому URI добавляется строка запроса с надлежащими escape-символами.

Пример

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

Элемент CitationText

Задает текст, используемый в ссылках. Обязательный элемент для надстроек словаря.

Родительский элемент

<Dictionary>

Замечания

В этом элементе указывается начальный текст ссылки, который будет отображаться в строке под контентом, возвращенным из веб-службы (например, "Источник:" или "Предоставлено:").

Для этого элемента можно указать значения для дополнительных языковых стандартов с помощью <элемента Override> . Например, если пользователь использует версию Office на испанском языке, но задействует английский словарь, то в строке ссылки будет написано "Resultados por: Bing", а не "Results by: Bing" или "Источник: Bing". Дополнительные сведения о том, как указать значения для дополнительных языковых стандартов, см. в разделе Локализация.

Пример

<CitationText DefaultValue="Results by: " />

Элемент DictionaryName

Указывает имя данного словаря. Обязательный элемент для надстроек словаря.

Родительский элемент

<Dictionary>

Замечания

В этом элементе указывается текст ссылки на источник. Текст ссылки на источник отображается в строчке под контентом, возвращенным веб-службой.

В этом элементе можно задать значения для дополнительных языковых стандартов.

Пример

<DictionaryName DefaultValue="Bing Dictionary" />

Элемент DictionaryHomePage

Указывает URL-адрес домашней страницы для словаря. Обязательный элемент для надстроек словаря.

Родительский элемент

<Dictionary>

Замечания

В этом элементе указывается URL-адрес источника. Текст ссылки на источник отображается в строчке под контентом, возвращенным веб-службой.

В этом элементе можно задать значения для дополнительных языковых стандартов.

Пример

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

Обновление файла манифеста надстройки словаря

  1. Откройте XML-файл манифеста в проекте надстройки.

  2. Обновите значение <элемента ProviderName> своим именем.

  3. Замените значение атрибута< DefaultValue> элемента DisplayName> соответствующим именем, например "Демонстрационный словарь Microsoft Office".<

  4. Замените значение атрибута< DefaultValue> элемента Description> соответствующим описанием, например: "Демонстрационный словарь Microsoft Office — это пример, созданный для демонстрации того, как издатель может создать словарь, интегрирующийся с Office.< Он не возвращает реальные определения.

  5. Добавьте следующий код после <узла Разрешения> , заменив ссылки contoso собственным названием компании, а затем сохраните изменения.

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

Создание пользовательского интерфейса HTML-надстройки словаря

В следующих двух примерах показаны ФАЙЛЫ HTML и CSS для пользовательского интерфейса надстройки Демонстрационного словаря. Сведения о том, как пользовательский интерфейс отображается в области задач надстройки, см. на рисунке 6 после кода. Сведения о том, как реализация JavaScript предоставляет логику программирования для этого пользовательского интерфейса HTML, см. в статье Написание реализации JavaScript сразу после этого раздела.

В проекте веб-приложения надстройки в Visual Studio можно заменить содержимое файла ./Home.html следующим примером HTML.

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

В следующем примере показано содержимое файла .css.

В проекте веб-приложения надстройки в Visual Studio можно заменить содержимое файла ./Home.css следующим примером CSS.

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

Рисунок 6. Демонстрационный пользовательский интерфейс словаря

Пользовательский интерфейс демонстрационного словаря.

Написание реализации JavaScript

В следующем примере показана реализация JavaScript в файле .js, который вызывается с HTML-страницы надстройки, чтобы предоставить логику программирования для надстройки Demo Dictionary. Этот скрипт использует описанную выше веб-службу XML. При помещении в тот же каталог, где находится пример веб-службы, сценарий получит определения из этой службы. Его можно использовать с общедоступной веб-службой XML, соответствующей OfficeDefinitions, путем изменения переменной xmlServiceURL в верхней части файла.

Основные члены API JavaScript для Office (Office.js), вызываемые из этой реализации, показаны в следующем списке.

  • Событие Officeinitialize объекта , которое возникает при инициализации контекста надстройки и предоставляет доступ к экземпляру объекта Document, представляющего документ, с которым взаимодействует надстройка.
  • Метод DocumentaddHandlerAsync объекта, который вызывается в initialize функции для добавления обработчика событий для события SelectionChanged документа для прослушивания изменений выбора пользователем.
  • Метод DocumentgetSelectedDataAsync объекта, который вызывается в tryUpdatingSelectedWord() функции при SelectionChanged вызове обработчика событий, чтобы получить выбранное пользователем слово или фразу, принудить его к обычному тексту, а затем выполнить асинхронную функцию обратного selectedTextCallback вызова.
  • При выполнении selectTextCallback асинхронной функции обратного вызова, передаваемой в качестве аргумента обратногоgetSelectedDataAsync вызова метода, она получает значение выделенного текста при возврате обратного вызова. Он получает это значение из аргумента selectedText обратного вызова (который имеет тип AsyncResult) с помощью свойства value возвращаемого AsyncResult объекта.
  • Остальная часть кода в selectedTextCallback функции запрашивает у веб-службы XML определения.
  • Оставшийся код в файле .js отображает список определений в пользовательском интерфейсе HTML надстройки.

В проекте веб-приложения надстройки в Visual Studio можно заменить содержимое файла ./Home.js следующим примером 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));
}

Проверка

  1. В Visual Studio протестируйте только что созданную надстройку Word, нажав клавишу F5 или выбрав Отладка>Начать отладку, чтобы запустить Word с кнопкой Показать область задач на ленте. Надстройка будет размещена на локальном сервере IIS.

  2. В Word, если область задач надстройки еще не открыта, перейдите на вкладку Главная, а затем нажмите кнопку Показать область задач, чтобы открыть область задач надстройки. (Если вы используете корпоративную бессрочную версию Office, а не версию Microsoft 365 или розничную бессрочную версию, настраиваемые кнопки не поддерживаются. Вместо этого область задач откроется немедленно.)

    Приложение Word с выделенной кнопкой Показать область задач.

  3. В Word добавьте текст в документ, а затем выделите любой или весь его текст.

    Пользовательский интерфейс области задач словаря.