# @bendyline/squisq-editor-react 中文文档

规范地址：https://npmcn.com/package/%40bendyline/squisq-editor-react/

版本：2\.13\.21
npm 元数据更新时间：2026-11-07T19:46:24.978Z
中文译文更新时间：2026-11-07T22:10:06.205Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40bendyline/squisq-editor-react
原文对照：https://npmcn.com/package/%40bendyline/squisq-editor-react/?lang=original
项目主页：https://github.com/bendyline/squisq
源码仓库：https://github.com/bendyline/squisq

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：4.6 MB，67 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^22\.22\.2 \|\| ^24\.15\.0 \|\| \>=26\.0\.0
- 运行依赖：26 个
- peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，harper\.js ^2\.7\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，monaco-editor ~0\.50\.0
- 首次发布：2026-03-16T02:11:27.506Z
- 最新版本发布：2026-11-07T19:46:24.641Z
- 近 30 天下载量：6507（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：109（近 12 个月 109 个）

## 中文简介

用原始/ WYSIWYG/ Squisq 文档的审查模式反应编辑器 shell

## 安装

```sh
npm install @bendyline/squisq-editor-react
```

也可以使用：`pnpm add @bendyline/squisq-editor-react`、`yarn add @bendyline/squisq-editor-react`、`bun add @bendyline/squisq-editor-react`

## README

# @bendyline/squisq-editor-反应

对 Squisq 文档进行反应编辑器外壳, 包含三个集成视图: 一个摩纳哥驱动的原始 Markdown 编辑器, 一个 Tiptap WYSIWYG 丰富的文本编辑器,和一个活块预览. 视图之间的切换使文档自动同步.

