自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

github

https://github.com/tgx1587900660

  • 博客(26)
  • 收藏
  • 关注

原创 ckeditor5的研究 (8):接入Indent缩进功能,配置heading并解决ts类型报错,了解CKEditor5插件移除功能

本文详细介绍了如何优化CKEditor5编辑器功能配置。主要内容包括:1)通过安装@ckeditor/ckeditor5-indent插件实现缩进功能,并配置缩进单位和偏移量;2)解决heading配置项的TypeScript类型报错问题,提供了两种解决方案(直接类型声明和自定义枚举类型);3)介绍removePlugins功能,用于根据不同用户角色限制编辑功能。文章还展示了完整的实现步骤和最终效果图,帮助开发者灵活配置CKEditor5的工具栏和插件系统。

2025-06-06 01:01:38 506

原创 ck-editor5的研究 (7):自定义配置 CKeditor5 的 toolbar 工具栏

CKEditor5工具栏自定义配置指南 本文详细介绍了如何自定义CKEditor5的工具栏功能,主要包括以下内容: 配置原理:所有功能均通过插件实现,不配置插件则无任何功能 配置步骤: 安装对应依赖包 导入功能模块 设置到插件数组 配置toolbar属性 具体示例: 基础样式(粗体、斜体等) 链接和标题功能 列表和引用功能 自动格式化功能 图片相关功能(工具栏、说明文字、大小调整等) 效果展示:提供了完整的配置代码示例,包含多种常用编辑功能 扩展方法:可通过官方功能表查找更多功能插件 文章通过分步讲解和代码

2025-06-03 01:21:49 883

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

摘要 本文针对CKEditor5编辑器进一步优化页面离开时的保存提醒功能,通过引入PendingActions插件,实现仅在数据变化或保存过程中才触发警告提示。主要步骤包括:1)安装并引入PendingActions插件;2)注册编辑器状态变更事件;3)通过按钮控制保存状态,在beforeunload事件中智能判断是否需要弹窗。最终效果实现了:未修改内容时无提示、修改后保存中刷新触发提醒的精细化控制,有效平衡了用户体验与数据安全。文章包含完整代码实现和效果演示,帮助开发者完善编辑器自动保存机制。

2025-06-02 14:55:30 828

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

摘要:本文主要介绍了CKEditor5的优化使用和知识点补充。首先通过实现页面离开提醒功能,防止用户数据丢失;然后详细讲解了CKEditor5的六种编辑器类型(经典、内联、气泡、气泡块、文档和多根编辑器)及其特点;最后阐述了编辑器实例的生命周期管理,包括创建、保存、销毁实例以及数据的获取和设置方法。文章结合代码示例和效果演示,帮助开发者更好地掌握CKEditor5的使用技巧。(148字)

2025-06-02 08:30:00 1239

原创 ck-editor5的研究 (4):初步使用 CKEditor5 的插件功能

本文介绍了如何为CKEditor5编辑器开发自定义插件,主要包含三个步骤:首先搭建项目目录结构,然后通过构造函数或类名两种方式编写插件,最后在插件中实现自动聚焦和插入文本的功能。作者详细展示了插件代码的实现过程,包括定时聚焦编辑器、插入指定文本并移动光标到末尾的核心逻辑。通过示例演示了插件开发的基本流程,帮助开发者快速上手CKEditor5的插件扩展。文章还回顾了之前学习的内容,包括编辑器集成、事件系统和API使用等基础知识。

2025-06-01 18:53:32 1021

原创 ck-editor5的研究 (3):初步使用 CKEditor5 的事件系统和API

本文摘要:作者在封装CKEditor5为Vue组件的基础上,进一步研究其事件系统和API,实现更细粒度的内容控制。文章通过类比人体结构解释CKEditor5的核心概念(Model、Editing view、Data view和转换器),并展示了如何通过编辑器实例进行内容操作。具体实现包括:1)通过model.change方法在末尾插入文本;2)监听内容变更事件;3)修改默认回车行为;4)使用Data view插入HTML代码。最终效果可通过按钮交互实现内容动态插入和格式修改,为富文本编辑器提供了更灵活的操控

2025-06-01 08:00:00 682

原创 ck-editor5的研究 (2):对 CKEditor5 进行设计,并封装成一个可用的 vue 组件

