在使用文本编辑器写博客时，有时可能不小心将页面关闭，或者刷新页面，来不及保存的博文就会消失的无影无踪，令人感到十分沮丧。

如果使用Django CKEditor文本编辑器，只需添加一个js插件并进行简单的配置就可以防止不小心关闭表单尚未保存页面的情况，设置步骤如下：

1. 添加jquery.AreYouSure插件，该插件可以在关闭包含未保存表单的页面时弹出相应提示，Github项目地址为：https://github.com/codedance/jquery.AreYouSure。

2. 修改ckeditor\templates\ckeditor\widget.html，将内容替换为下面的代码：

<p><textarea{{ final_attrs|safe }}>{{ value }}</textarea></p>
<script type="text/javascript" src="/static/js/jquery.are-you-sure.js"></script>
<script type="text/javascript">
    if (typeof CKEDITOR == "undefined") {
        $( document ).ready(function() {
            CKEDITOR.replace("{{ id }}", {{ config|safe }});
            $('form').areYouSure();
        });
    } else {
        CKEDITOR.replace("{{ id }}", {{ config|safe }});
        $('form').areYouSure();
    }
    window.onbeforeunload = function() { 
      if ($('form').hasClass('dirty') || CKEDITOR.instances.id_content.checkDirty()) {
        return "页面上包含尚未保存的表单内容。如果离开此页，未保存的内容将被丢弃。";/*You have made changes on this page that you have not yet confirmed. If you navigate away from this page you will lose your unsaved changes*/
      }
    }
    $(document).ready(function(){
        $('form').submit(function() {
            window.onbeforeunload = null;
        });
    });
</script>

完成上述步骤后，编辑日志后未保存直接关闭页面时会弹出提示"页面上包含尚未保存的表单内容。如果离开此页，未保存的内容将被丢弃"。

实例如下：

更改文本框的文字后，尝试直接关闭本页面，会弹出提示。

本文链接：http://bookshadow.com/weblog/2014/09/02/django-ckeditor-unload-remind/
请尊重作者的劳动成果，转载请注明出处！书影博客保留对文章的所有权利。

如果您喜欢这篇博文，欢迎您捐赠书影博客： ，查看支付宝二维码