部分 [斯奎斯克语Name](https://github.com/bendyline/squisq) 单相机.

[![npm](https://img.shields.io/npm/v/@bendyline/squisq-editor-react)](https://www.npmjs.com/package/@bendyline/squisq-editor-react) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/bendyline/squisq/blob/main/LICENSE)

## 安装

```bash
npm install @bendyline/squisq-editor-react @bendyline/squisq @bendyline/squisq-react monaco-editor
```

**同伴依赖性 :** `react` 财务报告和审定财务报表 `react-dom` (v18或v19),加 `monaco-editor` (~0.50.0) (中文(简体) ). 摩纳哥在运行时间是懒散地装货,但它是一个 需要对等点, 因为软件包的公开类型Script声明曝光 摩纳哥编辑类型. Tiptap 被捆绑为一个正常的依赖性——你不 需要自己安装.

## 快速启动

```tsx
import { EditorShell } from '@bendyline/squisq-editor-react';
import '@bendyline/squisq-editor-react/styles';

function App() {
  return <EditorShell initialMarkdown="# Hello World" />;
}
```

## 编辑器视图

| 视图 | 由电源 | 说明 |
| --- | --- | --- |
| **原始内容** | 摩纳哥编辑器 | 使用语法加亮的 Markdown 源代码完全编辑 |
| **维基文库** | 提示 | 带有格式工具栏的丰富文本编辑 |
| **预览** | DocPlayer 文档显示器 | 用主题选择的 Live 实现块预览 |

## 构成部分

| 构成部分 | 说明 |
| --- | --- |
| `EditorShell` | 顶级编辑器 — 将所有三个视图与视图切换器合并 |
| `EditorProvider` | 编辑器状态管理的背景提供者 |
| `RawEditor` 编号 : `WysiwygEditor` 编号 : `PreviewPanel` | 单个视图, 导出为自定义布局 |
| `JsonEditor` | 绑定在 Squisq- a 附加说明的计划中的 JSON 值的可编辑格式 |
| `ImageEditor` 编号 : `ImageViewer` | 层层光栅作者表面+只读查看器 |
| `RecorderPanel` 编号 : `RecorderButton` 编号 : `RecorderModal` | 浏览器音频/相机/屏幕记录(MediaRecorder) |
| `FolderView` | 独立的文件夹浏览器表面 |

除了组件外, 软件包还导出作者的 Tiptap 扩展名 ASCII 图,树和时间表. 时间线围栏成为共享尺度 wYSIWYG模式下的铁道画布:单击线条或键盘可访问的添加按钮 添加点,选择要编辑其标签/调用的任何点,并保留多个 铁轨和树枝可见。 每个安全编辑都被写回 重新生成, 已校验的栅栏文字, 所以 Raw Markdown 保留了真理的来源; 视觉突变 如果丢失未建模的源头, 则暂停 。 软件包还导出标题模板说明, 标记下QQ Tiptap 桥 (单位:千美元)`markdownToTiptap` 编号 : `tiptapToMarkdown`),拖放辅助工具 (单位:千美元)`useFileDrop`, (中文(简体) ), `processMediaFiles`),文件类型检测(`resolveFileKind`, (中文(简体) ), 和块-时/时序编辑原始(`useBlockNavigator`, (中文(简体) ), `BlockCardView`, (中文(简体) ), `TimelineTrack`) (中文(简体) ).

## 显著 `EditorShell` 特性

-   **版本** - 通过 `allowVersioning` + 键 `workspaceContainer` 自动保存 闲置的快照( t)`versioningAutoSaveIdleMs`,默认值为5000毫秒) (单位:千美元)`versioningPrunePolicy`,默认保存倒数-50;一个版本历史面板 在工具栏中显示.
-   **记录** - 带有 `mediaProvider` 有线,在 工具栏(`allowRecording`默认值 `true`) (中文(简体) ). 屏幕捕获曝光 **怎么办 记录** 高级设置: 表面偏好, 屏幕/ 窗口拾取器 行动,以及整个地表或协调区域捕捉。 坐标为像素 相对于所选表面的左上; 现场预览和编码视频 使用相同的裁剪,音频不变。 无效或出入境区域 明显失败并释放捕获。 区域录制使用30英尺高的画布; 缩小区域的窗口或停止屏幕共享会结束拍摄 . 浏览器或主机仍然拥有取源器和可用的表面类型. 记录器的高级设备 设置扩展 发现麦克风/相机, 只显示抓取 浏览器广告的限制,将相机和屏幕分开 限制双相录音,并曝光MediaRecorder编码器,比特率, 和键框提示。 首选限制使用最接近的现有设置; 所需麦克风/相机限制在选定输入不能时失败 满足它们( 屏幕设置仍为首选项, 按 `getDisplayMedia`) (中文(简体) ).
-   **演示文稿模式** – 每个使用视图可以填充 Squisq 控件,打开 a 同步观众窗口,或者接管整个屏幕. 幻灯片放映/录像 回放、 Page/ 文件滚动和 Narate 表面仍然链接到 主视图.
-   **闪卡模式** —— Use 菜单可以预测原始嵌入区块树 逐渐揭示了学习卡和多选题。 普通类 标题自动推断; `{study=flashcard}` 拆散一张牌 边界和 `{study=multiple-choice-flashcard}` 让孩子成为问题之一, 儿童2是默认正确的答案, 其余的儿童分散注意力.
-   **小组讨论会** —— 说 `outline` (标题图框)和 `inlinePreview` (每个街区) SVG 预览地沟, `inlinePreviewWidth` 默认 320). 块预览包括 普通章节和无标题的入门文本;模板标签是可选的. 在~720px下面,这些窗帘隐藏的地方 **导航表** 现为:a 右边缘有外观和块预览标签 。 在接触中, 从右边切入到轮廓,或向下切入 预览; 选择一节将其关闭 。 用它来控制它 `navigationSheet` 编号 : `onNavigationSheetChange` 从主机输入如后键关闭它.
-   **代码和图像模式** - 通过 `fileName` 编号 : `language` 获得摩纳哥独占 代码编辑器,或 `imageSrc` (+ 数) `imageMode: 'edit'`)用于图像表面. `.jsonc` 文档, `language="jsonc"`栅栏 `jsonc` 片段使用 JSON 以行和块注释支持来突出显示.
-   **主机触发查找模式** 控制 `findMode` 财务报告和审定财务报表 `onFindModeChange` (或打电话) `setFindMode` 从上下文改为: 工具栏的编辑动作带有活搜索, Match case / 完整单词, 上/下个导航,突出显示匹配,并替换/替换全部 可编辑文档. `findRequest` 在给定查询和匹配时打开“查找”; `findShortcut` 选择入选 Ctrl/Cmd+F和 Ctrl+H(苹果上的Cmd+可选+F). 没有 查找触发按钮会被添加, 除非主机提供了一个 .
-   **嵌入** —— 说 `readOnly`, (中文(简体) ), `placeholder`, (中文(简体) ), `submitOnEnter`, (中文(简体) ), `fullWidth`, (中文(简体) ), `thinMargins`, (中文(简体) ), `minHeight`编号 :`maxHeight` 用于聊天组合器的自动浏览,加 通过主机控制写打字 `writeCanvasSettings` (单位:千美元)`textSize` 财务报告和审定财务报表 `lineSpacing`) (中文(简体) ). 设定 `hostMode="chat"` 将外壳保存在 Write 视图中, 删除它的视图标签,并隐藏自定义布局、变形、视图选项,以及 文档设置 . `showCodeCopyButton` 选择文档/页面预览到一个 微妙的栅栏编码复制控制; 使用 `onCopyCode` 连接剪贴板 在电子或本地主机中(浏览器主机返回到 `navigator.clipboard.writeText`) (中文(简体) ).
-   **颜色方案** - 通过 `colorScheme="light" | "dark"` 用于编辑的铬 (单位:千美元)**v1.5: (中文(简体) )** 重新命名为旧 `theme` 道具; `RawEditor`属于自己的 `theme` 道具为 现在 `monacoTheme`) (中文(简体) ).

