编辑器的输入焦点问题

现在要做一个富编辑器`~`~~

需要得到当前的输入光标位置~~以及设置它位置~~~

主要是要在编辑器失去焦点时保存光标位置~~待插入图片的时候可以插入到之前保留的位置上~~


要求兼容ie和firefox~~谢谢~`~


只兼容ie,若说明详细也行~~~
 
 
问题点数:200 回复次数:32 显示所有回复显示星级回复显示楼主回复 修改 删除 举报 引用 回复  
 

 加为好友
发送私信
在线聊天
 sallay
野文
等级:
可用分等级:掌柜
总技术分:1448
总技术分排名:15747

 发表于:2008-09-17 11:38:541楼 得分:5
这个问题和我昨天解决的问题类似,我整好久才弄出来,或许你可以参考一下:

http://blog.csdn.net/sallay/archive/2008/09/16/2937086.aspx
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 showbo
要学习了.....さようなら
等级:
可用分等级:富农
总技术分:60091
总技术分排名:141
3
3
 发表于:2008-09-17 11:48:292楼 得分:150
http://country.lvyou168.cn/flashwariii/editor/

这个可以,只是没有上传图片功能,提供的js和插入表情[最后一个图标]一样

你上传完后输出js调用下插入图片的js函数,参数我记得好像是图片的服务器路径
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chenang622
我很懒,没有设置昵称
等级:
可用分等级:短工
总技术分:93
总技术分排名:101605

 发表于:2008-09-17 11:52:263楼 得分:2
貌似javascript有个event事件;
点击的时候记录event坐标
声明全局变量
var x;
var y;
点击的时候触发一个事件记录这两个值
上传图片的时候取这两个值!
才疏学浅,只能献微薄之力
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 he_8134
只有星星伴明月
等级:
可用分等级:中农
总技术分:13769
总技术分排名:1287

 发表于:2008-09-17 13:22:004楼 得分:0
@sallay
我要的是富编辑器的,也就是把整个页面设置成可编辑状态后那种,像2楼给的那种编辑器~~

@showbo
插入表情那里实际上没有用到我说的功能,编辑页面(iframe)没有失去焦点,那个编辑器做的比我的还简陋呢..


貌似还没正确答案~~

 
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 caffeewithcoke
糊涂
等级:
可用分等级:乞丐
总技术分:208
总技术分排名:63132

 发表于:2008-09-17 13:24:095楼 得分:1

 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 hadavidlu
乱世明灯
等级:
可用分等级:中农
总技术分:1
总技术分排名:329404

 发表于:2008-09-17 13:31:296楼 得分:0

http://ww3.bbtt.us/?fromuid=156244
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 showbo
要学习了.....さようなら
等级:
可用分等级:富农
总技术分:60091
总技术分排名:141
3
3
 发表于:2008-09-17 13:59:377楼 得分:0
引用 4 楼 he_8134 的回复:

@showbo
插入表情那里实际上没有用到我说的功能,编辑页面(iframe)没有失去焦点,那个编辑器做的比我的还简陋呢..


貌似还没正确答案~~
 

你是没点过上一页下一页吧,怎么没失去焦点了。第一次点当然没失去焦点了。

楼主自己没试完全
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 mumuTiger
幸福...
等级:
可用分等级:中农
总技术分:2841
总技术分排名:7998

 发表于:2008-09-17 17:05:508楼 得分:1
关注。。。
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 llddy
尔今尔后
等级:
可用分等级:中农
总技术分:1454
总技术分排名:15167

 发表于:2008-09-17 17:33:589楼 得分:1
看看楼下的人能实现吗?

 
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-17 17:44:4810楼 得分:0
引用 7 楼 showbo 的回复:
引用 4 楼 he_8134 的回复:

@showbo
插入表情那里实际上没有用到我说的功能,编辑页面(iframe)没有失去焦点,那个编辑器做的比我的还简陋呢..


貌似还没正确答案~~


你是没点过上一页下一页吧,怎么没失去焦点了。第一次点当然没失去焦点了。

楼主自己没试完全
 


哈哈,失去焦点后,表情图片就插到编辑器外面去了

哈哈
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-17 17:47:3911楼 得分:0
我想他的意思是想当编辑器失去焦点后,图片还能插入到刚才光标在的位置
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 wwd252
喜欢转身跳投
等级:
可用分等级:富农
总技术分:1995
总技术分排名:11352

 发表于:2008-09-17 17:48:4912楼 得分:1
ding
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 showbo
要学习了.....さようなら
等级:
可用分等级:富农
总技术分:60091
总技术分排名:141
3
3
 发表于:2008-09-17 17:58:5013楼 得分:0
引用 10 楼 chinmo 的回复:
引用 7 楼 showbo 的回复:
引用 4 楼 he_8134 的回复:

@showbo
插入表情那里实际上没有用到我说的功能,编辑页面(iframe)没有失去焦点,那个编辑器做的比我的还简陋呢..


貌似还没正确答案~~


你是没点过上一页下一页吧,怎么没失去焦点了。第一次点当然没失去焦点了。

楼主自己没试完全

 

哈哈,失去焦点后,表情图片就插到编辑器外面去了

哈哈
 


呵呵,在ie下如果你没点击编辑器确实把图片插到外面去了,但是你点编辑器的话是插入到编辑器中原来选择的位置的

看有空了在改,散人
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 he_8134
只有星星伴明月
等级:
可用分等级:中农
总技术分:13769
总技术分排名:1287

 发表于:2008-09-17 20:15:1914楼 得分:0
引用 7 楼 showbo 的回复:
引用 4 楼 he_8134 的回复:

@showbo
插入表情那里实际上没有用到我说的功能,编辑页面(iframe)没有失去焦点,那个编辑器做的比我的还简陋呢..


貌似还没正确答案~~


你是没点过上一页下一页吧,怎么没失去焦点了。第一次点当然没失去焦点了。

楼主自己没试完全
 

嗯啊~之前没试清楚~~真的可以~~不过最后跟你一样了~图片有时会插到文档外面~~
if(IsIE)HtmlRange=$('HtmlEditor',true).document.selection.createRange();//保存上次的range
不过把握好这行代码的执行时机应该就可以了~~~

嗯~过两天再结贴~~
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 simplified
该用户很懒,没有设置昵称
等级:
可用分等级:短工
总技术分:55
总技术分排名:129883

 发表于:2008-09-17 20:26:2115楼 得分:5
首先让你的编辑器获得焦点 我用的是框架
框架.focus();
然后创建一个选区 用来初始化要添加的数据
var sel=框架.document.selection.createRange();
最后添加数据
sel.pasteHTML(数据);

呵呵 很简单把 因为我也做了个编辑器 做好没多长时间 http://www.wt-52.cn/MyWeb/Example/editer/
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 simplified
该用户很懒,没有设置昵称
等级:
可用分等级:短工
总技术分:55
总技术分排名:129883

 发表于:2008-09-17 20:28:1216楼 得分:0
至于楼上所说的数据查到外面去 是没有调用focus()
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 he_8134
只有星星伴明月
等级:
可用分等级:中农
总技术分:13769
总技术分排名:1287

 发表于:2008-09-18 09:19:0017楼 得分:0
引用 16 楼 simplified 的回复:
至于楼上所说的数据查到外面去 是没有调用focus()
 

你focus也没用啊~ie下focus后不会回到之前焦点的位置~~所以要搞保存选择区~保存错了就会跑到外面去~~
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-18 11:12:4518楼 得分:0
引用 17 楼 he_8134 的回复:
引用 16 楼 simplified 的回复:
至于楼上所说的数据查到外面去 是没有调用focus()


你focus也没用啊~ie下focus后不会回到之前焦点的位置~~所以要搞保存选择区~保存错了就会跑到外面去~~
 

哈哈,是的

比如有一个全局变量来保存焦点位置的
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-18 11:14:1319楼 得分:28
引用 13 楼 showbo 的回复:
引用 10 楼 chinmo 的回复:
引用 7 楼 showbo 的回复:
引用 4 楼 he_8134 的回复:

@showbo
插入表情那里实际上没有用到我说的功能,编辑页面(iframe)没有失去焦点,那个编辑器做的比我的还简陋呢..


貌似还没正确答案~~


你是没点过上一页下一页吧,怎么没失去焦点了。第一次点当然没失去焦点了。

楼主自己没试完全


哈哈,失去焦点后,表情图片就插到编辑器外面去了

哈哈

 

呵呵,在ie下…
 

本来想昨天回家改你那编辑器的

结果电脑烧了,晕

没得玩了这几天,晚上都不知道干吗好了,郁闷
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 zhihuixiaole
呻吟
等级:
可用分等级:富农
总技术分:5715
总技术分排名:4080

 发表于:2008-09-18 11:15:3520楼 得分:1
http://blog.csdn.net/zhaogang820125/archive/2007/03/06/1522156.aspx
四范围
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-18 11:47:0221楼 得分:0
if(IsIE)r.execCommand(Command,false,para);
    else doc.execCommand(Command,false,para); 

如果这部分直接用doc.execCommand(Command,false,para)就不会出现我说的那个情况了

 
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-18 11:48:0022楼 得分:0
IE6.0和FF3.0都测试通过
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-18 11:49:2823楼 得分:0
不过还有一个缺点,就是虽然失去焦点后不跑出编辑器了

但不是插在原焦点,呵呵,忘了这一点
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-18 12:04:3924楼 得分:0
。。。

var frm=$('HtmlEditor',true);
这个在IE下返回的是:[object]?
FF下是:[object Window]?
 
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-18 12:10:2725楼 得分:0
之前一直都没注意过这个
 
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 showbo
要学习了.....さようなら
等级:
可用分等级:富农
总技术分:60091
总技术分排名:141
3
3
 发表于:2008-09-18 16:09:1026楼 得分:0
ie使用focus时不能保存上次选择的位置,郁闷,改了下可以了

init.js

JScript code
//主要更改了这里,在点击时或者输入时自动保存range对象
function InitFrameEvent(frm,doc)
{
   if(IsIE)//=====================IE===================
   {
     doc.onclick=function(){HideDiv();HtmlRange=$('HtmlEditor',true).document.selection.createRange();}
     doc.onkeydown=function()
     {
       e=frm.event;//注意这里获取的是iframe中的事件对象     
       if(e.keyCode==13)//在ie时回车生成<p>,替换为<br>.ff下生成<br>,所以不需要处理回车
       {
     e.returnValue=false;//prevent the enter key to exec
     var r=this.selection.createRange();
     r.pasteHTML("<br>");
         r.select();//set the cursor's position
       }
       HtmlRange=$('HtmlEditor',true).document.selection.createRange();
     }
   }
}

 


selFace.js

JScript codefunction InsertFace(e)
{
  if(IsIE){
  var tmpR=$('HtmlEditor',true).document.selection.createRange();
  if(HtmlRange){//已经保存过
//判断父亲容器是否相同,相同则保存,如果不相同说明创建的range不是编辑器里面的
//其实这个个好像不需要了,因为修改过init.js了,在编辑器里面添加了自动保存range的事件,暂且留着吧
   if(HtmlRange.parentElement()==tmpR.parentElement())HtmlRange=tmpR
}
else{//第一次进入页面没选择编辑器而直接插入图片时将插在第一个位置上
$('HtmlEditor',true).focus();
HtmlRange=$('HtmlEditor',true).document.selection.createRange();
}
  }
  HideDiv();
  e=e||event;
  var divFace=document.getElementById("divFace");
  if(divFace.style.top==null||divFace.style.top.trim()=="")
  {
    divFace.style.top=e.clientY+20+"px";
    divFace.style.left=e.clientX+"px";
  }
  divFace.style.display="block";
}

 
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 chinmo
藏*无限
等级:
可用分等级:掌柜
总技术分:118246
总技术分排名:43
3
9
 发表于:2008-09-18 17:12:1627楼 得分:0
不错
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 Free_Wind22
...
等级:
可用分等级:掌柜
总技术分:10926
总技术分排名:1961

 发表于:2008-09-18 17:20:4328楼 得分:2
学习一下,写FCKEditor插件时也碰到这个问题,在别的地方点一下,再点按钮,就插到外面去了... - -!
不知道怎么解决...
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 jhwcd
机器猫
等级:
可用分等级:小地主
总技术分:15191
总技术分排名:1085
 发表于:2008-09-18 17:23:4929楼 得分:2
引用 26 楼 showbo 的回复:
ie使用focus时不能保存上次选择的位置,郁闷,改了下可以了

init.js

JScript code
//主要更改了这里,在点击时或者输入时自动保存range对象
function InitFrameEvent(frm,doc)
{
  if(IsIE)//=====================IE===================
  {
    doc.onclick=function(){HideDiv();HtmlRange=$('HtmlEditor',true).document.selection.createRange();}
    doc.onkeydown=function()
    {
      e=frm.…
 
不错,学习。
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 jiang_jiajia10
紫陌佳佳(本月分不好抢哦)
等级:
可用分等级:中农
总技术分:34599
总技术分排名:297
2
 发表于:2008-09-18 21:19:2730楼 得分:1
引用 2 楼 showbo 的回复:
http://country.lvyou168.cn/flashwariii/editor/

这个可以,只是没有上传图片功能,提供的js和插入表情[最后一个图标]一样

你上传完后输出js调用下插入图片的js函数,参数我记得好像是图片的服务器路径
 
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 he_8134
只有星星伴明月
等级:
可用分等级:中农
总技术分:13769
总技术分排名:1287

 发表于:2008-09-19 13:36:3931楼 得分:0
嗯 解决方法跟我一样~用的.parentElement()~```
 
修改 删除 举报 引用 回复  
 
 加为好友
发送私信
在线聊天
 fx_blog

等级:
可用分等级:贫农
总技术分:412
总技术分排名:41468

 发表于:2008-10-13 14:30:3132楼 得分:0
楼主的问题,非常的简单

setTimeout(function(){Editor.focus()},1000);

就可解决.
 

加支付宝好友偷能量挖...


评论(0)网络
阅读(116)喜欢(1)JavaScript/Ajax开发技巧