轻松实现文本标注:介绍 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地址

相关推荐
活宝小娜1 小时前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点1 小时前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow1 小时前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o1 小时前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic2 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā2 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年3 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder3 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727574 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart4 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter