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

相关推荐
장숙혜2 分钟前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang4 分钟前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端7 分钟前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_10 分钟前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
莫问alicia11 分钟前
react 常用钩子 hooks 总结
前端·javascript·react.js
Mintopia20 分钟前
图形学中的数学基础与 JavaScript 实践
前端·javascript·计算机图形学
Mintopia26 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu27 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙1 小时前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu
jaywongX1 小时前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue