댓글
제품 편집기와 라이선스를 설정한 뒤 댓글 플러그인을 등록하고 공통 및 제품 UI의 스타일과 언어 리소스를 불러오세요. 댓글 리소스는 제품 플러그인이 관리하므로 스냅샷 복원 전에 등록해야 합니다.
pnpm add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs-pro/boards-thread-comment @univerjs-pro/boards-thread-comment-uinpm install @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs-pro/boards-thread-comment @univerjs-pro/boards-thread-comment-uiyarn add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs-pro/boards-thread-comment @univerjs-pro/boards-thread-comment-uibun add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs-pro/boards-thread-comment @univerjs-pro/boards-thread-comment-uiimport { UniverBoardsThreadCommentPlugin } from '@univerjs-pro/boards-thread-comment'import { UniverBoardsThreadCommentUIPlugin } from '@univerjs-pro/boards-thread-comment-ui'import ProductLocale from '@univerjs-pro/boards-thread-comment-ui/locale/ko-KR'import { LocaleType, mergeLocales } from '@univerjs/core'import SharedLocale from '@univerjs/thread-comment-ui/locale/ko-KR'import '@univerjs/thread-comment-ui/lib/index.css'import '@univerjs-pro/boards-thread-comment-ui/lib/index.css'univerAPI.loadLocales(LocaleType.KO_KR, mergeLocales(SharedLocale, ProductLocale))univer.registerPlugin(UniverBoardsThreadCommentPlugin)univer.registerPlugin(UniverBoardsThreadCommentUIPlugin)모바일 지원
먼저 모바일 에디터를 구성하세요. 이 페이지의 플러그인 모드 초기화 코드에서 아래 데스크톱 등록을 같은 패키지의 모바일 버전으로 바꾸고 문서를 열기 전에 완료하세요. 모델 플러그인, 스타일, 언어 파일과 Facade 가져오기는 유지하며 두 버전을 동시에 등록하지 마세요.
| 패키지 | 데스크톱 등록 | 모바일 등록 |
|---|---|---|
@univerjs-pro/boards-thread-comment-ui | UniverBoardsThreadCommentUIPlugin | UniverBoardsThreadCommentMobileUIPlugin |
댓글 Facade
공통 댓글 Facade와 제품 Facade를 모두 가져오세요. 제품 메서드는 안정적인 앵커를 만들고 공통 API는 답글, 수정, 해결 및 삭제를 처리합니다. getComments()는 로컬 상태를 읽습니다. listCommentsAsync()는 설정된 데이터 소스를 통해 알려진 스레드를 동기화하며 서버의 모든 스레드를 검색하지 않습니다.
import '@univerjs/thread-comment/facade'import '@univerjs-pro/boards-thread-comment/facade'const board = univerAPI.getActiveBoard()if (board) { await board.createPositionCommentAsync({ x: 320, y: 180 }, 'Review this area.') console.log(await board.listCommentsAsync())}import '@univerjs/thread-comment/facade'const [thread] = univerAPI.getComments({ resolved: false })if (thread) { await univerAPI.replyCommentAsync({ unitId: thread.unitId, subUnitId: thread.subUnitId, threadId: thread.threadId, content: 'Reviewed.', })}공유 토론
Server SDK로 Comment Service와 Endpoint를 통합하고 협업 및 라이선스를 설정한 뒤 @univerjs-pro/thread-comment-datasource의 UniverThreadCommentDataSourcePlugin을 등록하세요. 내장 데이터 소스는 /universer-api/comment/unit/{unitId}/...와 /universer-api/user/list를 사용하므로 앱에서 해당 경로를 제공해야 합니다. 서버는 문서 편집 권한과 별도로 댓글 읽기 및 쓰기 권한을 확인해야 합니다.
이 가이드는 어떠셨나요?