Crear el primer complemento de panel de tareas de Word

Este artículo le guiará a través del proceso de creación de un complemento de panel de tareas de Word.

Requisitos previos

• Node.js (la versión más reciente de Active LTS). Visite el sitioNode.js para descargar e instalar la versión adecuada para su sistema operativo.

• La versión más reciente de Yeoman y Generador de Yeoman para complementos de Office. Para instalar estas herramientas globalmente, ejecute el siguiente comando desde el símbolo del sistema.

  npm install -g yo generator-office
  

  Nota:

  Incluso si ya ha instalado el generador Yeoman, recomendamos que actualice el paquete de la versión más reciente desde npm.

• Office está conectado a una suscripción Microsoft 365 (incluido Office en la Web).

  Nota:

  Si aún no tiene Office, es posible que sea apto para una suscripción de desarrollador de Microsoft 365 E5 a través del Programa de desarrollador de Microsoft 365; para obtener más información, consulte las preguntas más frecuentes. Como alternativa, puede registrarse para obtener una prueba gratuita de 1 mes o comprar un plan de Microsoft 365.

Creación del proyecto de complemento

Decida el tipo de manifiesto que desea usar, ya sea el manifiesto unificado para Microsoft 365 o el manifiesto solo de complemento. Para obtener más información sobre ellos, vea Manifiesto de complementos de Office.

yo office

yo office

Después de completar el asistente, el generador creará el proyecto e instalará componentes auxiliares de Node.

Explorar el proyecto

El proyecto de complemento que ha creado con el generador Yeoman contiene código de ejemplo para un complemento de panel de tareas básico. Si quiere explorar los componentes del proyecto de complemento, abra el proyecto en el editor de código y revise los archivos que se enumeran a continuación. Cuando esté listo para probar el complemento, vaya a la sección siguiente.

• El archivo ./manifest.json o manifest.xml del directorio raíz del proyecto define la configuración y las capacidades del complemento.
• El archivo ./src/taskpane/taskpane.html contiene el marcado HTML para el panel de tareas.
• El archivo ./src/taskpane/taskpane.css contiene la CSS que se aplica al contenido en el panel de tareas.
• El archivo ./src/taskpane/taskpane.ts contiene el código de API JavaScript de Office que facilita la interacción entre el panel de tareas y la aplicación cliente de Office.

Pruébelo

1. Navegue hasta la carpeta raíz del proyecto.

   cd "My Office Add-in"
   

2. Complete los pasos siguientes para iniciar el servidor web local y transferir localmente el complemento.

   Nota:

   • Los complementos de Office deben usar HTTPS, no HTTP, incluso mientras desarrolla. Si se le solicita que instale un certificado después de ejecutar uno de los siguientes comandos, acepte la solicitud para instalar el certificado que proporciona el generador de Yeoman. Es posible que también deba ejecutar el símbolo del sistema o el terminal como administrador para que se realicen los cambios.

   • Si es la primera vez que desarrolla un complemento de Office en su equipo, es posible que se le pida en la línea de comandos que conceda a Microsoft Edge WebView una exención de bucle invertido ("¿Permitir el bucle invertido de localhost para Microsoft Edge WebView?"). Cuando se le solicite, enter Y para permitir la exención. Tenga en cuenta que necesitará privilegios de administrador para permitir la exención. Una vez permitido, no se le solicitará una exención cuando transfiera localmente complementos de Office en el futuro (a menos que quite la exención de su equipo). Para obtener más información, consulte "No podemos abrir este complemento desde localhost" al cargar un complemento de Office o al usar Fiddler.

     

   • Cuando usa por primera vez el generador de Yeoman para desarrollar un complemento de Office, el explorador predeterminado abre una ventana en la que se le pedirá que inicie sesión en su cuenta de Microsoft 365. Si no aparece una ventana de inicio de sesión y encuentra un error de instalación de prueba o de tiempo de espera de inicio de sesión, ejecute atk auth login m365.

   Sugerencia

   Si está probando el complemento en Mac, ejecute el siguiente comando antes de continuar. Al ejecutar este comando, se iniciará el servidor web local.

   npm run dev-server
   

   • Para probar el complemento en Word, ejecute el siguiente comando en el directorio raíz del proyecto. Se iniciará el servidor web local (si todavía no está en ejecución) y se abrirá Word con el complemento cargado.

     npm start
     

   • Para probar el complemento de Word en un explorador, ejecute el siguiente comando en el directorio raíz del proyecto. Al ejecutar este comando, se iniciará el servidor web local. Reemplace "{url}" por la dirección URL de un documento de Word en OneDrive o en una biblioteca de SharePoint para la que tenga permisos.

     Nota:

     Si está revelando en un Mac, escriba las {url} comillas simples. No lo haga en Windows.

     npm run start -- web --document {url}
     

     Estos son algunos ejemplos.

     • npm run start -- web --document https://contoso.sharepoint.com/:t:/g/EZGxP7ksiE5DuxvY638G798BpuhwluxCMfF1WZQj3VYhYQ?e=F4QM1R
     • npm run start -- web --document https://1drv.ms/x/s!jkcH7spkM4EGgcZUgqthk4IK3NOypVw?e=Z6G1qp
     • npm run start -- web --document https://contoso-my.sharepoint-df.com/:t:/p/user/EQda453DNTpFnl1bFPhOVR0BwlrzetbXvnaRYii2lDr_oQ?e=RSccmNP

     Si el complemento no transfiere localmente en el documento, transfiéralo localmente manualmente siguiendo las instrucciones de Transferir localmente complementos manualmente a Office en la Web.

