首先ckeditor中列表与所我目前所工作的列表构造不同，ckeditor中列表层级越大，嵌套的层级也越多。而目前工作的列表构造中，层级的变化是用CSS来控制的，DOM结构只有一层嵌套。所以在粘贴处理的时候方便很多。
其实着重考虑的就是两点粘贴内容和粘贴位置，我称这两项为内容和环境， 内容就是一个字符串，需要整理，从不同位置拷贝过来的内容在格式上差别比较大；环境也需要整理，列表中我们人为规定了只能存在文本，要是粘贴内容中有图片、表格类似的段落，就需要拆分这个环境，内容作为普通段落插入到被拆分后的两个列表段落之间。
重点还是解决以下几个问题
1. 先内容还是先环境的问题？
我觉得应该，先规范内容，再考虑环境。
在最开始实现这个功能的时候，确实是先考虑了环境，把环境处理明白了，再往里加内容。
找到光标所在段~~》下方插空的li节点~~》空li节点处截断~~》粘贴内容~~》查看是否存在可合并列表
这样的好处是，当上传本地图片到编辑器中时，success异步返回时，就可以直接操作DOM让返回的内容直接显示在正确的位置。
缺点也显而易见，要是只是粘贴文本的话，截断操作就显得多余了。
所以，先内容，后环境
上传本地图片的异步返回中，去做替换节点内容的操作，而不是去做插入新节点的操作。
//自设binaryFlow属性记录剪切板转过来的二进制流
if(e.data.binaryFlow){
var id = Math.uuid().replace(/-/g,'');
var imgValue = e.data.binaryFlow;
var imgData = imgValue.split(',');
var data_value = imgData[1];
~
$.ajaxFileUpload({
~
data:{file_id:id,file_name:'png',image_bs64:data_value},
success:function(data,status){
if(data.data != undefined){
var bodyWidth = $('.mnote-document-edit-section .cke_contents[role="presentation"]')
.find(".cke_wysiwyg_frame.cke_reset")
.contents()
.find("body").width(),
imgWidth = data.data.width != undefined && data.data.width != null ? data.data.width : 0,
imgHeight = data.data.height != undefined && data.data.height != null ? data.data.height : 0;
var tmpl = "<img {width} {height} m_width='{m_width}' m_height='{m_height}' image_id='"+ toolHelper.textHandle(data.data.file_id) +"' src='"+ toolHelper.textHandle(data.data.url) +"'/>";
if( bodyWidth > 0 ){
//编辑器宽度小于图片
if( bodyWidth < imgWidth){
imgWidth = "100%";
imgHeight = "";
}
//替换宽度
if(imgWidth != undefined && imgWidth != null){
tmpl = tmpl.replace(/{width}/g, "width=" + imgWidth).replace(/{m_width}/g, data.data.width);
}else{
tmpl = tmpl.replace(/{width}/g,"").replace(/{m_width}/g, "0");
}
//替换高度
if(imgHeight != undefined && imgHeight != null){
tmpl = tmpl.replace(/{height}/g, imgHeight == "" ? "" : "height=" + imgHeight).replace(/{m_height}/g, data.data.height);
}else{
tmpl = tmpl.replace(/{height}/g,"").replace(/{m_height}/g, "0");
}
//替換虛構節點
var tempPic = element.getDocument().findOne(" .factitiousImg ")
tempPic.removeClass("factitiousImg");
tempPic.getParent().setHtml(tmpl);
var range = that.editor.createRange();
range.moveToElementEditEnd( element );
range.select();
that.editor.fire('change');
}else{
alert("Error 编辑器宽度小于等于0");
}
}
});
}
2. 列表中行首，行中，行尾的行内文本截断问题
行首粘贴内容应该在其上，行中应该此行文本被截断，行尾粘贴内容应该在其下
行首行尾比较简单，就是增加空行的位置不一样罢了。行中处理逻辑有点乱，有三个想法。
（1）.光标之后的文本做成一个li节点，插入到光标所在行之下。中间再插入空段
卡手的位置：不知道怎么做成一个li节点。
关于range和selection不是很熟练，没有找到获取选中域HTML的方法。
（2）.复制行，上一行删除光标点到末尾，下一行删除光标点到开始
卡手的位置：复制后生成行的光标位置确定不了
首先CKeditor提供了很多设置range的方法
setStartAt和setEndAt都是在range存在于DOM中的时候，设置范围用的，两个方法好像单独用更合适。对于新创建的Range，我觉得用setStart和setEnd更靠谱一些。
var deleteRange = that.editor.createRange();
//deleteRange.setStart(currentElement,cursorRange.startOffset);
deleteRange.moveToRange(that.editor.getSelection().getRanges()[ 0 ]);
deleteRange.setEnd(copyNode.getFirst(),cursorRange.startOffset);
deleteRange.select();
that.editor.getSelection().getRanges()[ 0 ].deleteeContents();
replaceLi.insertAfter(currentElement);
但是这个setEnd会报错，因为offset是text节点中的，而被克隆的是element，需要进一步去寻找。要是不加BIUS（加粗之类的）样式，还是容易找的，但是有了样式，节点就更难找了。
（3）.光标处插入空白行
有insertNode这个方法，真是棒极了。。。
cursorRange.insertNode(replaceLi);
var breakLi = replaceLi.getParent();
while(breakLi.getName() != 'li' && breakLi.getName() != 'body'){
breakLi = breakLi.getParent();
}
if(breakLi.getName() == 'li'){
replaceLi.breakParent(breakLi);
}else{
//防范错误
replaceLi.breakParent(replaceLi.getParent());
}
网友评论