🎉 v0.5.4 版本已发布。查看详情 →
指南Univer Sheets功能评论 / 批注

评论 0.2.10+

Facade API可付费升级需要 Univer 服务端Univer on Node.jsPreset
✅-可选-UniverSheetsThreadCommentPreset

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

该功能包含以下插件包：

Presets 安装

import { createUniver, defaultTheme, LocaleType, merge } 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 UniverPresetSheetsThreadCommentZhCN from '@univerjs/presets/preset-sheets-thread-comment/locales/zh-CN';
 
import '@univerjs/presets/lib/styles/preset-sheets-thread-comment.css'
 
const { univerAPI } = createUniver({
  locale: LocaleType.ZH_CN,
  locales: {
    [LocaleType.ZH_CN]: merge(
      {},
      UniverPresetSheetsCoreZhCN,
      UniverPresetSheetsThreadCommentZhCN 
    ),
  },
  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, merge, Univer } from '@univerjs/core';
import { defaultTheme } from "@univerjs/design";
import { UniverThreadCommentPlugin } from '@univerjs/thread-comment';
import { UniverThreadCommentUIPlugin } from '@univerjs/thread-comment-ui';
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 SheetsThreadCommentUIZhCN from '@univerjs/sheets-thread-comment-ui/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]: merge(
      ThreadCommentUIZhCN,
      SheetsThreadCommentUIZhCN
    ),
  },
});
 
univer.registerPlugin(UniverThreadCommentPlugin);
univer.registerPlugin(UniverThreadCommentUIPlugin);
univer.registerPlugin(UniverSheetsThreadCommentPlugin);
univer.registerPlugin(UniverSheetsThreadCommentUIPlugin);

如果同时使用 Univer 协同功能，则需要：

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

Facade API

完整 facade api 类型定义，请查看 FacadeAPI

创建 / 清除单元格评论

创建 / 清除当前范围内起始单元格的评论。

const worksheet = univerAPI.getActiveWorkbook().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
await range.addComment({
  dataStream: 'hello world\r\n',
});
 
// reply to current comment
await range.addComment({
  dataStream: 'reply\r\n',
});
 
// clear comment
await range.clearComment();

获取单元格评论

获取当前范围内起始单元格的评论，返回一个 FThreadComment 对象，若没有评论则返回 null。

const worksheet = univerAPI.getActiveWorkbook().getActiveSheet();
 
// comment only attch to single cell, if range is A1:J10 equal A1
const range = worksheet.getRange(0, 0, 1, 1);
 
// get comment
const comment = range.getComment();
console.log(comment);

更新 / 删除 / 解决评论

// update content
await comment?.update({
  dataStream: 'hello world222\r\n',
});
 
// delete comment
await comment?.delete();
 
// or
 
// resolve comment
await comment?.resolve();

获取评论回复列表

返回一个 FThreadComment[] 对象数组。

// get replies
const replies = comment?.getReplies();
console.log(replies);
 
// get range of this comment
console.log(comment?.getRange());

事件

const workbook = univerAPI.getActiveWorkbook();
 
// event
workbook.onBeforeAddThreadComment
workbook.onBeforeUpdateThreadComment
workbook.onBeforeDeleteThreadComment
 
// comment change event include add, update, delete
workbook.onThreadCommentChange
 
// event callback return false will stop the corresponding operation
图表Pro查找 & 替换
这个页面对您有帮助吗？