Talk is cheap. Show me your code
摘要:这篇文章将以插入图片为例,介绍如何在 CKEditor5 中插入块级元素,以及在块级元素上添加工具栏 最终的效果如下: 一、定义 Schema 和 Conversion 和之前的加粗插件、超链接插件不同,图片在编辑器中是以块级元素呈现的 所以在定义 Schema 的时候需要设置 isObject 以 阅读全文
posted @ 2021-04-12 10:59 Wise.Wrong 阅读(4) 评论(0) 推荐(0) 编辑
摘要:前面的几篇文章已经介绍了 CKEditor5 插件的构成,并开发了一个加粗插件 这篇文章会用一个超链接插件的例子,来介绍怎么在 CKEditor5 中开发带有弹窗表单的插件 一、设计转换器 Conversion 开发 CKEditor5 的插件有两个必须步骤: 1. 设计好 View、Model 以 阅读全文
posted @ 2021-04-02 09:39 Wise.Wrong 阅读(30) 评论(0) 推荐(0) 编辑
摘要:上一篇文章将加粗插件的架子给搭好了,现在就来完善具体的逻辑,主要的难点在于 model 和转换器 conversion 一、创建一个 Schema 在 CKEditor 5 中,编辑器实现了自己的一套运行时的编辑内容,即 model,可以打开调试器 CKEditorInspector 查看 然后编辑 阅读全文
posted @ 2021-03-09 11:20 Wise.Wrong 阅读(88) 评论(0) 推荐(0) 编辑
摘要:基于编辑器做二次开发,可能大部分的工作量都在于自定义插件 而 CKEditor 5 实现了一套自己的 MVC 架构,导致开发自定义插件尤为复杂 一、插件的基本架构 CKEditor 5 的自定义插件都需要从 Plugin 类继承,在此基础上根据实际情况开发三个模块: 1. editing: 插件的 阅读全文
posted @ 2021-02-26 16:54 Wise.Wrong 阅读(110) 评论(0) 推荐(0) 编辑
摘要:最近需要将项目中的编辑器从 CKeditor 4 升级到 CKeditor 5 原以为只是换个内核,然后稍微调整一下自定义插件的代码,没想到进了一个大坑 在经过一个月的摸爬滚打之后,终于完成升级内核的工作,同时也算摸清了 CK5 的基本玩法 为方便后面的同学来接手,打算新起一个项目,记录一下 CK5 阅读全文
posted @ 2021-02-19 09:47 Wise.Wrong 阅读(100) 评论(0) 推荐(0) 编辑
摘要:某个阳光明媚的下午,我正悠闲的品着刚买的滇红,测试小姐姐突然急匆匆的找到我: “快看一下群里,文章编辑器出问题了!” 我手中的滇红瞬间不香了,抓了抓所剩无几的头发,开始了漫长的 Debug 环节 经过排查,发现问题的根源居然是一段正则表达式... 一、问题重现 // 在浏览器控制台中运行下面的代码 阅读全文
posted @ 2021-01-23 19:07 Wise.Wrong 阅读(108) 评论(1) 推荐(1) 编辑
摘要:工作和生活终于到了图穷匕见的时候 《2019 年终总结 & 2020 年度计划》 2020 年度计划完成情况: 1. 健身时间不少于300天: 达标 只有年初疫情期间懈怠了几天,终于能看出八块腹肌了 PS. 饮食比锻炼重要多了,大概八二开 2. 至少每个月看一本书: 达标 《浪花少年侦探团》,《再见 阅读全文
posted @ 2020-12-30 10:01 Wise.Wrong 阅读(270) 评论(6) 推荐(2) 编辑
摘要:各种偏门捷径实现如图所示的评分组件 一、低配版 const rate = (num) =>"★★★★★☆☆☆☆☆".substring(5 - num, 10 - num); 没错,只需一行代码就能实现评分(狗头) 虽然星星的样式一言难尽,也没有星星的交互,但这种实现方式你想到过吗? 二、标准版 r 阅读全文
posted @ 2020-12-22 11:49 Wise.Wrong 阅读(175) 评论(0) 推荐(0) 编辑
摘要:在上一篇实战演练中,已经将项目搭建好,并介绍了 Router、Vuex 的基本用法 接下来会以一个 Todo List 项目来介绍实战中如何使用 Composition API 一、输入框与列表(按键别名 + computed 类型声明 ) 首先是输入框,由于需要支持回车键提交,所以需要监听 key 阅读全文
posted @ 2020-11-06 10:56 Wise.Wrong 阅读(2068) 评论(5) 推荐(0) 编辑
摘要:前面的几篇文章已经大致介绍了 Vue 3 的常用 API,现在综合起来做一个实战演练 配合完整代码食用更香哦,项目地址:https://github.com/wisewrong/test-vue3-demo 一、初始化 首先通过 Vue-CLI 创建一个 Vue 3 项目,详细流程可以参考《Vue3 阅读全文
posted @ 2020-11-04 13:49 Wise.Wrong 阅读(6331) 评论(0) 推荐(0) 编辑