Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat!: autosave 添加开关选项,默认关闭 #120

Open
wants to merge 3 commits into
base: dev
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions docs/autosave.md
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
27 changes: 19 additions & 8 deletions src/v-editor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,8 @@ import CKEditor from '@ckeditor/ckeditor5-vue'
import fullScreenIcon from './assets/fullscreen.vue'
import fullScreenExitIcon from './assets/fullscreenexit.vue'

const DEFAULT_AUTOSAVE_WAITING_TIME = 8000
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

修改成 5000


export default {
name: 'VEditor',
components: {
Expand Down Expand Up @@ -102,9 +104,12 @@ export default {
/**
* 关闭 autosave 功能,详见文档[Getting and saving data - CKEditor 5 Documentation](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/saving-data.html#autosave-feature)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这个注释,应该说明,默认是关闭。可传 true 或 ms

*/
disableAutosave: {
type: Boolean,
default: false
autosave: {
type: [Boolean, Number],
default: false,
validator: e => {
return typeof e === 'boolean' || (typeof e === 'number' && e >= 0)
}
}
},
data() {
Expand All @@ -116,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(
Expand All @@ -124,11 +135,10 @@ export default {
{
placeholder: this.placeholder,
extraPlugins: [ImageUploader(uploadImg)],
...(this.disableAutosave
? {}
: {
...(autosaveEnable
? {
autosave: {
waitingTime: 8000,
waitingTime,
save: editor => {
/**
* 建议自动保存事件,当 8 秒内未触发 input 事件时触发;
Expand All @@ -140,7 +150,8 @@ export default {
this.$emit('autosave', editor.getData())
}
}
}),
}
: {}),
language: 'zh-cn'
},
this.editorOptions
Expand Down