ueditor使用indexBD缓存草稿——多重防护编辑内容丢失
Author：zhoulujun Date：
本站phpcms使用ueditor编辑文件，phpcms登录失效了，会自动刷新编辑页面，这个时候之前辛辛苦苦的编辑内容，全部作废
虽然ueditor等编辑会自动保存草稿到到localstorage，但是如过你此篇文章未编辑完成，又编辑了其他文章，那么ueditor的草稿会被覆盖
所以，首先用indexDB，保所有的编辑内容，缓存到数据库。然后，用ajax去提交表单。
这样，文件草稿内容就不怕丢失了
indexDB保存草稿
草稿保存到indexDB
var dataBaseIndexDB; // 统一使用db变量存储数据库实例
// 初始化数据库
try {
var request = indexedDB.open('ueditor', 1);
request.onupgradeneeded = function (event) {
dataBaseIndexDB = event.target.result;
// 创建对象存储（如果不存在）
if (!dataBaseIndexDB.objectStoreNames.contains('v9_news_data')) {
dataBaseIndexDB.createObjectStore('v9_news_data', { keyPath: 'id' });
}
};
request.onsuccess = function (event) {
dataBaseIndexDB = event.target.result;
console.log("数据库打开成功！");
};
request.onerror = function (event) {
console.error("数据库打开失败:", event.target.error);
};
} catch (e) {
console.log(e)
}
var titleInput = document.getElementById('title')
var keywordsInput = document.getElementById('keywords')
var descriptionInput = document.getElementById('description')
function saveToIndexDB(content) { // 添加参数接收
if (!dataBaseIndexDB) {
console.error("数据库尚未初始化完成");
return;
}
// 使用正确的对象存储名称
const transaction = dataBaseIndexDB.transaction('v9_news_data', 'readwrite');
const store = transaction.objectStore('v9_news_data');
const request = store.put(content);
request.onsuccess = () => {
console.log("数据保存成功:");
};
request.onerror = (event) => {
console.error("保存失败:");
};
// 监听事务完成
transaction.oncomplete = () => {
console.log("事务已完成");
};
}
var tempContentId = Math.random().toString(3,10);
var searchParams = new URLSearchParams(window.location.search)
var contentId = searchParams.get('id')
function addContent(content) {
var id = contentId
if (!id) {
id = tempContentId
}
var title = titleInput && titleInput.value;
var keywords = keywordsInput && keywordsInput.value
var description = descriptionInput && descriptionInput.value
addContent({ id, content, title, keywords, description, time: new Date().getTime() })
}
function clearIndexContent(){
if(!tempContentId){
return
}
// TODO 清理indexDB
}
window.addEventListener('beforeunload ',clearIndexContent)其次，在
phpcms/modules/content/templates/content_add.tpl.php 与 content_edit.tpl.php 修改refersh_window
<div class="fixed-but text-c">
<div class="button"><input value="<?php echo L('save_close');?>" type="submit" name="dosubmit" class="cu" style="width:145px;" onclick="refersh_window()"></div>
<div class="button"><input value="<?php echo L('save_continue');?>" type="submit" name="dosubmit_continue" class="cu" style="width:130px;" title="Alt+X" onclick="refersh_window()"></div>
<div class="button"><input value="<?php echo L('c_close');?>" type="button" name="close" onclick="refersh_window();close_window();" class="cu" style="width:70px;"></div>
</div>refersh_window 里面增加清楚缓存 或者保存缓存的方法
Ajax 提交表单
$('#myform').submit(function(e){
e.preventDefault(); // 阻止默认表单提交
// 创建 FormData 对象（支持文件上传）
let formData = new FormData(this);
$.ajax({
url: $(this).attr('action'), // 保持原提交地址
type: 'POST',
data: formData,
processData: false, // 必须！避免jQuery处理FormData
contentType: false, // 必须！自动识别内容类型
dataType: 'json', // 期待返回JSON格式
success: function(response) {
if(response.status) {
alert('保存成功');
// 如果需要跳转（参考原系统逻辑）
if(response.url){
window.location.href = response.url;
}
} else {
alert('保存失败: ' + response.message);
}
},
error: function(xhr) {
alert('请求异常，请检查网络');
}
});
});
</script>然后修改phpcms
// 在对应控制器方法中（content::add）
public function add() {
// ...原有处理逻辑...
// 改为判断ajax请求
if($this->input->is_ajax_request()){
if($result){ // 假设$result是保存结果
echo json_encode(['status' => 1, 'message' => '成功', 'url' => $return_url]);
}else{
echo json_encode(['status' => 0, 'message' => $error]);
}
exit; // 结束输出
}
// 原有非ajax处理逻辑...
}
转载本站文章《ueditor使用indexBD缓存草稿——多重防护编辑内容丢失》,
请注明出处：https://www.zhoulujun.cn/html/php/phpcms/2025_0310_9512.html