CKEditor，从粘贴逻辑到光标位置

首先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());
}