![]() |
|
首页 │ Apache │ Linux│ Java│ MySQL│ 注册│帮助 | |||
在网上搜过关于这方面的内容,但都没有一个比较好的解决办法。以下我介绍的方法已经实际应用在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下由于其本身就已处理了回车换行,所以不需要采用本技术特殊处理。

