麻辣堂|资源主站|开发论坛|在线手册
首页 Apache Linux Java MySQL 注册帮助 
PHP项目开发组是PHP开发资源网于2007组年建成立的项目开发团队,目前核心开发成员有27人, 项目协作成员8名.下设7个开发组,主要承接大/中型网站项目开发任务。

    由于开发任务较多,人员比较紧张,现面向社会招聘全职或者兼职开发人员,不管你是在校大学生,还是全职开发人员,以及SOHO都可以联系本站,我们可以长期合作,并为您带来丰厚的报酬。
  您现在的位置:PHP开发资源网 > 麻辣堂 > 详细资料
待解决
完美实现HTML在线编辑器回车单换行
悬赏分:20 - 2007年08月22日

在网上搜过关于这方面的内容,但都没有一个比较好的解决办法。以下我介绍的方法已经实际应用在blog.xoyo.com中,大家有兴趣的可以去实际体验一下,有问题也可以在我的blog上留言(http://blog.xoyo.com/ouran),作为系统的开发人员,我是很欢迎大家来使用逍遥的博客系统的。 一般的HTML在线编辑器在回车换行时都会生成一对p标签,这在页面上看来就是换了两行,因为P标签是段落标签。 为了实现跟普通的文本表单一样的效果,像网易的邮箱,sina的博客采用了一种方法来实现换单行。即在页面中初始加上一对或多对div标签。但这种方法有局限性,那就是在用户全选编辑器里所写的内容后,再删除掉内容,此时又会出现p标签,此时再按回车,又会变成换双行。 还有另外一种处理方法,那就是获取按键并在页面上插入br标签,但是单纯的插入br并不能换行,因为编辑器不能即时在页面上输出这个换行,所以很多人采用的方法是插入
。这样插入一个不可见字符后,的确是实现了换行,但是页面上多出了很多
,这部分垃圾代码必须要在最后过滤掉才能进一步处理,影响录入效率。 google采用了另一种思路,它用样式来控制P标签,使得P的输入就跟换单行一样,但这也会有额外的样式代码生成。 我采用的办法很直接,就是要在回车时插入一个
并把光标定位到换行处。 实现时同样也是获取回车键并插入
,此时,我并不在其后插入,而是采用了移动光标的方法,代码如下: // 判断浏览器类型,绑定事件 if (isMSIE) { editor.document.onkeypress=insertBr; } 实现换行的代码如下: // 本代码仅为代码片段,全文内容请参考逍遥博客的编辑器代码 function insertBr(e) { e = g_editor.event; if(e.keyCode==13) { insertHTML("
"); // 工作代码 var sel = g_editor.document.selection;// 获取文本 var rng = sel.createRange();// 创建一个选区 rng.moveStart('character',0);// 移动起始点,只是调用,并不实际移动 rng.collapse(true);// 在起始点重叠 rng.select();// 显示光标 return false; } } 采用了以上5行工作代码后,HTML编辑器已经可以实现回车换单行了,此技术在IE6.0下测试通过。 在firefox下由于其本身就已处理了回车换行,所以不需要采用本技术特殊处理。

提问者:ustb   08-22 11:11
答复
不错。
回答者:PHP爱好者 - 瓦岗村民 01-23 11时
我也来回答:
不管你有没有帮助我们,瓦岗寨8万村民将感谢你。。。。。

为防止灌水,您需要计算一道数学题: 答案:
32 + 11 = ? 请将计算结果填在上面

 
[]
©2007 PhpRes.COM