웹사이트 검색

ONLYOFFICE Docs용 플러그인을 만드는 방법


요약: 이 기사에서는 ONLYOFFICE Docs용 플러그인을 직접 만드는 방법과 이를 버전 7.2부터 사용할 수 있는 공식 플러그인 마켓플레이스에 게시하는 방법에 대해 알아봅니다.

ONLYOFFICE Docs는 전통적인 의미에서 일반적인 오피스 제품군이 아닙니다. 물론 문서, 스프레드시트, 프리젠테이션 작성 및 편집, 온라인 공유 및 공동 편집, 채울 수 있는 양식 만들기, PDF 파일 탐색 및 변환 등 다른 Office 패키지를 사용하여 할 수 있는 작업을 수행할 수 있습니다.

그러나 ONLYOFFICE를 더욱 강력하게 만드는 방법이 있습니다. 여기서 의미하는 것은 타사 플러그인, 즉 제품군의 표준 기능을 향상시키는 추가 소프트웨어 도구입니다. 예를 들어, 플러그인을 사용하면 타사 서비스를 연결하거나 새로운 사용자 인터페이스 요소를 추가할 수 있습니다.

ONLYOFFICE Docs용 플러그인을 만드는 방법

ONLYOFFICE Docs용 플러그인을 만들기 전에 GitHub 계정이 있는지 확인하고 이 플랫폼을 사용하는 방법에 대한 기본 사항을 알고 있어야 합니다. 이건 매우 중요합니다. GitHub를 처음 사용하는 경우 공식 GitHub 문서를 살펴보세요.

플러그인 생성 프로세스는 주의 깊게 따라야 하는 7단계로 나눌 수 있습니다.

  • 예비 활동.
  • 코딩.
  • 플러그인 스타일 조정.
  • 현지화(선택사항).
  • 준비.
  • 테스트.
  • 플러그인 마켓플레이스에 게시.

플러그인 개발에 대해 더 자세히 살펴보겠습니다.

1단계. 플러그인 마켓플레이스 저장소 포크

먼저 GitHub 계정에 로그인하거나 계정이 없는 경우 계정을 만들어야 합니다. 그런 다음 다음 URL 주소에서 사용할 수 있는 ONLYOFFICE 플러그인 마켓플레이스 저장소의 포크를 생성해야 합니다.

https://github.com/ONLYOFFICE/onlyoffice.github.io.

결과적으로 다른 저장소가 생기고 해당 URL 주소는 다음과 같습니다.

https://github.com/YOUR-USERNAME/ONLYOFFICE/onlyoffice.github.io

플러그인 마켓플레이스 저장소를 성공적으로 포크한 후에는 테스트 목적으로 이 저장소에서 GitHub 페이지 사이트를 만들어야 합니다. 방법을 모르신다면 공식 GitHub 가이드를 참고하세요.

이제 자신만의 GitHub 페이지 사이트가 있으므로 포크를 컴퓨터에 복제할 차례입니다.

마지막으로 다음 위치에 향후 플러그인을 위한 폴더를 생성해야 합니다.

onlyoffice.github.io/sdkjs-plugins/content/.

그게 다야. 필요한 모든 예비 활동을 완료했으며 다음 단계를 진행할 수 있습니다.

2단계. 플러그인용 코드 작성

코딩을 아주 잘할 필요는 없지만 ONLYOFFICE Docs용 플러그인을 만들려면 기본적인 코딩 지식이 반드시 필요합니다.

간단히 말해서 ONLYOFFICE 플러그인은 여러 파일이 포함된 폴더입니다. 플러그인이 올바르게 작동하려면 세 가지 파일을 생성해야 합니다.

  • config.json – 모든 중요한 데이터에 대한 정보가 포함된 플러그인 구성 파일입니다. 이 파일에는 ONLYOFFICE 편집기에 플러그인을 등록하는 데 필요한 몇 가지 매개변수가 있습니다. 각 매개변수에 대한 전체 설명을 읽으려면 공식 API 문서의 이 페이지를 살펴보세요.
  • 플러그인 코드(.js 파일) – 플러그인의 JavaScript 코드가 포함된 플러그인 파일 자체입니다. 이 파일은 플러그인이 수행하는 작업과 수행 방법을 설명합니다. 이 API 가이드를 읽고 작동 방식을 알아보세요.
  • index.htmlconfig.jsonplugin.js 파일을 연결하는 플러그인의 진입점입니다. 이 예제를 보고 어떤 모습인지 이해하세요.

이러한 필수 파일 외에도 플러그인 폴더에는 다른 파일이 포함될 수 있습니다. 예를 들어 아이콘, 플러그인 스타일, 추가 정보 파일, 타사 서비스 등이 있습니다. 아래에서 해당 파일에 대한 자세한 정보를 확인할 수 있습니다.

플러그인에 대해 제대로 작동하는 코드를 작성하려면 필요한 메서드와 이벤트를 알아야 합니다.

3단계. 플러그인 스타일 조정

플러그인에 대한 코드를 작성하는 것만으로는 충분하지 않습니다. 또한 ONLYOFFICE 편집기의 필수 부분처럼 보이도록 스타일을 조정해야 합니다. 이렇게 하려면 위에서 설명한 index.html 파일에 ONLYOFFICE 스타일 시트를 추가하면 됩니다.

<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">

