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