Commentaires
Les commentaires permettent aux utilisateurs d’ajouter des remarques et des réponses dans les documents, ce qui facilite la communication et la collaboration entre les membres d’une équipe.
Mode plugin
Installation
pnpm add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-uinpm install @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-uiyarn add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-uibun add @univerjs/thread-comment @univerjs/thread-comment-ui @univerjs/docs-thread-comment @univerjs/docs-thread-comment-uiUtilisation
import { LocaleType, mergeLocales, Univer } from '@univerjs/core'import { UniverDocsThreadCommentPlugin } from '@univerjs/docs-thread-comment'import { UniverDocsThreadCommentUIPlugin } from '@univerjs/docs-thread-comment-ui'import { UniverThreadCommentPlugin } from '@univerjs/thread-comment'import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui'import DocsCommentLocale from '@univerjs/docs-thread-comment-ui/locale/en-US'import ThreadCommentUIEnUS from '@univerjs/thread-comment-ui/locale/en-US'import '@univerjs/docs-thread-comment/facade'import '@univerjs/docs-thread-comment-ui/lib/index.css'import '@univerjs/thread-comment-ui/lib/index.css'const univer = new Univer({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( ThreadCommentUIEnUS, DocsCommentLocale, ), },})univer.registerPlugin(UniverThreadCommentPlugin)univer.registerPlugin(UniverThreadCommentUIPlugin)univer.registerPlugin(UniverDocsThreadCommentPlugin)univer.registerPlugin(UniverDocsThreadCommentUIPlugin)Utilisation avec la fonctionnalité de collaboration
Si vous utilisez la fonctionnalité de Collaboration, procédez comme suit :
pnpm add @univerjs-pro/thread-comment-datasourcenpm install @univerjs-pro/thread-comment-datasourceyarn add @univerjs-pro/thread-comment-datasourcebun add @univerjs-pro/thread-comment-datasourceimport { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource'univer.registerPlugin(UniverThreadCommentDataSourcePlugin)Prise en charge mobile
Configurez d’abord l’éditeur mobile. Dans l’initialisation en mode plugin de cette page, remplacez les inscriptions de bureau ci-dessous par les exports mobiles des mêmes paquets avant d’ouvrir un document. Conservez modèles, styles, traductions et imports Facade ; n’enregistrez pas les deux variantes.
| Paquet | Inscription de bureau | Inscription mobile |
|---|---|---|
@univerjs/docs-thread-comment-ui | UniverDocsThreadCommentUIPlugin | UniverDocsThreadCommentMobileUIPlugin |
@univerjs/thread-comment-ui | UniverThreadCommentUIPlugin | UniverThreadCommentMobileUIPlugin |
Mode preset
Installation
pnpm add @univerjs/preset-docs-thread-commentnpm install @univerjs/preset-docs-thread-commentyarn add @univerjs/preset-docs-thread-commentbun add @univerjs/preset-docs-thread-commentUtilisation
import { UniverDocsCorePreset } from '@univerjs/preset-docs-core'import UniverPresetDocsCoreEnUS from '@univerjs/preset-docs-core/locales/en-US'import { UniverDocsThreadCommentPreset } from '@univerjs/preset-docs-thread-comment'import UniverPresetDocsThreadCommentEnUS from '@univerjs/preset-docs-thread-comment/locales/en-US'import { createUniver, LocaleType, mergeLocales } from '@univerjs/presets'import '@univerjs/preset-docs-core/lib/index.css'import '@univerjs/preset-docs-thread-comment/lib/index.css'const { univerAPI } = createUniver({ locale: LocaleType.EN_US, locales: { [LocaleType.EN_US]: mergeLocales( UniverPresetDocsCoreEnUS, UniverPresetDocsThreadCommentEnUS, ), }, presets: [ UniverDocsCorePreset(), UniverDocsThreadCommentPreset(), ],})Facade des commentaires
Importez la Facade commune et celle du produit. Les méthodes du produit créent les ancres stables ; l’API commune gère réponses, mises à jour, résolution et suppression. getComments() lit l’état local. listCommentsAsync() synchronise les fils déjà connus via la source configurée ; cette méthode ne découvre pas tous les fils du serveur.
import '@univerjs/thread-comment/facade'import '@univerjs/docs-thread-comment/facade'const range = univerAPI.getActiveDocument()?.getTextRange(0, 1)if (range) { await range.createCommentAsync('Please review this text.') console.log(await range.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.', })}Discussions partagées
Intégrez Comment Service et Endpoint avec le Server SDK, puis enregistrez UniverThreadCommentDataSourcePlugin de @univerjs-pro/thread-comment-datasource après la collaboration et la licence. La source fournie utilise /universer-api/comment/unit/{unitId}/... et /universer-api/user/list : exposez ces routes dans l’application. Le serveur doit autoriser la lecture et l’écriture des commentaires indépendamment de la modification du document.
Que pensez-vous de ce guide ?