# 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-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 简易富文本编辑器

一个不依赖第三方库的轻量富文本编辑器，基于原生 `contenteditable` 实现，当前重点增强了粘贴还原、文件卡片、源码/Markdown 辅助编辑、草稿恢复和编辑区内提示交互。

## 文档导航
- `README.md`：项目概览与快速开始。
- `docs/FEATURES.md`：当前已具备功能清单与能力边界。
- `docs/USAGE.md`：使用文档、初始化方式、模式说明、常见操作。
- `docs/EXEC_COMMAND_MIGRATION.md`：逐步去除 `execCommand` 的迁移方案。
- `docs/ROADMAP.md`：通用编辑器方向的分阶段开发计划。

## 文件结构
- `index.html`：页面入口，挂载编辑器容器并引入资源。
- `editor.css`：编辑器样式。
- `editor.js`：构建产物，由 `src/` 模块源码拼装生成。
- `src/core/SimpleRichEditor.js`：核心类、基础渲染与事件绑定。
- `src/modules/`：按功能拆分的扩展模块，如面板、Slash 命令、图片、表格、上传、输出与 Markdown 转换等。
- `scripts/build-editor.js`：将 `src/` 重新构建为单文件 `editor.js`。
- `package.json`：本地构建脚本入口。
- `docs/`：功能、使用、迁移与路线图文档。

## 快速开始
1. 保持 `index.html`、`editor.css`、`editor.js` 在同一目录。
2. 直接用浏览器打开 `index.html`。
3. 默认会创建 `window.editorInstance`，可在控制台直接调用实例方法。
4. 如果修改了 `src/` 下源码，请先执行一次构建再刷新页面。

## 当前重点能力
- 富文本基础编辑：标题、段落、加粗、斜体、下划线、删除线、对齐、缩进、列表。
- 结构化内容块：Todo、引用块、代码块、分割线、表格、图片、文件卡片。
- 文件资源面板：集中查看当前编辑区内的附件与下载链接，支持快速定位与打开。
- 附件联动：支持在资源面板中直接替换或删除附件，并同步更新编辑区。
- 粘贴增强：HTML / 纯文本 / 文件粘贴，带清洗、归一化与调试回放能力。
- 多模式编辑：常规模式、HTML 源码模式、Markdown 辅助编辑模式。
- 本地草稿：自动保存、刷新后编辑区内恢复提示。
- 查找替换：支持工具栏、`/` 快捷命令、`Ctrl/Cmd + F`，覆盖富文本 / 源码 / Markdown 模式。
- 编辑器内提示：已将草稿恢复与清空确认改成编辑区内提示，不再依赖浏览器原生弹窗。
- 基础事件接口：已支持 `onChange`、`onFocus`、`onBlur`。

## 初始化示例
```js
window.editorInstance = new SimpleRichEditor('#app', {
  placeholder: '请输入内容...',
  initialHTML: '<p>这是一个由 JavaScript 初始化的简易富文本编辑器。</p>',
  enablePasteDebug: false,
  enableDraftAutosave: true,
  draftAutosaveDelay: 800,
  draftRestorePrompt: true,
  onChange: ({ html, mode, source }) => {
    console.log('change', mode, source, html);
  },
  onFocus: ({ mode, source }) => {
    console.log('focus', mode, source);
  },
  onBlur: ({ mode, source }) => {
    console.log('blur', mode, source);
  },
}).init();
```

## 常用配置
- `placeholder`：编辑区占位提示。
- `initialHTML`：初始化内容。
- `enablePasteDebug`：是否开启粘贴调试面板。
- `enableDraftAutosave`：是否开启本地草稿自动保存。
- `draftAutosaveDelay`：草稿自动保存延迟，单位毫秒。
- `draftRestorePrompt`：是否启用草稿恢复提示；当前 UI 为编辑区内提示条。
- `draftStorageKey`：自定义草稿存储键，便于多实例隔离。
- `onImageUpload(file)`：自定义图片上传，返回最终 URL。
- `onFileUpload(file)`：自定义文件上传，返回最终 URL。
- `onChange(payload)`：内容实际变更后的回调。
- `onFocus(payload)`：编辑区或源码/Markdown 编辑区获得焦点时回调。
- `onBlur(payload)`：编辑区或源码/Markdown 编辑区失焦时回调。

## 构建方式
- 推荐执行：`npm run build`
- 或直接执行：`node scripts/build-editor.js`
- 日常维护以 `src/` 为源码入口，`editor.js` 只作为浏览器直接引入的单文件产物。

## 开发说明
- 当前版本仍存在部分 `document.execCommand` 依赖，详见 `docs/EXEC_COMMAND_MIGRATION.md`。
- 后续通用编辑器开发计划见 `docs/ROADMAP.md`。

## 适用场景
- 后台 CMS 内容编辑。
- 文章、公告、通知、知识库内容录入。
- 带图片、文件、表格的富文本输入。
- 需要调试网页粘贴还原结果的本地场景。

## 已知边界
- 仍是轻量编辑器，不适合复杂协同编辑。
- 复杂网页样式会经过清洗与归一化，不保证 100% 原样保留。
- Markdown 目前更偏“辅助编辑与导入导出能力”，不是完全独立的数据模型。