轻松实现文本标注：介绍 Annotation-React 库

ling202024-07-23 10:05

文本标注功能在教育、数据分析、内容管理等领域中变得越来越重要。为了帮助开发者更轻松地实现这一功能，我写了这个 Annotation-React 库。这个库可以让你在 React 应用中轻松地对文章或段落中的单词或句子进行划线打标。

功能目前较简单，一张gif就能演示完成如下:

快速开始

安装

首先，你需要通过 npm 或 yarn 安装 Annotation-React 库：

bash 复制代码

npm install annotation-react

或

bash 复制代码

yarn add annotation-react

使用示例

以下是一个简单的使用示例，展示了如何在 React 应用中使用 Annotation-React 库对文本进行标注。

typescript 复制代码

import React from "react";
import { Annotation } from "annotation-react";
import { createRoot } from "react-dom/client";
import "annotation-react/dist/style.css";

createRoot(document.getElementById("app")!).render(
  <Annotation
    onChange={(annos) => {
      console.log({ annos });
    }}
    tags={[{ content: "error" }, { content: "success" }]}
    sentence="A story is a component with a set of arguments that define how the component should render."
  />
);
    
export default App;

参数说明

sentence：需要进行标注的文本内容。
onChange：标注完成后的回调函数，返回当前所有标注结果。
tags：自定义打标内容。

更多参数

typescript 复制代码

export interface PAnnotation {
    /** content to be showed */
    sentence?: string;
    tags?: TTag[];
    /**the annotations that already exist */
    annoations?: TAnnoDetail[];
    /**the fontSize of main content,now only support number, will use px unit */
    fontSize?: number;
    /** Ensure that there is enough space between the rows to fit a tag */
    lineHeight?: string;
    /** the color of marked text by annotation */
    hightlightColor?: string;
    hightlightBgColor?: string;
    /** can not mark */
    readonly?: boolean;
    /** notify when annotations add or remove */
    onChange?: (annoations: TAnnoDetail[]) => void;
}

目前项目刚发布第一个版本，有不足的地方希望大家多提pr

项目git地址