导语
在ckeditor中,列表是多层嵌套结构,li元素是ul或ol的唯一类型元素,所以被嵌套列表ul或ol必须被包在li下,由于层级的计算比较困难,所以改为单层嵌套。逻辑梳理如下:
列表有三种类型,分别为有序列表、无序列表以及选择列表。其中有序列表与无序列表都封装在UL标签中,而选择列表由自定义标签CL来封装。列表结构为单层结构,即无嵌套DOM li节点。
有序列表
-
~
无序列表
-
~
选择列表
-
~
一.列表操作逻辑
代码主要在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事件添加
变为其他列表:序号重算,上下段落合并
若找不到段落,控制台出现警告提醒。