2016-1-17 博客文章增加了markdown格式,由MD标记

2016-03-10 00:01:00

ueidtor自带保存功能,会提示本地保存成功,不过其原理是保存cookie。

如果我想同时分段完成很多篇文章,就需要自己动手实现了。本文采用的Thinkphp框架。


ueditor 启用本地保存功能:


加载编辑器内容的div

<div><script id="uecontainer"></script></div>


 var ue = UE.getEditor('uecontainer',{autoHeightEnabled:false,initialFrameHeight:600,}); //初始化编辑器
     setTimeout(function () {
         ue.execCommand('drafts');  //启用本地保存功能,此处是每5秒保存一次
         }, 5000);


自动保存实现多文章编辑:

如果利用cookie,每次写文章就加载cookie,一直等到把当篇写完才能写另一篇。而我想写一篇游记,同时又想写技术分享,甚至还可以另开一篇专门记录最近感觉很不错的想法。随意切换,每隔5分钟自动保存,中途去洗个澡也不用担心这样写起来巴适多了。


大致分以下几个步骤:

  1. 新增文章时,自动生成唯一性token。根据这个token,后面自动保存时才能保证不会更新错文章。

  2. 编辑器keyup事件触发任务:每隔5分钟自动保存。

  3. 编辑器mouseout事件。当鼠标不在编辑框里,即表示当前没在编辑文章,就无需自动保存。

  4. 加载所选的文章内容。


生成唯一性token:

时间是单向的。咱这儿也没高并发,直接利用时间稍作变换即可。例如md5(time()),date("YmdHis")等。至于2038年的事儿,到时候再考虑。这里另查到uniqid函数,基于微秒级别,唯一性更准确。


ueditor的keyup事件触发:

直接贴代码:

     var ue = UE.getEditor('uecontainer',{autoHeightEnabled:false,initialFrameHeight:600,});
     var timerId;
     var domUtils = UE.dom.domUtils;  //baidu查到的,也不太懂,能用就行
     ue.addListener('ready',function(){

         domUtils.on(ue.body,"keyup",function(){
             autoSaveCall();
         });
     });
     
     function ajaxSaveDraft()
     {
         var title    = $("input[name='title']").val();
         var content = ue.getContent();
         var draftToken = $("input[name='draft_token']").val();

         var url = "{:U('Admin/Blog/saveDraft')}";  //thinkphp保存草稿方法
         $.ajax({
             type     : 'post',
             url    : url,
             data   : {"draft_token":draftToken,"title":title,"content":content},
             beforeSend: function(){

             },
             success: function(res){ 
                 //alert("success, seet h db");
             },
             error:  function(request){
                 alert(request.status);
             }
         });
     }
     function autoSaveCall()
     {
         timerId = setInterval(ajaxSaveDraft, "300000");
     }


ueditor的mouseout事件触发:

     $(document).on("mouseout","#ueditor_0", function(){
         clearInterval(timerId);
     });


加载所选的文章内容:

在页面加个select,将多个文章草稿以标题形式列举出来,然后选择相应的草稿,通过ajax来加载文章内容。

 $("#select_draft").change(function(){
         var curItem = $(this);
         var tmpId = curItem.val();
         var url = "{:U('Admin/Blog/getDraft')}";
    //     alert(url);
         $.ajax({
             type     : 'post',
             url    : url,
             data   : {"draftId":tmpId},
             beforeSend: function(){

             },
             success: function(res){
                 var title    = $("input[name='title']").val(res.title);
                 //将内容加载到ueditor的编辑框里
                 var content = ue.setContent(res.content);
                 //初始token是新的,编辑草稿,就得将token设置成当前草稿的token
                 var draftToken = $("input[name='draft_token']").val(res.token);
             },
             error:  function(request){
                 alert(request.status);
             }
         });
     });


本次功能实现中遇到的问题:

  1. ueditor的keyup时间绑定,实质是iframe里body的绑定,还得进一步了解。

  2. 逻辑理解失误。保存草稿时,判断token不存在时,又重新生成了一个token,然后导致自动保存时总是在新增草稿,而不是更新当前编辑的草稿。由于一开始打开编辑页面时,token已经是新生成的。这bug找得我好辛苦,开始还一直以为是keyup事件导致页面刷新,从而每次token在变。

 //thinkphp 保存文章
        
        $con['draft_token']     = $data['draft_token'];
        
        $res = $this->where($con)->select();
        
        if(!empty($res)){
            $res     = $this->where($con)->save($data);
        }else{
            //$data['draft_token'] = $data['draft_token']; //md5(date("YmdHis"));
            $res    = $this->add($data);
        }


最终效果:

                            autosave.png