优化编辑器图片选择和自动保存

view/admin/post/create.html

@@ -15,11 +15,9 @@
   </script>
 
   <style>
-
     #toolbar select {
       display: none !important;
     }
-
   </style>
 </head>
 
@@ -177,7 +175,8 @@
                         </div>
                         <div class="quick-input-item sm-quick-input-item" title="输入新标签,使用空格分隔可一次添加多个标签">
                           <div class="">
-                            <input type="text" name="" placeholder="输入新标签" autocomplete="off" id="new-tags" class="layui-input">
+                            <input type="text" name="" placeholder="输入新标签" autocomplete="off" id="new-tags"
+                              class="layui-input">
                             <div class="layui-btn create-tags">新增</div>
                           </div>
                         </div>
@@ -289,7 +288,7 @@
       });
 
       quill.on('text-change', function (delta, oldDelta, source) {
-
+        currentRange.index = delta.ops[0].retain
         if (source == 'api') {
           console.log("An API call triggered this change.");
         } else if (source == 'user') {

view/admin/post/edit.html

@@ -250,6 +250,12 @@
   </div>
 
   <script>
+    var lastUpdateSecond = 0;
+    var currentSecond = 0;
+
+    setInterval(() => {
+      currentSecond++
+    }, 1000);
     var categoryList = JSON.parse('{:json_encode($post->categorys->column("category_id"))}')
     var tagList = JSON.parse('{:json_encode($post->tags->column("tag_id"))}')
     layui.use(['form', 'upload', 'laydate'], function () {
@@ -295,12 +301,30 @@
       });
 
       quill.on('text-change', function (delta, oldDelta, source) {
-
+        currentRange.index = delta.ops[0].retain
         if (source == 'api') {
           console.log("An API call triggered this change.");
         } else if (source == 'user') {
           console.log("A user action triggered this change.");
         }
+
+        if (currentSecond - lastUpdateSecond > 30) {
+
+          var formData = {
+            'id': '{$post.id}'
+          };
+
+          formData.content = quill.getContents().ops
+          formData.content_html = $('#editor .ql-editor').html()
+
+          $.post('{:url("update")}', formData, function (result) {
+            lastUpdateSecond = currentSecond
+            layer.msg('自动保存成功', {
+              offset: 't'
+            })
+
+          })
+        }
       });
 
       upload.render({