# sceditor

**Repository Path**: chenlong_sd/sceditor

## Basic Information

- **Project Name**: sceditor
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-06
- **Last Updated**: 2026-06-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简易富文本编辑器

一个不依赖第三方库的轻量富文本编辑器，基于原生 `contenteditable` 实现。当前主线已覆盖富文本编辑、表格、表单、资源、草稿、版本历史、批注和结构化文档快照。

## 文档导航

- `README.md`：项目概览、快速开始和开发入口。
- `docs/文档索引.md`：完整文档索引、推荐阅读顺序和维护规则。
- `docs/功能清单.md`：当前能力清单与能力边界。
- `docs/使用文档.md`：初始化、配置、常见操作和 API 接入示例。
- `docs/服务端存储建议.md`：后台提交、文章、草稿、版本历史和批注审核流的服务端存储建议。
- `docs/结构化文档模型.md`：稳定 ID、结构化文档模型与双轨恢复边界。
- `docs/协作范围.md`：实时协作范围、冲突模型与暂缓边界。
- `docs/维护与发布检查.md`：开发校验和发布前检查。更多专题文档见 `docs/文档索引.md`。

## 文件结构

- `index.html`：页面入口，挂载编辑器容器并引入资源。
- `editor.css`：编辑器样式。
- `editor.js`：发布用单文件产物，平时不直接维护。
- `editor.min.js`：发布用单文件压缩产物。
- `src/core/SimpleRichEditor.js`：核心类、基础渲染与事件绑定。
- `src/modules/`：按功能拆分的编辑器模块。
- `scripts/build-editor.js`：将 `src/` 打包为单文件 `editor.js`。
- `scripts/minify-editor.js`：压缩单文件产物。
- `scripts/run-tests.js`：用本机 Chrome / Edge headless 运行 `tests.html`。
- `tests.html`：浏览器自动化回归入口。
- `docs/`：功能、使用、路线图、结构化模型、协作边界、服务端存储、生产协作服务端和维护检查文档。

## 快速开始

1. 保持 `index.html`、`editor.css` 与 `src/` 目录结构完整。
2. 直接用浏览器打开 `index.html`。
3. 默认会创建 `window.editorInstance`，可在控制台直接调用实例方法。
4. 日常开发直接修改 `src/` 并刷新页面即可；只有需要单文件产物时再执行打包。

## 当前重点能力

- 富文本、表格、图片、文件、源码 / Markdown 辅助编辑和结构化内容块。
- **块间插入引导**：智能 hover 引导线，轻松在图片/表格/分隔线等元素间插入内容或分割为分栏布局。
- 表单系统：schema、填写态、校验、提交、排序、复制、条件显示、自定义字段、`file` / `rating`、字段状态协议。
- 上传与资源：上传进度、失败重试、运行时 `blob:` 代理、base64 导出还原。
- 草稿同步、版本历史、批注和 `{ html, document }` 双轨恢复。
- 后台提交：`getSubmitPayload()` / `getSubmitHTML()` 统一处理未应用的源码 / Markdown 草稿和资源还原。
- 插件、slash 命令、工具栏配置、多实例隔离、移动端适配和基础无障碍。

完整能力清单见 `docs/功能清单.md`，接入示例和 API 细节见 `docs/使用文档.md`。

## 初始化示例

```js
window.editorInstance = new SimpleRichEditor('#app', {
  placeholder: '请输入内容...',
  initialHTML: '<p>初始化内容</p>',
  layout: {
    width: 'min(1100px, 100%)',
    height: 560,
    padding: 20,
    toolbarControlHeight: 36,
  },
  enableDraftAutosave: true,
  draftRestorePrompt: true,
  onChange: ({ html, mode, source }) => {
    console.log('change', mode, source, html);
  },
}).init();
```

## 常用配置

- `placeholder`：编辑区占位提示。
- `initialHTML`：初始化内容。
- `enablePasteDebug`：是否开启粘贴调试面板。
- `enableDraftAutosave` / `draftAutosaveDelay` / `draftRestorePrompt`：本地草稿自动保存与恢复提示。
- `draftSync`：服务端草稿同步配置；新接入建议保存 `{ html, document, savedAt }`，旧的 `{ html, savedAt }` 仍兼容，具体建议见 `docs/服务端存储建议.md`。
- `layout`：基础尺寸配置，支持 `width`、`height`、`padding`、`toolbarControlHeight`。
- `versionHistory`：版本历史配置。
- `comments`：批注配置。
- `forms`：表单系统配置，支持 `mode`（`edit` / `fill`）与 `onSubmit`。
- `onImageUpload(file, { onProgress })` / `onFileUpload(file, { onProgress })`：自定义上传，可上报进度。
- `onChange` / `onFocus` / `onBlur` / `onCommentChange`：事件回调。

## 构建与测试

- 单文件打包：`npm run build` 或 `npm run bundle`
- 自动化回归：`npm test`
- 仅运行浏览器测试：`npm run test:browser`
- 也可直接执行：`node scripts/build-editor.js`、`node scripts/run-tests.js`
- `npm test` 直接以 `src/` 源码作为入口，通过本机 Chrome / Edge headless 打开 `tests.html`。
- 若浏览器不在常见安装路径，可通过环境变量 `SCEDITOR_TEST_BROWSER` 指定可执行文件路径。
- 日常维护以 `src/` 为源码入口，`editor.js` 只在最终交付或发布时生成。

## 开发说明

- 后续通用编辑器开发计划见 `docs/路线图.md`。
- 稳定 ID、结构化文档模型和双轨恢复边界见 `docs/结构化文档模型.md`。
- 实时协作第一阶段运行时骨架已进入主线，范围与冲突模型见 `docs/协作范围.md`，生产服务端设计见 `docs/协作服务端设计.md`。
- 服务端存储建议与开发维护检查分别见 `docs/服务端存储建议.md` 和 `docs/维护与发布检查.md`。
- 完整文档索引见 `docs/文档索引.md`。
- `editor.js` 是生成产物，不要在普通开发中直接维护。

## 适用场景

- 后台 CMS 内容编辑。
- 文章、公告、通知、知识库内容录入。
- 带图片、文件、表格的富文本输入。
- 内嵌式问卷、报名表、轻量表单配置。
- 本地调试复杂网页粘贴还原。

## 已知边界

- 当前提供实时协作第一阶段运行时骨架，但尚未提供完整 CRDT / OT 文本合并和远端选区体验。
- 表格单元格内容在结构化模型里仍按 sanitized HTML fragment 保守保存。
- 复杂网页样式会经过清洗与归一化，不保证 100% 原样保留。
- Markdown 目前更偏“辅助编辑与导入导出能力”，不是完全独立的数据模型。