ueditor使用indexBD缓存草稿——多重防护编辑内容丢失

本站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