ck-editor5的研究 (6)：进一步优化页面刷新时，保存提示的逻辑

最新推荐文章于 2025-08-19 08:41:01 发布
最新推荐文章于 2025-08-19 08:41:01 发布
阅读量855 收藏 17
点赞数 22
CC 4.0 BY-SA版权
分类专栏： CKEditor5 文章标签： javascript 前端 CKEditor5 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41651062/article/details/148380982

文章目录

一、前言

在上一篇文章中 ck-editor5的研究 (5)：优化-页面离开时提醒保存，顺便了解一下 Editor的生命周期 和 6大编辑器类型 ，我们对离开页面时进行了优化。

但是每次刷新页面，都会有弹窗警告。这篇文章，我们进一步优化，只有当数据发生变化、正在保存中时，刷新页面才进行提示。

实现的效果图大致如下：
在这里插入图片描述

二、实现步骤

大致分成了 3 个步骤，我们仍然使用上一篇文章的目录结构

1. 第一步: 引入 PendingActions 插件

这个插件在 @ckeditor/ckeditor5-core 里面，需要先安装这个依赖

pnpm add @ckeditor/[email protected]
</
了解本专栏 订阅专栏 解锁全文 超级会员免费看
ck-editor5的研究 (4)：初步使用 CKEditor5 的插件功能
github
06-01 1139
本文介绍了如何为CKEditor5编辑器开发自定义插件，主要包含三个步骤：首先搭建项目目录结构，然后通过构造函数或类名两种方式编写插件，最后在插件中实现自动聚焦和插入文本的功能。作者详细展示了插件代码的实现过程，包括定时聚焦编辑器、插入指定文本并移动光标到末尾的核心逻辑。通过示例演示了插件开发的基本流程，帮助开发者快速上手CKEditor5的插件扩展。文章还回顾了之前学习的内容，包括编辑器集成、事件系统和API使用等基础知识。
关于关闭弹框后ckeditor5富文本编辑器内容不清空刷新的解决办法
LewisRoc的博客
04-27 3513
这是一个Vue+element ui的后台管理项目。如上图所示这里有一个修改的对话框里边是表单和ckeditor5富文本编辑器，点击第一个更新按钮打开对话框后，表单和编辑器获取并显示当前可以修改的内容。但是当我关闭对话框再次点击其他更新按钮的时候打开的编辑器内容都是第一次打开对话框中编辑器的内容，除非我手动刷新一下浏览器。很显然在对话框关闭的监听事件中没有对富文本编辑器的内容进行清除更新才造成了这种现象。我用的是ckeditor5富文本编辑器封装的组件，试了很多方法都没办法把富文本编辑器中的内容清除更新，.
JAVAWEB-NOTE02：JS：forEach函数遍历、jQuery：文档函数完整写法， append方法,each方法、服务器/客户端/服务端的概念，tomcat，HTTP、servlet
aa35434的博客
12-02 4097
typora-copy-images-to: JAVAWEB-NOTE02.assets typora-root-url: JAVAWEB-NOTE02.assets typora-copy-images-to: JAVAWEB-NOTE02.assets 文章目录typora-copy-images-to: JAVAWEB-NOTE02.assets typora-root-url: JAVAWEB-NOTE02.assets@[toc] unit04-JavaScriptJavaScript简介什么是.
2022年总结：感谢十二年的陪伴——分享回归，不忘初心（Eastmount博客总结及未来规划）
杨秀璋的专栏
05-29 1万+
曾记否，2021年4月28日，为了更好地从事科研和学习，当时给所有读者群发了我在CSDN唯一的私信，感谢大家十年的陪伴，短暂消失，不负青春。当时也收到了很多博友的鼓励与祝福，感恩。转眼，部分重要的事情将要完成，作者的分享也将逐渐回归，仅以此文感谢读者十二年的陪伴和支持，感谢分享路上所有师长、家人、同学、朋友、博友和读者的陪伴及鼓励。同时，这篇文章将总结和归档作者这些年的博客专栏，并描述未来将要分享的技术和方向。
EASY spa单页面版文档
Java技术乐园
07-01 5936
1.1.导入项目 下载项目后进行解压 使用IDEA、WebStorm、HBuilder等前端开发工具打开 打开index.html点击右上角浏览器图标运行： 注意：必须以http://的形式访问，而不是file://的形式访问。 1.2.项目结构 |-assets | |-images // 图片 | |-js | |-main.js // 入口js | |-libs // 第三方库，ech.
1-JavaScript学习笔记
JayChouyyds589的博客
05-09 347
黑马JS学习笔记
easyui实用点
wwy11123的博客
07-31 2185
easyui常用的组件
CKEditor行间距增强插件：自定义文本排版
weixin_31715353的博客
10-26 1022
本文还有配套的精品资源，点击获取 简介：CKEditor行间距插件是一个增强工具，用于解决CKEditor富文本编辑器默认不支持直接调整行间距的问题。插件允许用户通过简单操作自定义文本的行间距，以满足不同排版需求。开发者通过将插件文件放置到CKEditor的plugins目录，并在配置文件中进行相应声明，便可在编辑器中添加行间距调整功能。该插件通过添加按钮到工具栏并改变HT...
ckeditor 上传图片 粘贴上传图片 自定义富文本工具栏 自定义保存按钮方法 保存富文本内容功能等
crazywsp的博客
04-03 1515
近期实现了项目整合ckeditor，包括上传图片，粘贴上传图片，内容保存及展示等功能；遇到了蛮多坑，简单总结一下。 效果展示： 1.下载ckeditor https://ckeditor.com/ckeditor-4/download/ 注意：这里有好几个版本，你可以根据需要下载，我刚开始下载中间的标准版，然后没有很多按钮，包括保存按钮； 后面就改下了Full Package这个版本；建议大家...
Oracle Warehouse Builder 11g 教程 Part1-Part5
热门推荐
oracel数据库、数据仓库、JAVA开发的专栏
09-27 1万+
http://www.gemini5201314.net/category/etl/page/2Oracle Warehouse Builder 11g 教程 Part 52008年7月27日没有评论本系列教程翻译自OTN官方文档,为OWB的系列教程，全教程共12篇文章，我只介绍启中5篇，主要是想通过此教程向大家介绍OWB工具的的基本使用方法和数据仓库建模方法，由于
ckeditor4.0自定义标签操作详细步骤及修改后编辑器jar包下载
07-31
保存并刷新编辑器页面，你现在应该能够输入并查看自定义标签`<myCustomTag>`。确保在预览或发布内容时，自定义标签仍能保留其样式和结构。 在提供的压缩包`ckeditor_4.3.3ceshi`中，已经包含了自定义好标签的...
quartus ii ddr2ip核没有MT47H256M8EB-25E型号怎么添加
07-13
步骤6：生成IP核并集成到工程 完成配置后，生成IP核，并将其集成到顶层设计中。IP核会提供用户接口（如local_address, local_wdata, local_rdata, local_read_req, local_write_req, local_ready等信号），我们需要...
JavaScript 核心基础：类型检测、DOM 操作与事件处理
热爱音乐和二次元！
08-15 1337
本文系统梳理 JavaScript 核心知识点，包括数据类型检测规则、遍历方式、DOM操作和事件处理。重点解析 typeof 运算符对不同数据类型的检测结果，数组与对象的遍历方法差异，以及使用 querySelector 获取元素的现代方案。同时详细讲解事件绑定的两种方式（onclick 覆盖 vs addEventListener 多播）和事件冒泡机制，帮助开发者构建扎实的 JS 基础，写出更健壮的代码。
三十四、Vue3项目大屏之SCSS自适应适配屏幕方法
最新发布
张先森的博客
08-19 260
其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。
Less (CSS 预处理器)
2401_87008233的博客
08-18 782
Less是一种CSS预处理器，为CSS添加编程特性如变量、嵌套、混合等，使样式代码更易维护。核心功能包括：变量定义复用值，嵌套反映层级关系，混合实现代码复用，支持运算和颜色函数处理，模块化导入管理。Less需编译为CSS使用，可通过命令行或构建工具实现。与Sass功能相似但语法更贴近CSS，适合提升大型项目的样式开发效率和组织性。
E2B是一个开源基础设施，允许您在云中安全隔离的沙盒中运行AI生成的代码和e2b.dev网站
skywalk8163的专栏
08-17 952
E2B是一个开源的云沙盒服务，允许在隔离环境中运行AI生成的代码。开发者需通过e2b.dev网站注册获取API key，并安装JavaScript或Python SDK来使用该服务。主要竞品包括CodeSandbox（侧重前端开发协作）和Replit（支持多语言在线编程）。E2B的核心优势在于为AI代码提供安全的执行环境，但需依赖其云端服务而非自建。使用示例展示了通过SDK在沙盒中运行简单Python代码的过程。
Layui COP证书管理系统
bemyrunningdog
08-18 180
本文介绍了一个基于Layui和SpringBoot的COP证书管理系统的完整实现方案。系统采用前后端分离架构，前端使用Layui2.8.3框架实现响应式界面，后端基于SpringBoot3.1.0和Java17开发，MySQL8.0作为数据库存储。系统实现了证书全生命周期管理（草稿、已提交、审核中、已签发、已拒绝五种状态），包含证书增删改查、批量操作、操作日志记录等核心功能。技术实现上，后端采用RESTful API设计，通过MyBatis操作数据库，前端使用Layui表格和表单组件实现数据展示和交互。系统
学习链接。
weixin_49035434的博客
08-18 291
hello 算法 0.2 如何使用本书 - Hello 算法代码随想录: 代码随想录被删的前端游乐场 被删的前端游乐场Github漫游指南 : Github ebookJaveScript源码: https://github.com/v8/v8/blob/ad82a40509c5b5b4680d4299c8f08d6c6d31af3c/src/js/array.js世峰的刷题网站: labuladong 的算法笔记 | labuladong 的算法笔记编程导航: 编程导航 - 程序员一站式编程学习交流社
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

凌晨作案

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值