指南Univer Sheets功能评论 / 批注

评论 0.2.10+

Facade API付费版本需要 Univer 服务端Univer on Node.jsPreset
-可选-UniverSheetsThreadCommentPreset

评论插件提供了对单元格进行评论的功能。

该功能包含以下插件包:

Presets 安装

import { createUniver, defaultTheme, LocaleType, Tools } from '@univerjs/presets';
import { UniverSheetsCorePreset } from '@univerjs/presets/preset-sheets-core';
import UniverPresetSheetsCoreZhCN from '@univerjs/presets/preset-sheets-core/locales/zh-CN';
import { UniverSheetsThreadCommentPreset } from '@univerjs/presets/preset-sheets-thread-comment';
import sheetsThreadCommentZhCN from '@univerjs/presets/preset-sheets-thread-comment/locales/zh-CN';
 
createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    zhCN: Tools.deepMerge(
      {},
      UniverPresetSheetsCoreZhCN,
      sheetsThreadCommentZhCN 
    ),
  },
  theme: defaultTheme,
  collaboration: true,
  presets: [
    UniverSheetsCorePreset(),
    UniverSheetsThreadCommentPreset(),
  ],
});

如果同时使用 Univer 协同功能,则需要提供配置:

- UniverSheetsThreadCommentPreset(),
+ UniverSheetsThreadCommentPreset({ collaboration: true }),

高级安装

npm install @univerjs/sheets-thread-comment @univerjs/sheets-thread-comment-ui @univerjs/thread-comment @univerjs/thread-comment-ui
import { LocaleType, Tools } from '@univerjs/core';
import { IThreadCommentMentionDataService, UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment';
import { UniverSheetsThreadCommentPlugin } from '@univerjs/sheets-thread-comment';
import { UniverSheetsThreadCommentUIPlugin } from '@univerjs/sheets-thread-comment-ui';
import ThreadCommentUIZhCN from '@univerjs/thread-comment-ui/locale/zh-CN';
import SheetsThreadCommentZhCN from '@univerjs/sheets-thread-comment/locale/zh-CN';
 
import '@univerjs/thread-comment-ui/lib/index.css';
 
import '@univerjs/sheets-thread-comment/facade';
 
const univer = new Univer({
  theme: defaultTheme,
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: Tools.deepMerge(
      ThreadCommentUIZhCN,
      SheetsThreadCommentZhCN
    ),
  },
});
 
univer.registerPlugin(UniverThreadCommentPlugin);
univer.registerPlugin(UniverThreadCommentUIPlugin);
univer.registerPlugin(UniverSheetsThreadCommentBasePlugin);
univer.registerPlugin(UniverSheetsThreadCommentPlugin);

如果同时使用 Univer 协同功能,则需要:

npm install @univerjs-pro/thread-comment-datasource
import { UniverThreadCommentDataSourcePlugin } from '@univerjs-pro/thread-comment-datasource';
 
univer.registerPlugin(UniverThreadCommentDataSourcePlugin);

Facade API

const univerAPI = FUniver.newAPI(univer);
 
// get cell
const workbook = univerAPI.getActiveWorkbook();
const worksheet = workbook.getActiveSheet();
// comment only attch to single cell, if range is A1:J10 equal A1
const range = worksheet.getRange(0, 0, 1, 1);
 
// add comment to empty cell
range.addComment({
  dataStream: 'hello world\r\n',
});
 
// reply to current comment
range.addComment({
  dataStream: 'reply\r\n',
});
 
range.clearComment();
 
// get comment
const comment = range.getComment();
 
// update content
comment?.update({
  dataStream: 'hello world222\r\n',
});
 
// delete comment
comment?.delete();
 
// resolve comment
comment?.resolve();
 
// get replies
comment?.getReplies();
 
// get range of this comment
comment?.getRange();
 
// event
workbook.onBeforeUpdateThreadComment
workbook.onBeforeDeleteThreadComment
workbook.onBeforeAddThreadComment
// comment change event include add, update, delete
workbook.onThreadCommentChange