提醒用户退出页面功能(3步)

想象一下，辛辛苦苦写完的内容，不小心刷新页面或者关掉浏览器标签，数据就没了，是不是体验很糟糕。所以我们应该在用户卸载页面时进行提醒。

// useEventListener.ts 文件
export
const useEventListener = (target: EventTarget, event: string
, callback: EventListener) =>
{
onMounted((
) => target.addEventListener(event, callback)
)
;
onUnmounted((
) => target.removeEventListener(event, callback)
)
;
}
;
// demo5/index.vue 的 setup 中使用
useEventListener(window, 'beforeunload'
, (event: BeforeUnloadEvent) =>
{
event.preventDefault(
)
;
}
)
;

即可实现刷新时提醒用户，效果如下：

六种编辑器

找到官方文档，我们在第一篇文章就推测过，既然特意提到经典编辑器，就说明有很多种编辑器，仔细看看，确实有6种编辑器：
在这里插入图片描述

1. Classic editor 经典编辑器

经典编辑器，也就是我们一直在使用的编辑器，使用的类名是 ClassicEditor ：

import {
ClassicEditor
}
from '@ckeditor/ckeditor5-editor-classic'

2. Inline editor 内联编辑器

可以把编辑器分成多个块，分开编辑
在这里插入图片描述

3. Balloon editor 气泡编辑器

只有我们选中内容时，工具栏才会出来
在这里插入图片描述

4. Balloon block editor 气泡块编辑器

它左侧有一个滑块，可以进行拖动
在这里插入图片描述

5. Document editor 文档编辑器

有点像 word 和 wps 内容居中，像写文档一样
在这里插入图片描述

6. Multi-root editor 多根编辑器

跟内联编辑器差不多，但多根编辑器的每一个块，使用同一个上下文，比如撤销功能，分别在多个块中编辑，可以进行回退。
在这里插入图片描述

editor实例生命周期

1. 创建实例使用静态方法 create()

回顾一下，我们创建编辑器实例对象，都是这样创建的：
在这里插入图片描述
无论是哪种编辑器，应该都是使用 create 方法创建实例的。

2. 保存实例对象

也就是 instance = await MyClassicEditor.create(editorRef.value); 在这里，我们用 instance 来保存了，我们后续也把他叫做 editor 实例对象，简称 editor。

3. 销毁实例对象

这是为了避免内存泄露，防止浏览器卡顿的。通常在 vue 的 onBeforeUnmount 中销毁，如下：
在这里插入图片描述

4. 获取数据和设置数据

通过实例对象的 getData() 和 setData() 方法来对编辑器设置数据，也可以在初始化的时候，使用配置项 initialData 来给编辑器设置初始内容：
在这里插入图片描述
到此为止，就算完成优化了。

详细介绍：ck-editor5的研究 (5)：优化-页面离开时提醒保存，顺便了解一下 Editor的生命周期 和 6大编辑器类型

详细介绍：ck-editor5的研究 (5)：优化-页面离开时提醒保存，顺便了解一下 Editor的生命周期和 6大编辑器类型