本文介绍了如何将CKEditor5封装成可复用的Vue组件的过程。首先搭建了目录结构并复用之前的代码,然后正式进行组件封装,主要完成了以下工作:1)初始化编辑器实例并合并配置项;2)定义并触发相应事件;3)组件销毁时清理实例;4)使用延迟优化性能;5)监听禁用状态。文章还展示了组件的具体实现代码,包括使用lodash的debounce进行延迟处理、监听disabled和modelValue变化、设置编辑器事件等。最终实现了可复用、支持双向数据绑定的CKEditor5 Vue组件。

2025-05-31 21:12:37 1212 3

原创 ck-editor5的研究 (1):快速把 CKEditor5 集成到 nuxt 中

本文记录了在Nuxt.js项目中集成CKEditor5 37.1.0版本的过程。作者首先通过CKEditor官方文档了解基本架构,然后选择了适合旧版Vite集成的方案。具体步骤包括:安装相关依赖包、配置Nuxt的vite插件、创建自定义编辑器类并注册插件、开发客户端组件,最终成功将CKEditor5集成到Nuxt项目中。文章详细展示了配置文件和组件代码,为开发者提供了清晰的实现路径。整个集成过程注重最小的改动成本,确保与Nuxt 3.16.2版本的兼容性,为后续功能扩展奠定了基础。

2025-05-31 15:00:32 649

原创 如何检查popover气泡组件样式?调试悬停元素CSS样式的解决方案

摘要:调试CSS弹出层样式时,由于鼠标移开元素会消失,常规方法难以定位。针对JS控制的v-if元素尤为困难。解决方案是使用setTimeout+debugger组合:在控制台执行setTimeout(()=>{debugger}, 4000),4秒内保持弹出状态即可调试样式。该方法通过延时冻结页面,有效解决了瞬态元素调试难题。

2025-05-28 00:11:34 153

原创 bug: iframe内嵌的页面中使用了history.replaceState方法,导致上层top应用无法回退

在Electron应用中,通过iframe内嵌的网站A在路由变化时会通知Electron应用,以便实现前进、后退和刷新等操作。然而,当从A-a页面切换到A-b页面并刷新后,无法进行回退操作。问题出在A-b页面使用了history.replaceState方法,导致页面刷新后window.history.state变为null。通过在替换state时保留原值,即window.history.replaceState(latestState, '', url),可以解决这一问题,确保刷新后仍能正常回退。

2025-05-22 15:37:33 135

原创 nuxt: “./well-known/appspecific/com.chrome.devtools.json“ 服务端警告问题解决

在Nuxt启动服务端后,刷新页面时会出现警告“No match found for location with path "/.well-known/appspecific/com.chrome.devtools.json"”。该警告是由浏览器在localhost域名下发出的请求引起的。为了解决这个问题,可以通过编写一个Nuxt服务端插件来忽略该警告。具体方法是在根目录下的server/plugins中创建一个well-known-ignore.ts文件,并在其中重写console.wa

2025-05-16 11:10:52 591

原创 把 cursor 的工具活动栏改成 vscode 一样的垂直形式

按照图中路径,进入设置中,点击这个icon图标,打开配置文件 settings.json。vscode用习惯了,突然使用cursor不习惯水平的工具活动栏,想要改成垂直形式。,再保存,然后重启 cursor,就会发现设置成功了。

2025-02-18 11:18:33 2834

原创 解决 nuxt 升级后出现的 does not provide an export named ‘useId’ 报错问题

解决 ‘/_nuxt/node_modules/vue/dist/vue.runtime.esm-bundler.js?v=66f24f9d’ does not provide an export named ‘useId’ 报错。

2024-12-16 15:02:23 863

原创 一个5年前端的Git命令记忆图

此文收集了一些常用的 Git 命令,也是我精心排序好的 Git 命令。无论是日常工作,还是新入职一家单位后的仓库配置,都能用上。

2024-12-01 23:56:38 198

原创 解决 transform: translate 在 hover 时产生的抖动问题

此文解决一个问题:hover 时,形变 transform: translate 引起的抖动问题。思路是给位移的盒子包裹一层 div。

2024-11-25 00:41:08 331

原创 a-select 点击 icon 没有反应(无法出现/收起下拉框)

我用的是nuxt+ant-design-vue+ tailwindcss。

2024-10-15 10:37:38 313

原创 怎么样卸载飞连?

关于如何卸载掉家里电脑的【飞连】软件的方法

2024-07-14 15:50:44 7437 23

