TinyEditor 提供了多种机制来实现内容的实时保存与恢复，核心思路是结合编辑器自身的事件监听、浏览器本地存储以及可选的后端服务。下面这个表格梳理了不同场景下的关键方法和配置选项。
| 功能模块 | 实现方式 | 适用场景 | 关键配置/API |
|---|---|---|---|
| 内容监听 | 监听编辑器的 text-change 事件 | 所有场景的基础 | editor.on('text-change', callback) 26 |
| 本地自动保存 | 将内容持久化到 localStorage | 单浏览器、防意外丢失 | localStorage.setItem() 1 |
| 协同编辑与实时保存 | 通过 WebSocket 或 WebRTC 连接后端服务 | 多人实时协作、长期持久化 | 配置 provider (如 type: 'websocket') 48 |
| 恢复内容 | 初始化编辑器时，从本地或服务器获取内容并设置 | 页面刷新后恢复 | editor.root.innerHTML = content 或相关API 2 |
💾 实现步骤详解
1. 监听内容变化
这是实现实时保存的第一步。你需要监听编辑器内容的变化事件，并在回调函数中执行保存逻辑。
javascript
下载
复制
运行
// 初始化编辑器后，监听内容变化
editor.on('text-change', (delta, oldDelta, source) => {
// 获取编辑器内容的HTML字符串
const htmlContent = editor.root.innerHTML; // 或者使用其他获取内容的API
// 执行保存操作，例如保存到本地存储
localStorage.setItem('draftContent', htmlContent);
});
text-change 事件在用户输入、格式化文本或通过API修改内容时都会触发，提供了最高的实时性。
2. 实现保存逻辑
根据你的需求，可以选择不同的保存策略。
- 本地保存（防丢失） ：适合临时草稿，防止浏览器意外刷新或关闭。
javascript
下载
复制
运行
// 在 text-change 事件回调中
const saveDraft = () => {
const content = editor.root.innerHTML;
// 可以加入节流（throttle）优化性能，避免过于频繁的写入
localStorage.setItem('tinyeditor_autosave_draft', content);
console.log('内容已自动保存到本地');
};
editor.on('text-change', saveDraft);
- ••保存到服务器（持久化） ：需要将内容通过API发送到你的后端服务。
javascript
下载
复制
运行
editor.on('text-change', () => {
const content = editor.root.innerHTML;
// 示例：使用 fetch API 将内容发送到服务器
fetch('/api/save-content', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ content: content })
})
.then(response => response.json())
.then(data => {
console.log('保存成功', data);
})
.catch(error => {
console.error('保存失败:', error);
});
});
重要提示：在将HTML内容保存到数据库前，务必在服务器端进行严格的安全过滤（例如使用专业的HTML净化库），以防止XSS攻击。
3. 恢复已保存的内容
在编辑器初始化完成后，你需要检查是否存在之前保存的草稿，并将其载入编辑器。
javascript
下载
复制
运行
// 页面加载或编辑器初始化后
document.addEventListener('DOMContentLoaded', function() {
// 尝试从本地存储加载草稿
const savedContent = localStorage.getItem('tinyeditor_autosave_draft');
if (savedContent) {
// 将内容设置到编辑器中
editor.root.innerHTML = savedContent;
// 或者使用编辑器提供的 setContent 等方法
}
});
🚀 高级功能：协同编辑与实时保存
如果您的应用需要支持多人实时协作编辑，TinyEditor提供了开箱即用的协同编辑模块。该模块基于Yjs库，能够自动处理操作同步、冲突解决和实时保存。
-
1.1.安装模块：需要安装额外的依赖包，如
yjs,y-websocket等。 -
2.2.配置后端：TinyEditor社区提供了可快速用Docker部署的后端服务，其中定义了WebSocket服务、数据持久化（如使用MongoDB）等服务。
-
3.3.前端配置：在初始化编辑器时，配置协同编辑模块，指向你的后端服务地址。
javascript
下载
复制
运行
const editor = new FluentEditor('#editor', {
theme: 'snow',
modules: {
'collaborative-editing': {
provider: {
type: 'websocket',
options: {
serverUrl: 'ws://your-websocket-server.com', // 你的WebSocket服务地址
roomName: 'your-document-id' // 唯一的文档ID，同一房间的用户将协同编辑
}
}
}
}
}
});
在此模式下，所有用户的编辑操作会通过WebSocket服务实时同步，后端服务通常也会自动将文档内容持久化到数据库，实现了真正的实时保存和恢复。
💎 实践建议
- 性能优化：对于自动保存，建议使用**节流（Throttle）** 技术，避免每次按键都触发保存请求。
- 用户体验：可以增加视觉反馈，如“已保存”提示图标，提升用户体验。
- 错误处理：网络请求务必包含错误处理逻辑，在保存失败时给予用户提示并提供备选方案。
希望这些详细的说明能帮助你顺利实现TinyEditor的实时保存与恢复功能。如果你对特定场景有更深入的问题，我很乐意继续探讨。
