웹사이트 검색

ONLYOFFICE Docs를 Angular와 통합하는 방법


Angular는 기본 모바일 애플리케이션을 구축하고 Linux, Windows 및 macOS용 데스크톱 설치 앱을 만드는 데 널리 사용되는 TypeScript 기반의 무료 오픈 소스 프런트엔드 애플리케이션 개발 프레임워크입니다.

Angular 기반 애플리케이션을 개발하고 실행하는 경우 ONLYOFFICE Docs(ONLYOFFICE Document Server)를 통합하여 서비스 내에서 문서 편집 및 실시간 협업을 활성화하는 것이 좋습니다. ). 이러한 통합은 ONLYOFFICE 개발자가 Angular 프레임워크용으로 개발한 고유한 구성 요소 덕분에 가능합니다.

통합되면 구성 요소를 사용하여 ONLYOFFICE 온라인 편집기를 설치하고 Angular 환경 내에서 성능을 테스트할 수 있습니다. 방법은 다음과 같습니다.

ONLYOFFICE 문서 정보

ONLYOFFICE Docs는 웹 브라우저에서 텍스트 문서, 스프레드시트, 프리젠테이션, 채울 수 있는 양식 및 PDF 파일로 작업할 수 있는 웹 기반 오피스 패키지입니다.

이 솔루션은 오픈 소스이며 로컬 서버에 온프레미스 배포가 필요합니다. 예를 들어 Debian, Ubuntu 또는 기타 Linux 기반 배포판에 설치할 수 있습니다.

ONLYOFFICE 문서도구는 사용자 친화적인 인터페이스와 완전한 기능 세트를 제공하므로 텍스트 문서, 스프레드시트, 프리젠테이션 및 입력 가능한 모든 복잡한 양식을 쉽게 열고 편집할 수 있습니다. 이 제품군은 Microsoft Word, Excel 및 PowerPoint 파일과 완벽하게 호환되며 ODF를 포함한 기타 널리 사용되는 형식을 지원합니다.

공동 작업 및 팀 관리를 위한 오픈 소스 플랫폼인 ONLYOFFICE Workspace 내의 ONLYOFFICE 제품군을 사용하거나 다른 웹 기반 앱 또는 플랫폼과 통합할 수 있습니다.

예를 들어 ONLYOFFICE Docs를 Nextcloud, Moodle, Confluence, ownCloud, WordPress, Seafile, SharePoint, Alfresco, Redmine 등과 통합할 수 있습니다. 사용 가능한 총 통합 수가 30개를 초과합니다.

ONLYOFFICE Docs에는 오프라인으로 문서 작업을 할 수 있는 Windows, Linux, macOS용 무료 데스크톱 앱과 Android 및 iOS용 무료 모바일 앱이 있습니다.

ONLYOFFICE Docs는 개방형 API를 제공하고 WOPI 프로토콜과 호환되므로 소프트웨어 개발자는 해당 제품군을 자신의 소프트웨어 도구에 쉽게 삽입할 수 있습니다. 이를 위해 ONLYOFFICE Docs Developer Edition이라는 특수 버전이 있습니다.

ONLYOFFICE 문서 서버용 Angular 구성 요소 설치

우선, 서버에 ONLYOFFICE 문서(ONLYOFFICE 문서 서버)가 설치되어 있어야 합니다. 해당 설치 지침을 사용하여 GitHub에서 가져올 수 있습니다.

Angular 프레임워크용 ONLYOFFICE 구성 요소는 npm 레지스트리에서 사용할 수 있습니다. 그렇기 때문에 npm에서 다음 명령을 사용하여 설치해야 합니다.

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

yarn을 이용한 컴포넌트 설치도 가능합니다. 다음 명령을 실행하세요.

yarn add @onlyoffice/document-editor-angular

ONLYOFFICE Docs에서 Angular 구성 요소를 사용하는 방법

성공적으로 설치한 후 DocumentEditorModule을 가져와야 합니다.

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

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

그런 다음 소비 구성 요소에서 다음 옵션을 정의해야 합니다.

@Component({...})
export class ExampleComponent {
  config: IConfig = {
    document: {
      "fileType": "docx",
      "key": "Khirz6zTPdfd7",
      "title": "Example Document Title.docx",
      "url": "https://example.com/url-to-example-document.docx"
    },
    documentType: "word",
    editorConfig: {
      "callbackUrl": "https://example.com/url-to-callback.ashx"
    },
  }

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

다음 단계는 템플릿의 옵션과 함께 document-editor 구성요소를 사용하는 것입니다.

<document-editor 
  id="docxForComments" 
  documentServerUrl="http://documentserver/"
  [config]="config"
  [events_onDocumentReady]="onDocumentReady"
></document-editor>

사용 가능한 모든 옵션에 대한 자세한 설명은 document-editor-angular에서 확인할 수 있습니다.

추가 개발

그런 다음 필요한 모든 프로젝트 종속성을 설치합니다.

npm install

다음 단계는 프로젝트 자체를 빌드하는 것입니다.

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

프로젝트 패키지를 만듭니다.

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

마지막으로 ONLYOFFICE 구성요소를 테스트합니다.

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

그게 다야! 이제 Angular 앱에서 ONLYOFFICE Docs가 어떻게 작동하는지 확인할 수 있습니다.