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

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

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

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

Надстройку Office можно создать с помощью генератора Yeoman для надстроек Office или Visual Studio.You can create an Office Add-in by using the Yeoman generator for Office Add-ins or Visual Studio. Генератор Yeoman создает проект Node.js, которым можно управлять с помощью Visual Studio Code или любого другого редактора, а Visual Studio создает решение Visual Studio.The Yeoman generator creates a Node.js project that can be managed with Visual Studio Code or any other editor, whereas Visual Studio creates a Visual Studio solution. Выберите вкладку с нужным вариантом и следуйте инструкциям, чтобы создать надстройку и протестировать ее локально.Select the tab for the one you'd like to use and then follow the instructions to create your add-in and test it locally.

Необходимые условияPrerequisites

  • Node.js (версия 8.0.0 или более поздняя)Node.js (version 8.0.0 or later)

  • GitGit

  • Последняя версия Yeoman и генератора Yeoman для надстроек Office. Выполните в командной строке указанную ниже команду, чтобы установить эти инструменты глобально.The latest version of Yeoman and the Yeoman generator for Office Add-ins. To install these tools globally, run the following command via the command prompt:

    npm install -g yo generator-office
    

    Примечание

    Даже если вы ранее установили генератор Yeoman, рекомендуем обновить его до последней версии из NPM.Even if you've previously installed the Yeoman generator, we recommend you update your package to the latest version from npm.

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

Важно!

В настоящее время пробелы не разрешаются в имени проекта надстройки или в любом месте пути к папке, в которой создается проект надстройки.Spaces are not currently permitted in the add-in project name or anywhere in the folder path where you create your add-in project. Если имя проекта или путь к папке надстройки содержат пробелы, локальный веб-сервер не будет запускаться при запуске npm start или npm run start:web.If your add-in's project name or folder path contains spaces, the local web server won't start when you run npm start or npm run start:web. Это ограничение является временным и будет исключено при устранении базовой проблемы в генераторе Yeoman для надстроек Office.This limitation is temporary and will be eliminated when the underlying issue is resolved in the Yeoman generator for Office Add-ins.

С помощью генератора Yeoman создайте проект надстройки Word.Use the Yeoman generator to create a Word add-in project. Выполните приведенную ниже команду и ответьте на вопросы, как показано ниже.Run the following command and then answer the prompts as follows:

yo office
  • Выберите тип проекта: Office Add-in Task Pane projectChoose a project type: Office Add-in Task Pane project
  • Выберите тип сценария: JavascriptChoose a script type: Javascript
  • Как вы хотите назвать надстройку?What do you want to name your add-in? my-office-add-in
  • Какое клиентское приложение Office должно поддерживаться?Which Office client application would you like to support? Word

После завершения работы мастера генератор создаст проект и установит вспомогательные компоненты Node.After you complete the wizard, the generator will create the project and install supporting Node components.

Знакомство с проектомExplore the project

Проект надстройки, который вы создали с помощью генератора Yeoman, содержит пример кода для простейшей надстройки области задач.The add-in project that you've created with the Yeoman generator contains sample code for a very basic task pane add-in. Если вы хотите ознакомиться с компонентами проекта надстройки, откройте проект в редакторе кода и просмотрите файлы, перечисленные ниже.If you'd like to explore the components of your add-in project, open the project in your code editor and review the files listed below. Когда вы будете готовы попробовать собственную надстройку, перейдите к следующему разделу.When you're ready to try out your add-in, proceed to the next section.

  • Файл ./manifest.xml в корневом каталоге проекта определяет параметры и возможности надстройки.The ./manifest.xml file in the root directory of the project defines the settings and capabilities of the add-in.
  • Файл ./src/taskpane/taskpane.html содержит разметку HTML для области задач.The ./src/taskpane/taskpane.html file contains the HTML markup for the task pane.
  • Файл ./src/taskpane/taskpane.css содержит код CSS, который применяется к содержимому области задач.The ./src/taskpane/taskpane.css file contains the CSS that's applied to content in the task pane.
  • Файл ./src/taskpane/taskpane.js содержит код API JavaScript для Office, который упрощает взаимодействие между областью задач и ведущим приложением Office.The ./src/taskpane/taskpane.js file contains the Office JavaScript API code that facilitates interaction between the task pane and the Office host application.

ПроверкаTry it out

  1. Перейдите к корневой папке проекта.Navigate to the root folder of the project.

    cd "my-office-add-in"
    
  2. Выполните указанные ниже действия, чтобы запустить локальный веб-сервер и загрузить неопубликованную надстройку.Complete the following steps to start the local web server and sideload your add-in.

    Примечание

    Надстройки Office должны использовать HTTPS, а не HTTP, даже в случае разработки.Office Add-ins should use HTTPS, not HTTP, even when you are developing. Если вам будет предложено установить сертификат после того, как вы запустите одну из указанных ниже команд, примите предложение установить сертификат, предоставленный генератором Yeoman.If you are prompted to install a certificate after you run one of the following commands, accept the prompt to install the certificate that the Yeoman generator provides.

    Совет

    Если вы тестируете надстройку на компьютере Mac, перед продолжением выполните указанную ниже команду.If you're testing your add-in on Mac, run the following command before proceeding. После выполнения этой команды запустится локальный веб-сервер.When you run this command, the local web server will start.

    npm run dev-server
    
    • Чтобы проверить надстройку в Word, выполните приведенную ниже команду в корневом каталоге своего проекта.To test your add-in in Word, run the following command in the root directory of your project. При этом запускается локальный веб-сервер (если он еще не запущен) и открывается приложение Word с загруженной надстройкой.This starts the local web server (if it's not already running) and opens Word with your add-in loaded.

      npm start
      
    • Чтобы проверить надстройку в Word в браузере, выполните приведенную ниже команду в корневом каталоге проекта.To test your add-in in Word on a browser, run the following command in the root directory of your project. После выполнения этой команды запустится локальный веб-сервер (если он еще не запущен).When you run this command, the local web server will start.

      npm run start:web
      

      Чтобы использовать надстройку, откройте новый документ в Word в Интернете, а затем загрузите неопубликованную надстройку, следуя инструкциям из статьи Загрузка неопубликованных надстроек Office в Office в Интернете.To use your add-in, open a new document in Word Online and then sideload your add-in by following the instructions in Sideload Office Add-ins in Office Online.

  3. В Word откройте новый документ, выберите вкладку Главная и нажмите кнопку Показать область задач на ленте, чтобы открыть область задач надстройки.In Word, open a new document, choose the Home tab, and then choose the Show Taskpane button in the ribbon to open the add-in task pane.

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

  4. В нижней части области задач выберите ссылку Выполнить, чтобы добавить текст "Hello World" синего цвета в документ.At the bottom of the task pane, choose the Run link to add the text "Hello World" to the document in blue font.

    Снимок экрана: приложение Word с загруженной надстройкой области задач

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

Поздравляем! Вы успешно создали надстройку области задач Word!Congratulations, you've successfully created a Word 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