feat!: autosave 添加开关选项，默认关闭

docs/autosave.md

@@ -1,10 +1,10 @@
-如果 8 秒内没有任何操作，会触发自动保存
+如果 1 秒内没有任何操作，会触发自动保存
 
-It will autosave if no any operation in 8s
+It will autosave if no any operation in 1s
 
 ```vue
 <template>
-  <v-editor v-model="content" @autosave="handleSave" />
+  <v-editor v-model="content" @autosave="handleSave" :autosave="1000"/>
 </template>
 <script>
 export default {

package.json

@@ -61,7 +61,6 @@
     "@ckeditor/ckeditor5-upload": "^16.0.0",
     "@ckeditor/ckeditor5-vue": "^1.0.1",
     "github-markdown-css": "^3.0.1",
-    "lodash-es": "^4.17.15",
     "marked": "^1.0.0"
   },
   "devDependencies": {

src/v-editor.vue

@@ -32,13 +32,14 @@ import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'
 import UploadToAli from '@femessage/upload-to-ali'
 
 import defaultEditorOptions from './defaultEditorOptions'
-import debounce from 'lodash-es/debounce'
 import ImageUploader from './plugin/ImageUploader'
 import CKEditor from '@ckeditor/ckeditor5-vue'
 
 import fullScreenIcon from './assets/fullscreen.vue'
 import fullScreenExitIcon from './assets/fullscreenexit.vue'
 
+const DEFAULT_AUTOSAVE_WAITING_TIME = 8000
+
 export default {
   name: 'VEditor',
   components: {
@@ -99,6 +100,16 @@ export default {
       default() {
         alert('上传失败，请重试')
       }
+    },
+    /**
+     * 关闭 autosave 功能，详见文档[Getting and saving data - CKEditor 5 Documentation](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#autosave-feature)
+     */
+    autosave: {
+      type: [Boolean, Number],
+      default: false,
+      validator: e => {
+        return typeof e === 'boolean' || (typeof e === 'number' && e >= 0)
+      }
     }
   },
   data() {
@@ -110,6 +121,12 @@ export default {
   },
   computed: {
     editorConfig() {
+      const autosaveValidate =
+        typeof this.autosave === 'number' && this.autosave >= 0
+      let autosaveEnable = autosaveValidate || this.autosave === true
+      let waitingTime = autosaveValidate
+        ? this.autosave
+        : DEFAULT_AUTOSAVE_WAITING_TIME
       // $refs 在 mounted 阶段才挂载，这里不能直接传实例
       const uploadImg = this.uploadFile
       return Object.assign(
@@ -118,18 +135,24 @@ export default {
         {
           placeholder: this.placeholder,
           extraPlugins: [ImageUploader(uploadImg)],
-          autosave: {
-            save: debounce(editor => {
-              /**
-               * 建议自动保存事件，当 8 秒内未触发 input 事件时触发；
-               * 另外，v-editor 还支持 focus、blur 等 ckeditor-vue 事件；
-               * 见[文档](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#component-events)
-               *
-               * @property {string} data - 当前内容
-               */
-              this.$emit('autosave', editor.getData())
-            }, 8000)
-          }
+          ...(autosaveEnable
+            ? {
+                autosave: {
+                  waitingTime,
+                  save: editor => {
+                    /**
+                     * 建议自动保存事件，当 8 秒内未触发 input 事件时触发；
+                     * 另外，v-editor 还支持 focus、blur 等 ckeditor-vue 事件；
+                     * 见[文档](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs.html#component-events)
+                     *
+                     * @property {string} data - 当前内容
+                     */
+                    this.$emit('autosave', editor.getData())
+                  }
+                }
+              }
+            : {}),
+          language: 'zh-cn'
         },
         this.editorOptions
       )
@@ -200,40 +223,45 @@ export default {
   @scrollbar-color: #c6c7ca;
   @scrollbar-size: 4px;
   @ck-header-label-width: 45px;
+
   .ck.ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
     box-shadow: none;
   }
+
   .ck.ck-editor__main {
-    /*控制整个滚动条*/
+    /* 控制整个滚动条 */
     ::-webkit-scrollbar {
       width: @scrollbar-size;
       height: @scrollbar-size;
     }
 
-    /*滚动条两端方向按钮*/
+    /* 滚动条两端方向按钮 */
     ::-webkit-scrollbar-button {
       display: none;
     }
 
-    /*滚动条中间滑动部分*/
+    /* 滚动条中间滑动部分 */
     ::-webkit-scrollbar-thumb {
       background-color: @scrollbar-color;
       border-radius: @scrollbar-size / 2;
     }
 
-    /*滚动条右下角区域*/
+    /* 滚动条右下角区域 */
     ::-webkit-scrollbar-corner {
       display: none;
     }
   }
+
   .ck.ck-toolbar__items {
     height: @toolbar-height;
+
     .ck.ck-button,
     a.ck.ck-button {
       width: @button-size;
       height: @button-size;
       line-height: @button-size;
     }
+
     .ck.ck-list__item {
       .ck.ck-button,
       a.ck.ck-button {
@@ -242,35 +270,39 @@ export default {
         line-height: 1;
       }
     }
+
     .ck.ck-dropdown {
       .ck-button.ck-dropdown__button {
         width: 100%;
       }
+
       .ck-dropdown__arrow {
         margin: 0;
         right: 0;
       }
     }
+
     .ck.ck-color-table {
       .ck-color-table__remove-color {
         width: 100%;
         padding-left: 8px;
       }
     }
   }
+
   .ck.ck-button,
   a.ck.ck-button {
     margin: 0;
     padding: 0;
     min-width: unset;
     min-height: unset;
-
     cursor: pointer;
     // margin: 12px 0;
     .ck.ck-icon {
       width: @icon-size;
       height: @icon-size;
     }
+
     &:not(.ck-disabled):hover {
       background: @ck-button-hover-background-color;
     }
@@ -282,17 +314,21 @@ export default {
   }
 
   @button-distance: 4px;
+
   .ck.ck-toolbar {
     border-color: @ck-border-color;
     background: #fff;
+
     > .ck-toolbar__items > * {
       margin-right: @button-distance;
     }
+
     > .ck-toolbar__items > *,
     > .ck.ck-toolbar__grouped-dropdown {
       padding: 0;
       margin: 0;
     }
+
     .ck.ck-toolbar__separator {
       height: @icon-size;
       margin: auto @button-distance*2;
@@ -341,8 +377,8 @@ export default {
     display: block;
     margin-block-start: 1em;
     margin-block-end: 1em;
-    margin-inline-start: 0px;
-    margin-inline-end: 0px;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
     padding-inline-start: 40px;
   }
 
@@ -355,17 +391,20 @@ export default {
     }
   }
   @full-screen-index: 10000;
+
   .toggle-full-screen {
     position: absolute;
     width: @icon-size;
     height: @icon-size;
     right: 8px;
     top: 48px;
     cursor: pointer;
+
     &.is-full-screen {
       position: fixed;
       z-index: @full-screen-index;
     }
+
     > svg {
       width: 100%;
       height: 100%;

yarn.lock

@@ -8279,7 +8279,7 @@ lockfile@^1.0.4:
   dependencies:
     signal-exit "^3.0.2"
 
-lodash-es@^4.17.10, lodash-es@^4.17.15:
+lodash-es@^4.17.10:
   version "4.17.15"
   resolved "https://registry.npm.taobao.org/lodash-es/download/lodash-es-4.17.15.tgz#21bd96839354412f23d7a10340e5eac6ee455d78"
   integrity sha1-Ib2Wg5NUQS8j16EDQOXqxu5FXXg=