原创 怎么使用 SSH 连接 github?

使用 ssh 地址 git clone 克隆代码失败 或 推送代码失败。

2024-03-03 16:51:23 732 1

原创 vuepress开发npm run dev时正常,打包npm run build时报错

场景:我按照vuepress文档搭建了自己的博客npm run dev 开发的时候正常,但是要部署时 npm run build 打包发生了报错问题描述:Error: Cannot find module ‘F:\3.Project\1.VS Code project\5.vuepress-blog\vuepress-blog\dist\manifest\client.json’具体的报错信息如下Error: Cannot find module 'F:\3.Project\1.VS Cod

2024-02-05 02:40:13 4024

原创 git怎么样快速统计自己的代码总行数

怎么样在git统计自己的代码行数和commit数量

2022-10-21 21:39:02 6742

原创 vue表格中多个展开行当中的二级表格,怎么样实现勾选项互斥功能

项目场景:使用表格组件时,每行数据都有展开项功能,每个展开项中又是一个表格,这些二级表格有勾选功能,当我勾选第一个展开表格数据后,再勾选第二个展开表格,要求清空第一次勾选的数据。具体场景如下:问题描述:我先勾选第一个二级表格中的2条数据然后,我再勾选第二个二级表格中的1条数据,没办法清空前2条数据难点:二级表格是隔离的组件,无法在一级表格组件中用 this.$refs 来引用当前操作的二级表格 解决方案:创建一个事件中心 bus,并在二级表格组件中引入在二级表格组件的

2021-11-14 18:03:41 1659 4

原创 vue使用for循环加Promise.all来发送多个请求,并且等到所有请求结束后处理数据

项目场景:项目中要根据一个模型 id 的数组列表,来查询所有模型的数据我需要对同一个接口循环发送多个请求,次数不定必须等所有结果返回后,再处理数据,并展示实现方法: // 并发查询所有模型信息 async getKeys() { // 准备一个列队存放请求 let queue = [] // 循环推送请求到 queue 列队(如:idList = ['a', 'b', 'c'],则会同时发送3次请求) this.idList.forEach(it

2021-07-30 21:04:27 6259 2

原创 前端 vue 怎么下载后端返回的二进制流 excel 表格文件

前端处理二进制流文件并下载,功能实现,你可以给 download 属性设置不同的值,来给文件取名,通常会加上一个时间函数必须添加responseType: ‘arraybuffer’,不然报错(responseType也可以是blob,可自行尝试)new Blob([res], { type: ‘.xlsx’ }) 中的type可以改成其他格式,取决于你要导出的文件类型。

2021-07-28 22:15:33 4427 6

原创 vue单选控全选、全选控单选,并且循环多次该组件

文章目录前言一、template部分二、js部分总结前言实现一个组件,它具有:单选、全选功能可以被循环、互不干扰就像这样:一、template部分使用的UI库是腾讯的 magicbox // 不需要关注其中的类名和变量,只需关注方法:handleCheckedAll、handleChange <div class="group-label">{{ groupData.group_name }}</div> <bk-check

2021-07-26 22:06:41 690

原创 怎么样实现跳转页面后,点击返回,仍然保留表格原来的筛选条件?

跳转页面后点击返回,仍然保留表格的筛选条件:搜索值、页码、每页几条1.需求说明2.实现的步骤1.需求说明操作表格数据后,点击返回后仍然保留原来的查询条件页面中有搜索框、表格、分页 3 个组件表格每条数据有操作列,例如:点击 详情,就会跳转到另一个页面表格数据筛选条件为:搜索值 + 当前页码 + 每页几条数据它大概长这样:2.实现的步骤该页面创造时从 sessionStorage 中读取先前保存的 筛选条件如果该 筛选条件 存在就把它取出来,作为查询条件该页面被销毁前保留 筛

2021-07-17 21:11:27 5824 4

原创 vue监听报错Error in callback for watcher “option“: “TypeError: Cannot read property ‘apply‘ of undefined

项目场景: vue在子组件用watch监听器观测prop接收的父组件对象option,问题描述:浏览器发出了报错:[Vue warn]: Error in callback for watcher “option”: “TypeError: Cannot read property ‘apply’ of undefined”TypeError: Cannot read property ‘apply’ of undefined以下是我的代码:watch: { // 只需要关注 opti

2021-07-08 20:39:45 21841 6

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除