导语
在ckeditor中，列表是多层嵌套结构，li元素是ul或ol的唯一类型元素，所以被嵌套列表ul或ol必须被包在li下，由于层级的计算比较困难，所以改为单层嵌套。逻辑梳理如下:
列表有三种类型，分别为有序列表、无序列表以及选择列表。其中有序列表与无序列表都封装在UL标签中，而选择列表由自定义标签CL来封装。列表结构为单层结构，即无嵌套DOM li节点。
有序列表
<ul>
<li ce-para-type="ORDERED_LIST">
~
</li>
</ul>
无序列表
<ul>
<li ce-para-type="UNORDERED_LIST">
~
</li>
</ul>
选择列表
<ul>
<li ce-para-type="CHECKED_LIST">
~
</li>
</ul>
一.列表操作逻辑
代码主要在list/plugin.js文件中，描述列表在操作时的功能展现。
添加列表
在文档加载完成后，添加列表指的是由P段落转变成各个列表的过程。
入口代码：
createList.call( this, editor, groupObj, listsCreated );
在进入入口之前，选取选择区域的节点数组（groupObj.contents），依次处理数组中的内容，变为指定列表。最后重新计算序号标签。
变换列表
列表三种样式互换的过程。
入口代码：
changeListType.call( this, editor, groupObj, database, listsCreated );
通过listArray方法将实际列表节点包装成指定数组，操作数组，将每个元素替换标签。同时将元素所在的列表群同时变换样式。其中选择列表变为有序或无序列表时，会消除最外层的删除线（局部删除线保留）。
删除列表
入口代码：
removeList.call( this, editor, groupObj, database );
删除列表指的是由各个列表转变成P段落的过程。
将选中的列表（列表组）的属性和子节点全部放在新建的普通段落中，若普通段落里面没有内容，用br填充，其后的节点序号重算，并放入一个新建的与原父节点相同的标签中。插入在新建的普通段落之后。
列表层级变换
样式全部由CSS来控制，层级变换是通过修改节点属性来实现。共8级层级。
///script/ckeditor/plugins/indentlist/plugin.js
function indent( listNode ) {
···
var indentOffset = that.isIndent ? 1 : -1;
listArray[k].indent += indentOffset;
···
}
层级变换需要确定选中的都是列表，在代码中在这方面写了保护机制。在CL中input框需要重写响应事件。每次缩进操作都会重算序号。
二.列表同步与加载逻辑
代码主要在coedit/plugin.js文件中，描述列表加载与同步的功能展现。
有序列表和无序列表加载与更新是一组函数，选择列表加载和更新是另外一组函数。
列表查找
编辑框中根据ID全查找，入特定数组。
数组格式
[列表类型,列表缩进值,列表本身节点]
或 无法找到节点
[-1,undefined,undefined]
列表加载
依赖段落ID（string）与插入位置（bool）
有序列表和无序列表插入
判断基本段落类型，分情况插入
//找到段落
if(basePara[1] >= 0 && basePara[0] != 3)//有序列表和无序列表
}else if(basePara[0] == 3){//选择列表
else{//普通段落
}
//找不到段落
//插入首个带有ID段落的前面
newNodePack.insertBefore( baseElement );
插入段落后进行段落序号重排
有序列表和无序列表更新
判断被更新段落类型，分情况更新
if(baseType == 'other'){
//普通段落转列表
}else if(newNodeTag == 'other'){
//列表转普通段落
}else{
//列表更新为列表
oNewElement.insertAfter(basePara[2]);
}
列表更新完成后，查看被更新段落的父节点（ul）是否将会出现没有子元素的情况，若将会出现，则删除父节点；若不出现，重新计算，上下段落合并。
选择列表的插入
对选择列表的上下环境进行判断，对列表节点进行包裹
switch(basePara[0]){
case 0:
readyToInsert = newNodePack;
break;
case 1:
case 2:
var listLevel = basePara[1];
readyToInsert = newNodePack;
baseElement = baseElement.getParent();
break;
case 3:
break;
default:
break;
}
包裹后前后插入，若找不到段落，处理情况和普通列表无法找到段落的情况一致。
选择列表的更新
只有被更新项为选择列表或者将要更新为选择列表，回进入此函数执行
if(basePara[0] == 3){
if(newNodeTag == 'cl'){
//check变check
}else if(newNodeTag != 'other'){
//check变列表,basePara中的所有节点都要变
}else{
//check变普通段落
}
}else if(newNodeTag == 'cl'){
if(basePara[0] == 0){
//普通段落变check
}else if(basePara[0] == 1 || basePara[0] == 2){
//列表变check,增加小框
}
}
变成普通段落：原段落序号重算
变成选择列表：对Input事件添加
变为其他列表：序号重算，上下段落合并
若找不到段落，控制台出现警告提醒。
网友评论