ckeditor 的列表格式化与清除不同于 块状格式化(h1,h2),行内格式化(span),没有采用直接和range打交道(extractContent),可能由于列表很注重标签间的关系(并列与嵌套),变化也比较死板,ck 采用了与通用的块状格式化与行内格式化稍微不同的方法。
1.格式化
格式化前:
由于我们选中的range经过处理后,都是字或者包含字的元素边界,而列表化,即是将包含字的块状元素变为 ul li 结构,这包括两个方面:
1. 不能嵌套块状元素的节点,即选择区域直接的行内元素块状祖先,可转化为 li,所以第一步就是将选择区域分为一堆直接块状元素的集合,根据 xhtml dtd 1.0
(ck采用自动转换的js形式),可列出以下元素:
// Elements that may be considered the "Block boundary" in an element path.
var pathBlockElements = { address:1,blockquote:1,dl:1,h1:1,h2:1,h3:1,h4:1,h5:1,h6:1,p:1,pre:1,li:1,dt:1,dd:1 };
(li dd在dtd中允许嵌套块状,但是具体在编辑过程中是不会出现这种情况下?在li中,列表格式化功能禁用,只能清除格式,具体待详解?可能li,dd都必须和ul,dl配对,不能随便打乱,所以这里当作直接块状元素,且不能被其他元素嵌套)
2.找出包含第一步的直接块状元素的可嵌套块状元素,这样的话,每一个可嵌套块状元素包含的直接块状元素最终转换为同一个ul下的一组li,并替换掉对应的直接块状元素集合。这里的可嵌套块状元素如:
// Elements that may be considered the "Block limit" in an element path.
var pathBlockLimitElements = { body:1,div:1,table:1,tbody:1,tr:1,td:1,th:1,caption:1,form:1 };
转换后:
2.清除格式
清除格式前:
1.首先找出选择区域包含的 li 集合,如 li-2 ,li-3
2.找出包含选择li 集合距离 body 最近的 ul 根祖先(也可能是集合)
3.由于清除格式涉及到根 ul 大部分节点的整个缩进调整,不好进行细微dom操作以及后期合并,ck采用整个ul重新生成替换的做法
3.1 从根ul的所有li节点,导出内存数组表示(listToArray): 扁平化处理,深度遍历,利用 缩进值和顺序来代表一棵树(在这种表示中,ul确实是多余的,故不包含)
3.2 将清除格式的对应li的内存数组元素缩进值标志为 -1,并调整其后的li缩进值。
3.3 从调整好缩进值的内存数组递归(深度遍历添加ul)构造出文档碎片(arrayToList):缩进值为-1的对应li,用p替换掉直接添加到当前递归层所属的文档碎片,否则复制 li 添加到当前递归层所属的ul (ul当然也属于文档碎片)。
3.4 用3.3得到的文档碎片完全替换掉根ul,注意如果此时ul嵌套很深,内容很多时,会有明显屏幕闪烁。
最终结果:
还可以看 demo
- 大小: 39.2 KB
- 大小: 43.3 KB
- 大小: 23.4 KB
- 大小: 35 KB
分享到:
相关推荐
长坤 CK-T1503 测温枪固件 ,开机提示H1 温度高,不一定是测温头坏,下载此固件写入 24C02 里面即可修复
:ck-video,ck-video是一款wordre视频播放器插件,支持快速插入国内10多家视频网站的视频。由于是基于cklayer播放器开发的
CK-300型微电脑温度控制仪是为纺织、印染行业开发研制的一种现代化工业自动化控制仪器。可广泛应用于纺织、印染、针织、漂染、色织等工业领域,并对提高染织物的染色质量、节约能源、降低消耗、加强企业管理、提高...
ck-slide淡入淡出效果的图片轮播插件
基于CK-CPU的Linux2.6实时性能优化.pdf
[信息办公]时机商计(CK-ERP) v0.16.1_ck-erp.zip
[信息办公]时机商计(CK-ERP) v0.16.1_ck-erp.zip源码PHP项目源代码下载[信息办公]时机商计(CK-ERP) v0.16.1_ck-erp.zip源码PHP项目源代码下载 1.适合个人搭建网站项目参考 2.适合学生毕业设计搭建网站参考 3.适合小...
CK-CPLD-EPM240 开发板原理图讲解.pdf CK-CPLD-EPM240 开发板是基于 ALTERA MAXII 系列的 EPM240T100C5N FPGA/CPLD 学习开发平台,提供了丰富的硬件资源和大量的实验例程,详细介绍了如何在本实验平台上完成各个...
CK-QW-HR-16员工福利与实施细则(征询稿).doc
关于LT1083CK-12,说明的很详细,对于开发有很大帮助。
南昌航空大学信息工程学院产品,此文档是毕业实习的报告。
CK-UR12-E00.zip
CK-21 珩磨机使用手机
该应用程序是使用create-react-app,redux,打字稿和样式化组件创建的。 请参阅, 和。 感谢您使用我的样板。 目录 纱线喷射或npm运行喷射 npm运行皮棉 npm运行格式 npm运行预部署 npm运行部署 学到更多 安装 要...
CK-LINK 原理图+pcb ULINK壳
BR-CK-WI-002仓管员岗位职责.doc
科密票据打印机官方驱动程序 COMET-CK-300K是CK-300K打印机的专用驱动程序,能完美驱程COMET-CK-300K的票据打印机,有需要的用户可以下载驱动程序安装。小编提供了32位和64位的驱动,请用户根据自身系统选择对应的...
CK-CPLD-EPM240程序效果说明.pdf
这个项目包含CK工作流,自动化操作和可重用工件,以测试和基准化常见的神经网络操作。 CK $ python -m pip install ck --user CK-NN测试 $ ck pull repo:ck-nntest $ ck install package --tags=lib,nntest 霓虹灯...