当前位置: 首页 > news >正文

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

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

前言

经过前面的 4 篇内容,我们已经慢慢对 CKEditor5 熟悉起来了。这篇文章,我们就来做一个优化,顺便再补几个知识点:

  1. 当用户离开时页面时,提醒他保存数据
  2. 了解一下 CKEditor5 的 六大编辑器类型
  3. 了解一下 editor 实例对象的生命周期

大致效果如下:

在这里插入图片描述

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

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

1. 先搭建目录

同样的,我们使用上一篇文章 ck-editor5的研究 (4):初步使用 CKEditor5 的插件功能 的代码进行搭建。也是三个文件,一个 ckeditor5.ts, 一个 ckeditor5.client.vue ,一个 demo5/index.vue,大概像这样:
在这里插入图片描述

2. 写一个事件注册 hook

在 nuxt 的 composables 目录下创建一个 useEventListener.ts 文件:在这里插入图片描述

3. 注册 beforeunload 事件

然后在 demo5/index.vue 中使用这个 hook:
在这里插入图片描述

对应的代码如下:

// 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 来给编辑器设置初始内容:
在这里插入图片描述
到此为止,就算完成优化了。

http://www.hskmm.com/?act=detail&tid=24759

相关文章:

  • 10.5阅读笔记
  • 实用指南:电脑装的数据越多,会不会越重
  • [算法/数据结构] 数据结构与算法
  • 图论new
  • 2025夹丝玻璃厂家最新企业品牌推荐排行榜,艺术夹丝玻璃,淋浴房夹丝玻璃,极简门夹丝玻璃,金属夹丝玻璃公司推荐!
  • 斜率优化dp复习笔记
  • 掌握形式验证,护航芯片安全
  • 数位DP
  • 2025橡胶软接头厂家最新企业品牌推荐排行榜,法兰橡胶软接头,可曲挠,挠性,KXT,耐油,EPDM,耐腐蚀,三元乙丙橡胶软接头,橡胶柔性软接头公司推荐!
  • 整体二分笔记
  • 详细介绍:性能优化 - 案例篇:缓存_Guava#LoadingCache设计
  • 2025年X射线管厂家最新企业品牌推荐排行榜,工业用金属陶瓷,波长色散荧光分析,应力衍射分析,管板角焊缝,轮胎检测,辐照,固定阳极波纹陶瓷,测厚,食品检测 X 射线管公司推荐
  • AtCoder Beginner Contest 400
  • P14134 题解——随机化太帅了
  • 2025 年北京档案存放公司 升职猫档案服务平台:16 年老牌机构的合规服务与高效解决方案解析
  • 2025电容厂家最新品牌推荐排行榜白皮书,固态,高压,牛角,安规,CBB,超级,红宝石电解,螺栓,超级电容推荐这十家公司!
  • bug汇总
  • 2025石材加工厂家最新品牌推荐排行榜:大祥工艺,业务覆盖东北,辽宁盖州,专业浮雕雕刻高级技师
  • centos7升级降级内核 centos升级降级内核 centos升级内核 centos降级内核
  • Photoshop 在线网页版?是的,它来了!免费使用指南
  • 基于Python+Vue开发的母婴商城管理系统源码+运行步骤
  • 2025防火隔断品牌最新推荐排行榜:甲级防火玻璃隔断厂家深度解析,精选优质品牌助力采购决策!
  • 机器学习Day5-模型诊断 - 详解
  • 这些行业软件你用过哪个
  • 提供远程服务
  • 分享一些软件资讯
  • 2025美缝剂源头厂家最新推荐权威排行榜:深度解析五大品牌实力与选购指南
  • 2025数控铣床厂家最新企业品牌推荐排行榜, 双头数控铣床,双面数控铣床,龙门数控铣床,双侧数控铣床推荐这十家公司!
  • 2025最新推荐点胶机源头厂家权威排行榜:涵盖自动点胶机,果冻胶,无痕内衣,热熔胶类设备,助力企业精准挑选优质厂家
  • 前端开源JavaScrip库 - 详解