还出口(v1.5): `useMonacoLoader` (摩尼宝靴一分), 和自定义主题/模板提供者堆栈 - `CustomThemeProvider` 编号 : `useCustomThemes` 编号 : `useDocCustomThemes` 财务报告和审定财务报表 `CustomTemplateProvider` 编号 : `useCustomTemplates` 编号 : `useDocCustomTemplates`。 。 。 .

## 上下文 API

使用 `useEditorContext()` 访问编辑器状态和来自孩子的行动 组件。 上下文值平平-州域和行动方法活 并肩作战:

```tsx
import { useEditorContext } from '@bendyline/squisq-editor-react';

function MyComponent() {
  const { markdownSource, doc, activeView, setMarkdownSource, setActiveView, setFindMode } =
    useEditorContext();
  // markdownSource: string, doc: Doc | null, activeView: 'raw' | 'wysiwyg' | 'preview'
}
```

## 样式

导入编辑器 CSS :

```ts
import '@bendyline/squisq-editor-react/styles';
```

## 完整 API 参考

见 [文件/API.md](https://github.com/bendyline/squisq/blob/main/docs/API.md) 全体会议 `EditorShellProps` 引用、上下文 API 和每个导出 组件、钩和帮助器.

## 相关软件包

| 软件包 | 说明 |
| --- | --- |
| [@bendyline/squisq (英语)](https://www.npmjs.com/package/@bendyline/squisq) | 无头核心——计划,模板,空间,标记下,存储 |
| [@bendyline/squisq-反应](https://www.npmjs.com/package/@bendyline/squisq-react) | 渲染道克的反应组件 |
| [@bendyline/squisq-formats (中文(简体) )](https://www.npmjs.com/package/@bendyline/squisq-formats) | DOCX, PDF, HTML 导入/导出 |

## 许可证

[麻省理工学院](https://github.com/bendyline/squisq/blob/main/LICENSE)

## 常见问题

### @bendyline/squisq-editor-react 是什么？

用原始/ WYSIWYG/ Squisq 文档的审查模式反应编辑器 shell

### 如何安装 @bendyline/squisq-editor-react？

在项目目录运行 npm install @bendyline/squisq-editor-react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（^18\.0\.0 \|\| ^19\.0\.0）、react-dom（^18\.0\.0 \|\| ^19\.0\.0）、monaco-editor（~0\.50\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @bendyline/squisq-editor-react 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @bendyline/squisq-editor-react 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @bendyline/squisq-editor-react 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^22\.22\.2 \|\| ^24\.15\.0 \|\| \>=26\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @bendyline/squisq-editor-react 可以商用吗？

@bendyline/squisq-editor-react 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @bendyline/squisq-editor-react 的下载量有多少？

根据 npm 官方下载统计，@bendyline/squisq-editor-react 在 2026/10/08 – 2026/11/06 这 30 天内被下载 6,507 次，日均约 217 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @bendyline/squisq-editor-react 还在维护吗？

最新版本 2\.13\.21 发布于 2026/11/08（今天）；至今共发布 109 个版本，其中过去 12 个月发布了 109 个；首次发布于 2026/03/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。