버튼, 입력 컨트롤, 라벨 컨트롤, 로더 및 기타 요소를 추가할 수 있습니다.

예를 들어 플러그인에 콤보 상자를 추가하려면 select2 기능을 사용할 수 있습니다.

<select id="select_example" class="" ></select> 
$('#select_example').select2({     
data : [{id:0, text:'Item 1'}, {id:1, text:'Item 2'}, {id:2, text:'Item 3'}],     
minimumResultsForSearch: Infinity,     
width : '120px' 
});

삽입된 콤보 상자는 다음과 같습니다.

ONLYOFFICE 스타일 요소에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

4단계. 플러그인 현지화(선택 사항)

영어권 사용자만을 위한 플러그인을 생성하려는 경우 이 단계를 건너뛸 수 있습니다. 그러나 플러그인을 다른 언어로 사용하려면 플러그인 디렉터리에 번역 폴더를 만들고 사용하려는 모든 언어에 대한 .json 파일을 넣을 수 있습니다.

플러그인을 올바르게 현지화하는 방법을 알아보려면 공식 API 문서를 읽어보세요.

5단계. ONLYOFFICE Marketplace에 게시할 플러그인 준비

ONLYOFFICE 마켓플레이스에 플러그인이 출시되기 전에 플러그인의 모양을 다듬으려면 플러그인, 버전, 개발자 이름 등에 대한 간단한 설명이 포함된 정보 창을 추가해야 합니다.

예를 들어, 다음은 사진 편집기 플러그인의 정보 창입니다.

플러그인에 대한 이러한 창을 만들려면 다음 지침을 따르십시오.

또한 플러그인에 대한 아이콘을 생성하여 리소스 폴더에 넣어야 합니다. 일반적으로 ONLYOFFICE 플러그인 마켓플레이스에서 플러그인이 올바르게 표시되려면 8개의 아이콘이 필요합니다. Light 및 Dark 인터페이스 테마에 대한 4개의 아이콘(125%, 150%, 175% 및 200% 크기 조정)이 필요합니다.

또한 추가 정보 파일을 생성하여 기본 플러그인 폴더에 넣을 수 있습니다. 이 파일에는 플러그인의 주요 기능에 대한 설명, 설치 지침, 알려진 문제, 버그 등 다른 사용자에게 알리고 싶은 모든 정보가 포함될 수 있습니다.

이제 플러그인이 준비되었으며 마켓플레이스에 게시하기 전에 제대로 테스트할 수 있습니다.

6단계. ONLYOFFICE Docs 플러그인 테스트

이제 위의 지침에 따라 이미 생성한 모든 파일을 플러그인 폴더에 넣을 차례입니다. 그런 다음 플러그인 폴더를 원격 저장소에 푸시하고 ONLYOFFICE Desktop Editors에서 플러그인을 테스트하십시오. 이를 위해 디버깅 모드에서 데스크톱 앱을 실행할 수 있습니다.

Linux에서는 CTRL+ALT+T를 사용하여 터미널을 열 수 있습니다. 그런 다음 ONLYOFFICE Desktop Editors 경로를 입력하고 공백을 추가한 다음 --ascdesktop-support-debug-info를 지정합니다.

"/opt/onlyoffice/desktopeditors/DesktopEditors" --ascdesktop-support-debug-info

플러그인과 해당 기능을 테스트하세요.

모든 것이 정상이면 ONLYOFFICE 제품군의 웹 버전인 ONLYOFFICE Docs에서 플러그인을 테스트할 수도 있습니다. 즉, 플러그인을 새 확장으로 추가할 수 있습니다.

해당 확장을 생성하려면 onlyoffice.github.io/store/plugin-dev/extension/inject.js 파일을 열고 GitHub 페이지 사이트에서 플러그인 경로를 지정해야 합니다. URL_TO_PLUGIN 변수:

var URL_TO_PLUGIN = "https://YOUR-USERNAME.github.io/onlyoffice.github.io/sdkjs-plugins/content/your-plugin/"

onlyoffice.github.io/store/plugin-dev/extension 폴더가 필요한 확장 프로그램입니다. 웹 브라우저에 업로드하고 ONLYOFFICE Docs를 실행한 후 상단 도구 모음의 플러그인 탭에 있는 플러그인 관리자에서 플러그인을 찾으세요. 다음은 웹 브라우저에 플러그인을 추가하는 방법에 대한 자세한 가이드입니다.

플러그인이 의도한 대로 작동하면 마지막 단계를 진행할 수 있습니다.

7단계. ONLYOFFICE Marketplace에 플러그인 제출

축하해요! 플러그인 생성 프로세스를 완료했으며 이제 다른 사용자가 플러그인을 사용할 수 있도록 할 수 있습니다. 이를 위해 다음 위치에서 포크에서 이 ONLYOFFICE 저장소로 끌어오기 요청을 생성할 수 있습니다.

https://github.com/ONLYOFFICE/onlyoffice.github.io

플러그인이 제대로 작동하면 ONLYOFFICE 개발자가 풀 요청을 승인하고 플러그인이 ONLYOFFICE 플러그인 마켓플레이스에 표시됩니다. 이 경우 다른 사람들은 몇 번의 클릭만으로 마켓플레이스에서 설치할 수 있습니다.

이 기사가 도움이 되기를 바랍니다. 아래 댓글에서 여러분의 생각을 공유하는 것을 잊지 마세요.