Django CKEditor未保存窗口关闭提醒

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

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

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

2. 修改ckeditortemplatesckeditorwidget.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/

如果引用本站的原创文章,请注明原文链接:,本站保留追究责任的权利!

发表评论