3. En Word, si el panel de tareas "Mi complemento de Office" aún no está abierto, abra un documento nuevo, elija la pestaña Inicio y, después, elija el botón Mostrar panel de tareas de la cinta de opciones para abrir el panel de tareas del complemento.

   

4. En la parte inferior del panel de tareas seleccione el vínculo Ejecutar para agregar el texto «Hola, mundo» al documento en una fuente azul.

   

5. Cuando desee detener el servidor web local y desinstalar el complemento, siga las instrucciones aplicables:

   • Para detener el servidor, ejecute el siguiente comando. Si ha utilizado npm start, el siguiente comando también desinstala el complemento.

     npm stop
     

   • Si transfirió localmente el complemento, vea Quitar un complemento transferido localmente.

Siguientes pasos

Enhorabuena, ha creado correctamente un complemento de panel de tareas de Word. Ahora, obtenga más información sobre las funcionalidades de un complemento de Word y cree un complemento más complejo siguiendo este tutorial de complementos de Word.

Solución de problemas

• Asegúrese de que el entorno está listo para el desarrollo de Office siguiendo las instrucciones de Configurar el entorno de desarrollo.

• Es posible que se produzca un error en el paso automático npm install que realice Yo Office. Si ve errores al intentar ejecutar npm start, vaya a la carpeta del proyecto recién creada en un símbolo del sistema y ejecute npm installmanualmente . Para obtener más información sobre Yo Office, vea Crear proyectos de complementos de Office con el generador de Yeoman.

• Es posible que vea advertencias generadas cuando se ejecuta npm install para el generador Yeoman o el proyecto. En la mayoría de los casos, puede ignorar estas advertencias sin problemas. Las advertencias de seguridad o auditoría requieren una evaluación independiente; Solucione las vulnerabilidades en las dependencias de tiempo de ejecución o el origen cuyo origen no puede determinar antes de implementarlo en producción. A veces, las dependencias quedan obsoletas y sus reemplazos no son compatibles con otros paquetes de los que depende el proyecto. Para revisar las actualizaciones de dependencia disponibles, use la npm-check-updates herramienta.

  • En el símbolo del sistema, mientras está en el directorio raíz del proyecto, ejecute npm i -g npm-check-updates. Esto instala la herramienta globalmente.
  • Ejecutar ncu para informar de las actualizaciones disponibles sin modificar package.json.
  • Revise las versiones propuestas para comprobar la compatibilidad y actualice solo los intervalos de dependencia adecuados en package.json y, a continuación, ejecute npm install. Tenga en cuenta que ncu -u reescribe intervalos de dependencia y puede incluir actualizaciones importantes de versiones principales.

  Para obtener más información sobre las advertencias al ejecutar npm install, consulte Advertencias y dependencias en el mundo Node.js y npm.

• Si no ve el botón de complemento en la cinta de opciones (por ejemplo, Mostrar panel de tareas), seleccione el botón Complementosen la pestaña Inicio de la cinta y, a continuación, elija el complemento de prueba.

Ejemplos de código

• Complemento de Word "Hello world": Obtenga información sobre cómo crear un complemento de Office sencillo con solo un manifiesto, una página web HTML y un logotipo.

Vea también

• Información general sobre la plataforma de complementos de Office
• Desarrollo de complementos de Office
• Información general sobre los complementos de Word
• Ejemplos de código de complementos de Word
• Referencia de la API de JavaScript de Word
• Uso de Visual Studio Code para publicar