@bytesurging/editor

基于 ReactQuill + Quill 的提词器富文本编辑器组件，支持目录锚点、侧边栏 TOC、工具栏样式和内容回传。

功能

• 富文本编辑：加粗、下划线、文字颜色、背景色
• 目录锚点：选中文本一键“设为目录”/“取消目录”
• 自动 TOC：自动识别 h1~h6 生成目录项
• 左侧目录导航：点击目录滚动到内容锚点
• 输出回调：onUpdate 返回 html、json(Delta)、text
• 可编辑/只读、全屏模式、工具栏和目录开关

安装

pnpm add @bytesurging/editor
# 或
npm i @bytesurging/editor

依赖 React 18+

快速开始

import { TeleprompterEditor } from '@bytesurging/editor'

export default function Page() {
  return (
    <TeleprompterEditor
      placeholder="在此输入提词内容…"
      showToolbar
      showTocSidebar
      tocSidebarTitle="目录"
      onUpdate={({ html, json, text }) => {
        // 保存到后端
        console.log({ html, json, text })
      }}
    />
  )
}

初始化与保存

编辑器支持用 HTML 或 Quill Delta JSON 初始化：

<TeleprompterEditor content={savedJsonOrHtml} />

建议保存时优先存 json（可编辑性最好）：

<TeleprompterEditor
  content={savedJson}
  onUpdate={({ json }) => {
    // save json
  }}
/>

API（TeleprompterEditor）

• content?: string | DeltaLike | Record<string, unknown>
• placeholder?: string
• editable?: boolean
• onUpdate?: (params: { html: string; json: DeltaLike; text: string }) => void
• editorRef?: (editor: QuillLike | null) => void
• showToolbar?: boolean
• showTocSidebar?: boolean
• tocSidebarTitle?: string
• showAiCheck?: boolean
• aiCheckLabel?: string
• onAiCheck?: (text: string) => void
• aiCheckDisabled?: boolean
• fullScreen?: boolean
• className?: string
• contentScrollMaxHeight?: string | number

导出项

import {
  TeleprompterEditor,
  getTextFromEditor,
  EditorToolbar,
  TocProvider,
  TocSidebar,
} from '@bytesurging/editor'

本地开发

cd packages/editor
pnpm install
pnpm dev

本地预览入口在 packages/editor/dev，发布到 npm 时仅包含 dist/。

构建

pnpm build

产物：dist/（ESM + CJS + d.ts）