Создание первой надстройки области задач WordBuild your first PowerPoint task pane add-in

Применяется к: Word 2016 или более поздней версии для Windows, Word для iPad, Word для MacApplies to: Word 2016 or later for Windows, Word for iPad, Word for Mac

В этой статье вы ознакомитесь с процессом создания надстройки для области задач Word.In this article, you'll walk through the process of building a PowerPoint task pane add-in.

Создание надстройкиCreate the add-in

Можно создать надстройку Office с помощью Visual Studio или любого другого редактора. Выберите вкладку, соответствующую используемому редактору.You can create an Office Add-in by using Visual Studio or any other editor. Tell us what editor you'd like to use by choosing one of the following tabs:

Необходимые компонентыPrerequisites

  • Visual Studio 2017 с установленной рабочей нагрузкой Разработка надстроек для Office и SharePointVisual Studio 2017 with the Office/SharePoint development workload installed

    Примечание

    Если вы уже установили Visual Studio 2017, используйте установщик Visual Studio, чтобы убедиться, что также установлена рабочая нагрузка Разработка надстроек для Office и SharePoint.If you've previously installed Visual Studio 2017, use the Visual Studio Installer to ensure that the Office/SharePoint development workload is installed.

  • Office 2016 или более поздние версииOffice 2016 or later

    Примечание

    Если у вас еще нет Office, вы можете принять участие в программе для разработчиков Office, чтобы получить лицензию для своей разработки и поэкспериментировать с надстройками.If you don't already have Office, you can join the Office Developer Program to get a license to do your development and experiment with add-ins.

Создание проекта надстройкиCreate the add-in project

  1. В строке меню Visual Studio выберите Файл > Создать > Проект.On the Visual Studio menu bar, choose File > New > Project.

  2. В списке типов проекта разверните узел Visual C# или Visual Basic, разверните Office/SharePoint, а затем выберите Надстройки > Веб-надстройка Word.In the list of project types under Visual C# or Visual Basic, expand Office/SharePoint, choose Add-ins, and then choose Word Web Add-in as the project type.

  3. Укажите имя проекта и нажмите кнопку ОК.Name the project, and then choose OK.

  4. Visual Studio создаст решение, и в обозревателе решений появятся два соответствующих проекта. В Visual Studio откроется файл Home.html.Visual Studio creates a solution and its two projects appear in Solution Explorer. The Home.html file opens in Visual Studio.

Обзор решения Visual StudioExplore the Visual Studio solution

После завершения работы мастера Visual Studio создает решение, которое содержит два проекта.When you've completed the wizard, Visual Studio creates a solution that contains two projects.

ПроектProject ОписаниеDescription
Проект надстройкиAdd-in project Содержит только XML-файл манифеста, который содержит все параметры, описывающие надстройку. Эти параметры помогают ведущему приложению Office определять, когда и где должна активироваться надстройка. Visual Studio создает содержимое этого файла за вас, чтобы вы могли сразу запустить проект и начать использовать надстройку. Вы можете изменить эти параметры в любой момент, изменив XML-файл.Contains only an XML manifest file, which contains all the settings that describe your add-in. These settings help the Office host determine when your add-in should be activated and where the add-in should appear. Visual Studio generates the contents of this file for you so that you can run the project and use your add-in immediately. You change these settings any time by modifying the XML file.
Проект веб-приложенияWeb application project Содержит страницы контента надстройки, включающие все файлы и ссылки на файлы, необходимые для разработки страниц HTML и JavaScript с поддержкой Office. При разработке надстройки Visual Studio размещает веб-приложение на локальном сервере IIS. Для публикации надстройки этот проект веб-приложения нужно развернуть на веб-сервере.Contains the content pages of your add-in, including all the files and file references that you need to develop Office-aware HTML and JavaScript pages. While you develop your add-in, Visual Studio hosts the web application on your local IIS server. When you're ready to publish the add-in, you'll need to deploy this web application project to a web server.

Обновление кодаUpdate the code

  1. Файл Home.html содержит HTML-контент, который будет отображаться в области задач надстройки. В файле Home.html замените элемент <body> на приведенную ниже часть кода и сохраните файл.Home.html specifies the HTML that will be rendered in the add-in's task pane. In Home.html, replace the <body> element with the following markup and save the file.

    <body>
        <div id="content-header">
            <div class="padding">
                <h1>Welcome</h1>
            </div>
        </div>
        <div id="content-main">
            <div class="padding">
                <p>Choose the buttons below to add boilerplate text to the document by using the Word JavaScript API.</p>
                <br />
                <h3>Try it out</h3>
                <button id="emerson">Add quote from Ralph Waldo Emerson</button>
                <br /><br />
                <button id="checkhov">Add quote from Anton Chekhov</button>
                <br /><br />
                <button id="proverb">Add Chinese proverb</button>
            </div>
        </div>
        <br />
        <div id="supportedVersion"/>
    </body>
    
  2. Откройте файл Home.js в корневой папке проекта веб-приложения. Этот файл содержит скрипт надстройки. Замените все его содержимое указанным ниже кодом и сохраните файл.Open the file Home.js in the root of the web application project. This file specifies the script for the add-in. Replace the entire contents with the following code and save the file.

    'use strict';
    
    (function () {
    
        Office.onReady(function() {
            // Office is ready
            $(document).ready(function () {
                // The document is ready
                // Use this to check whether the API is supported in the Word client.
                if (Office.context.requirements.isSetSupported('WordApi', 1.1)) {
                    // Do something that is only available via the new APIs
                    $('#emerson').click(insertEmersonQuoteAtSelection);
                    $('#checkhov').click(insertChekhovQuoteAtTheBeginning);
                    $('#proverb').click(insertChineseProverbAtTheEnd);
                    $('#supportedVersion').html('This code is using Word 2016 or later.');
                }
                else {
                    // Just letting you know that this code will not work with your version of Word.
                    $('#supportedVersion').html('This code requires Word 2016 or later.');
                }
            });
        });
    
        function insertEmersonQuoteAtSelection() {
            Word.run(function (context) {
    
                // Create a proxy object for the document.
                var thisDocument = context.document;
    
                // Queue a command to get the current selection.
                // Create a proxy range object for the selection.
                var range = thisDocument.getSelection();
    
                // Queue a command to replace the selected text.
                range.insertText('"Hitch your wagon to a star."\n', Word.InsertLocation.replace);
    
                // Synchronize the document state by executing the queued commands,
                // and return a promise to indicate task completion.
                return context.sync().then(function () {
                    console.log('Added a quote from Ralph Waldo Emerson.');
                });
            })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
        }
    
        function insertChekhovQuoteAtTheBeginning() {
            Word.run(function (context) {
    
                // Create a proxy object for the document body.
                var body = context.document.body;
    
                // Queue a command to insert text at the start of the document body.
                body.insertText('"Knowledge is of no value unless you put it into practice."\n', Word.InsertLocation.start);
    
                // Synchronize the document state by executing the queued commands,
                // and return a promise to indicate task completion.
                return context.sync().then(function () {
                    console.log('Added a quote from Anton Chekhov.');
                });
            })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
        }
    
        function insertChineseProverbAtTheEnd() {
            Word.run(function (context) {
    
                // Create a proxy object for the document body.
                var body = context.document.body;
    
                // Queue a command to insert text at the end of the document body.
                body.insertText('"To know the road ahead, ask those coming back."\n', Word.InsertLocation.end);
    
                // Synchronize the document state by executing the queued commands,
                // and return a promise to indicate task completion.
                return context.sync().then(function () {
                    console.log('Added a quote from a Chinese proverb.');
                });
            })
            .catch(function (error) {
                console.log('Error: ' + JSON.stringify(error));
                if (error instanceof OfficeExtension.Error) {
                    console.log('Debug info: ' + JSON.stringify(error.debugInfo));
                }
            });
        }
    })();
    
  3. Откройте файл Home.css в корневой папке проекта веб-приложения. Этот файл определяет специальные стили надстройки. Замените все его содержимое указанным ниже кодом и сохраните файл.Open the file Home.css in the root of the web application project. This file specifies the custom styles for the add-in. Replace the entire contents with the following code and save the file.

    #content-header {
        background: #2a8dd4;
        color: #fff;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px; 
        overflow: hidden;
    }
    
    #content-main {
        background: #fff;
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: auto;
    }
    
    .padding {
        padding: 15px;
    }
    

Обновление манифестаUpdate the manifest

  1. Откройте XML-файл манифеста в проекте надстройки.Open the XML manifest file in the add-in project. Этот файл определяет параметры и возможности надстройки.This file defines the add-in's settings and capabilities.

  2. Элемент ProviderName содержит заполнитель. Замените его на свое имя.The ProviderName element has a placeholder value. Replace it with your name.

  3. Атрибут DefaultValue элемента DisplayName содержит заполнитель. Замените его на строку Моя надстройка Office.The DefaultValue attribute of the DisplayName element has a placeholder. Replace it with My Office Add-in.

  4. Атрибут DefaultValue элемента Description содержит заполнитель. Замените его строкой Надстройка области задач для Word.The DefaultValue attribute of the Description element has a placeholder. Replace it with A task pane add-in for Word.

  5. Сохраните файл.Save the file.

    ...
    <ProviderName>John Doe</ProviderName>
    <DefaultLocale>en-US</DefaultLocale>
    <!-- The display name of your add-in. Used on the store and various places of the Office UI such as the add-ins dialog. -->
    <DisplayName DefaultValue="My Office Add-in" />
    <Description DefaultValue="A task pane add-in for Word"/>
    ...
    

ПроверкаTry it out

  1. Протестируйте новую надстройку Word в Visual Studio, нажав клавишу F5 или кнопку Запустить, чтобы запустить Word с кнопкой надстройки Show Taskpane (Показать область задач) на ленте. Надстройка будет размещена на локальном сервере IIS.Using Visual Studio, test the newly created Word add-in by pressing F5 or choosing the Start button to launch Word with the Show Taskpane add-in button displayed in the ribbon. The add-in will be hosted locally on IIS.

  2. В Word выберите вкладку Главная и нажмите кнопку Показать область задач на ленте, чтобы открыть область задач надстройки.In Word, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane. (Если вы используете единовременно приобретенную версию Office, а не версию Office 365, пользовательские кнопки не поддерживаются.(If you are using the one-time purchase version of Office, instead of the Office 365 version, then custom buttons are not supported. Сразу откроется область задач.)Instead, the task pane will open immediately.)

    Снимок экрана: приложение Word с выделенной кнопкой "Показать область задач"

  3. В области задач нажмите любую кнопку, чтобы добавить стандартный текст в документ.In the task pane, choose any of the buttons to add boilerplate text to the document.

    Снимок экрана: приложение Word с загруженной надстройкой, добавляющей стандартный текст.

Дальнейшие действияNext steps

Поздравляем! Вы успешно создали надстройку области задач Word!Congratulations, you've successfully created a PowerPoint task pane add-in! Чтобы узнать больше о возможностях надстроек Word и создать более сложную надстройку, воспользуйтесь руководством по надстройкам Word.Next, learn more about the capabilities of a Word add-in and build a more complex add-in by following along with the Word add-in tutorial.

См. такжеSee also