ck - 列表格式化与清除简析

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