自定义列表逻辑梳理

导语

在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事件添加
变为其他列表：序号重算，上下段落合并
若找不到段落，控制台出现警告提醒。