最近在项目中碰到一个比较棘手的问题：
在iframe富文本编辑器中，有个工具栏，这个工具栏在iframe标签之外，工具栏上有一个按钮，点击该按钮向iframe正在编辑中的光标处插入一个图片，图片会插入到当前光标所在的位置。但由于需求的需要，点击该按钮后需要弹出一个详细选项浮动层，选择详细的类型后再插入，如此，问题来了，当我点击了该按钮，浮动层显示出来后，iframe已经失去焦点，并不知道之前正在编辑的位置，所以编辑器默认把图片插入到编辑器内容的最前边（内部处理），编辑器及浮动层需求如下图：
解决尝试
一、利用模态弹出框
首先声明这种方式是可行的，因为模态对话框会保持iframe编辑器的编辑状态，模态对话框的返回值可直接插入到之前正在编辑的光标位置，就像上面图中其他按钮一样，它们通过点击事件直接插入。但是对于上述需求，只是在该按钮位置添加了一个子类型选择列表框，用模态窗口显然得不到更好的人性化体验，这也不是我们所想要的。
这时候如果能保存之前光标的编辑位置就好了，的确，在按钮的点击事件中，弹出浮动层的同时也保存好光标的位置，然后选择了详细类型后再将光标还原到原来的位置插入图片信息，经过尝试和摸索，令人欣喜的是，这种方式是可行的。
二、保存光标位置，选择后还原（1）
这种方法主要通过document的selection对象来实现，在按钮的点击事件处理程序中，获取当前光标据文档开头的位置（即长度），然后保存，在选择了子类型后，根据之前保存的位置还原光标，然后插入图片信息，代码片段如下：
//记录光标的位置，以备后续还原使用
var LastPos = 0;
//保存当前光标的位置
function SaveCusorPos() {
//获取编辑器焦点
var wobj = document.getElementById("myiframe").contentWindow;
wobj.focus();
if (document.selection) {
//ie，利用范围进行计算
var sText = wobj.document.selection.createRange();
//清除掉当前选中的内容
if (sText.htmlText != undefined && sText.htmlText != "") {
wobj.document.selection.clear();
}
//选择当前光标位置到文档开头之间的内容（以字符为单位）
sText.moveStart('character', -wobj.document.body.innerHTML.toString().length);
//计算选择内容的长度
LastPos = sText.text.length + FliterHtmlTag(sText.htmlText) + 1; //; //sText.htmlText.length; //
}
else if (wobj.selectionStart || wobj.selectionStart == "0") {
//firefox，直接读取编辑位置
LastPos = wobj.selectionStart;
}
}
上述代码不难理解，在ie中需要用范围计算当前光标位置距离文档开头的距离，而在firefox中，直接可以用编辑对象获取当前的编辑位置，下面是光标还原的代码：
//把光标还原到之前保存的位置
function SetCusorPos() {
//获取编辑器对象焦点
var wobj = document.getElementById("myiframe").contentWindow;
wobj.focus();
if (wobj.document.body.setSelectionRange) {
//firefox,直接通过函数定位光标
wobj.document.body.setSelectionRange(LastPos, LastPos);
}
else if (wobj.document.selection.createRange()) {
//ie,用selection对象进行选择
var range = wobj.document.selection.createRange();
range.collapse(true);
//将选择区域的开始位置和结束位置都移动到之前保存的点
range.moveEnd('character', LastPos);
range.moveStart('character', LastPos);
//定位光标的位置
range.select();
}
}
在不同的浏览器中，处理方式均不一样，不过有一点是相通的，它们都是通过将选取的开始位置和结束位置重合来定位光标。
经测试，这种方式是可行的，但它只能在纯文本处理的时候有用（IE中），问题在于这个保存点的计算，通过选区Text的length获取的长度是只是这个选区的文字长度，它并不能过滤多媒体元素（如图片、音视频等），这些元素在这个length中并没有包括，故存在多媒体元素的时候，这个光标保存点是不准的，会在实际位置的前面插入。此外，选区还有另外一个属性htmlText，获取它的长度又如何呢！？答案也是不行，这个长度包含了选区中html标签的所有字符，比如换行，段落等都被计算在内，这个光标保存点比实际的要大的多，会在实际位置的后面插入。
二、保存光标位置，选择后还原（2）
上述两种方法都有自己的缺陷，经过摸索和查阅相关资料，在IE中有第三种方法可以实现此功能，就是selection对象的getBookmark和moveToBookmark两个方法，前者获取一个对象，这个对象记录了当前编辑器中光标的位置信息，后者根据这个位置信息还原光标的位置。代码如下：
//存储之前光标位置信息的对象
var ieSelectionBookMark = null;
//保存当前光标的位置
function SaveCusorPos() {
//编辑器获取焦点
var wobj = document.getElementById("myiframe").contentWindow;
wobj.focus();
if (document.selection) {
//获取当前光标的位置
var rangeObj = wobj.document.selection.createRange();
ieSelectionBookMark = rangeObj.getBookmark();
}
}
//把光标还原到之前保存的位置
function SetCusorPos() {
//编辑器获取焦点
var wobj = document.getElementById("myiframe").contentWindow;
wobj.focus();
if (ieSelectionBookMark) {
//还原光标的位置
var rangeObj = wobj.document.selection.createRange();
rangeObj.moveToBookmark(ieSelectionBookMark);
rangeObj.select();
ieSelectionBookMark = null;
}
}
上述代码改写了第二种方法中的两个函数，比较简洁，但这种方式在IE8中测试通过，其他不同版本浏览器中有待进一步验证，其他浏览器如firefox，利用第二种方式就可以实现。
如今浏览器五法八门，各自对标准的支持也不一样，导致了前端开发者做了大量的工作来弥补兼容性，不管怎样，相信会越来越好~~~