详情
评论
问答

子比主题 - 前台编辑器添加“未保存提示”功能

  • 很多使用子比主题的朋友,都喜欢用前台编辑器发布或编辑文章,直接在前台就能快速创作,体验非常流畅。但总有粗心的时候:写了一半的文章还没保存,不小心点了关闭页面、刷新,或者跳转到其他链接,辛苦敲的内容瞬间消失,只能重新来过,实在让人头疼。
  • 今天就给大家分享一个实用功能:给子比主题的前台编辑器加上「未保存提示」,当你在发布 / 编辑文章时,如果有未保存的内容,关闭页面、刷新或跳转时,会自动弹出警告窗口,提醒你「有未保存的更改,离开可能丢失内容」,帮你守住辛苦创作的成果。

图片[1]-子比主题 - 前台编辑器添加“未保存提示”功能-黑猫博客

功能原理

这个功能的核心逻辑:
  1. 只在「文章发布页」和「文章编辑页」生效(避免在其他页面误触发);
  2. 实时监听你的输入内容(包括输入框、下拉框、TinyMCE 编辑器甚至 iframe 中的内容变化);
  3. 当检测到有未保存的内容时,一旦你尝试关闭页面、刷新或跳转到其他链接,就会弹出警告提示;
  4. 当你手动保存文章(通过 AJAX 请求完成保存)后,会自动重置状态,避免误提示。

实现代码

关键配置说明(必须修改,否则可能失效)

  1. 调整页面白名单
    代码中 whiteList = ['/newposts','/posts-edit/'] 是生效页面的路径,需要和你网站的「前台发布页」「前台编辑页」路径一致。
    比如你的发布页路径是 /publish,编辑页是 /edit,就改成 ['/publish','/edit']
  2. 替换网站域名
    代码中 https://www.你的域名.com/wp-admin/admin-ajax.php 需替换为你自己的网站域名(保持 wp-admin/admin-ajax.php 部分不变)。
    例如你的网站是 https://blog.example.com,就改成 https://blog.example.com/wp-admin/admin-ajax.php

功能测试

添加完成后,用前台编辑器写一篇文章(不保存),然后尝试:
  • 关闭当前标签页
  • 刷新页面
  • 点击导航跳转到其他页面
此时会弹出警告窗口,提示「有未保存的更改」,点击「取消」即可留在当前页面,避免内容丢失;保存文章后再操作,则不会触发提示,说明功能正常。

注意事项

确保代码中的页面路径和域名正确,否则可能出现「该提示时不提示」或「不该提示时乱提示」的情况。

有了这个功能,用子比前台编辑器发文章时就不用再担心「手滑关页面」了,创作更安心~ 赶紧试试吧!
温馨提示: 本文最后更新于2025-08-01 22:34:11,某些文章具有时效性,若有错误或已失效,请在下方 留言或联系 黑猫
本站代码模板仅供学习交流使用请勿商业运营,严禁从事违法,侵权等任何非法活动,否则后果自负!
© 版权声明
THE END
喜欢就支持一下吧~
点赞620赞赏 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容