Cómo integrar ONLYOFFICE Docs con Angular

Documentación de ONLYOFFICE Proporciona una interfaz fácil de usar y un conjunto completo de funciones para que pueda abrir y editar fácilmente documentos de texto, hojas de cálculo, presentaciones y formularios rellenables de cualquier complejidad. La suite es totalmente compatible con archivos de Microsoft Word, Excel y PowerPoint, y admite otros formatos populares, incluido ODF.

puedes usarlo SOLO OFICINA Suite en ONLYOFFICE Workspace, una plataforma de código abierto para el trabajo colaborativo y la gestión de equipos, o intégrelo con otra aplicación o plataforma basada en la web.

Por ejemplo, puede integrar Documentación de ONLYOFFICE Funciona con Nextcloud, Moodle, Confluence, ownCloud, WordPress, Seafile, SharePoint, Alfresco, Redmine y más. El número total de integraciones disponibles supera las 30.

por Documentación de ONLYOFFICEaplicaciones de escritorio gratuitas para Windows, Linux y macOS que le permiten trabajar en documentos sin conexión y aplicaciones móviles gratuitas para Android e iOS.

Documentación de ONLYOFFICE oferta abierta API y compatible con WOPI protocolo para que los desarrolladores de software puedan integrar fácilmente la suite en sus herramientas de software.Para este propósito, hay una versión especial llamada Edición para desarrolladores de la documentación de ONLYOFFICE.

Instalar componentes angulares para el servidor de documentación de ONLYOFFICE

Primero, necesitas tener Documentación de ONLYOFFICE (Servidor de documentos ONLYOFFICE) instalado en su servidor.puedes obtener de GitHub Utilice las instrucciones de instalación adecuadas.

Este Componentes de ONLYOFFICE Los complementos para el marco Angular están disponibles en el registro npm.Por eso es necesario empezar con npm Usa este comando:

$ npm install --save @onlyoffice/document-editor-angular

Instalar usando componentes hilo tambien esta bien Solo ejecuta este comando:

$ yarn add @onlyoffice/document-editor-angular

Cómo usar componentes angulares en documentos de ONLYOFFICE

Después de que la instalación sea exitosa, debe importar Módulo Editor de Documentos:

import { NgModule } from '@angular/core';
import { DocumentEditorModule } from "@onlyoffice/document-editor-angular";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    DocumentEditorAngularModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Luego, debe definir las siguientes opciones en su componente de consumo:

@Component({...})
export class ExampleComponent {
  config: IConfig = {
    document: {
      "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "
    },
    documentType: "word",
    editorConfig: {
      "callbackUrl": "
    },
  }

  onDocumentReady = (event) => {
    console.log("Document is loaded");
  };
}

El siguiente paso es utilizar editor de documentos Componente con opciones en plantilla:

Para obtener una descripción completa de todas las opciones disponibles, visite Ángulo del editor de documentos.

mayor desarrollo

Luego instale todas las dependencias requeridas del proyecto:

$ npm install

El siguiente paso es construir el proyecto en sí:

$ cd ./projects
$ ng build @onlyoffice/document-editor-angular

Crear paquete de proyecto:

$ cd ./dist/onlyoffice/document-editor-angular
$ npm pack

Finalmente, prueba el componente ONLYOFFICE:

$ cd ./projects
$ ng test @onlyoffice/document-editor-angular

¡Eso es todo!Ahora puedes ver cómo Documentación de ONLYOFFICE trabajar dentro de sus límites con cuernos solicitud.