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

文本标注功能在教育、数据分析、内容管理等领域中变得越来越重要。为了帮助开发者更轻松地实现这一功能,我写了这个 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地址

相关推荐
秦jh_3 分钟前
【Linux】多线程(概念,控制)
linux·运维·前端
蜗牛快跑21315 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy16 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇2 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss