FCKeditor的换行问题。

Gdj 2006-11-03 11:15:11
FCKeditor在ie下使用,按回车换行是用<p>,在ff下使用是用<br>。如何能让它们统一使用<br>换行?

即希望在ie下按回车的效果等同于ctrl+回车
...全文
670 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
Gdj 2006-11-06
  • 打赏
  • 举报
回复
周一,顶起。
ccxxcc 2006-11-03
  • 打赏
  • 举报
回复
要改fck可是件麻烦事,因为找对应的代码要好久

这个功能我们项目中自己写的在线编辑器已经实现,不过因为是别的同事写的 不好直接贴代码
自己来看看
http://blog.xoyo.com

如果认为我在做广告 就不要打开那个网址了
我的 msn
meng.chao@163.com
Gdj 2006-11-03
  • 打赏
  • 举报
回复
不能用这种办法。我希望的是dz5那样的。按回车单换行,但是<li>里面按回车会到下一个<li>而不是当前的li换行。
Gdj 2006-11-03
  • 打赏
  • 举报
回复
这个我现在就是这样做的,但不完善。你可以试一下,如果这样做的话,对方如果用了<li>之类的,那就无法换行了- -o
ccxxcc 2006-11-03
  • 打赏
  • 举报
回复
刚好刚才偶然把他思路的发在phpx 帮转

原地址:http://www.phpx.com/happy/viewthread.php?tid=127116

完美实现HTML在线编辑器回车单换行

在网上搜过关于这方面的内容,但都没有一个比较好的解决办法。以下我介绍的方法已经实际应用在blog.xoyo.com中,大家有兴趣的可以去实际体验一下,有问题也可以在我的blog上留言(http://blog.xoyo.com/ouran),作为系统的开发人员,我是很欢迎大家来使用逍遥的博客系统的。

一般的HTML在线编辑器在回车换行时都会生成一对p标签,这在页面上看来就是换了两行,因为P标签是段落标签。
为了实现跟普通的文本表单一样的效果,像网易的邮箱,sina的博客采用了一种方法来实现换单行。即在页面中初始加上一对或多对div标签。但这种方法有局限性,那就是在用户全选编辑器里所写的内容后,再删除掉内容,此时又会出现p标签,此时再按回车,又会变成换双行。
还有另外一种处理方法,那就是获取按键并在页面上插入br标签,但是单纯的插入br并不能换行,因为编辑器不能即时在页面上输出这个换行,所以很多人采用的方法是插入<br><!-- -->。这样插入一个不可见字符后,的确是实现了换行,但是页面上多出了很多<br><!-- -->,这部分垃圾代码必须要在最后过滤掉才能进一步处理,影响录入效率。
google采用了另一种思路,它用样式来控制P标签,使得P的输入就跟换单行一样,但这也会有额外的样式代码生成。

我采用的办法很直接,就是要在回车时插入一个<br>并把光标定位到换行处。
实现时同样也是获取回车键并插入<br>,此时,我并不在其后插入<!-- -->,而是采用了移动光标的方法,代码如下:

// 判断浏览器类型,绑定事件
if (isMSIE)
{
editor.document.onkeypress=insertBr;
}

实现换行的代码如下:
// 本代码仅为代码片段,全文内容请参考逍遥博客的编辑器代码
function insertBr(e)
{
e = g_editor.event;
if(e.keyCode==13)
{
insertHTML("<br>");

// 工作代码
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下由于其本身就已处理了回车换行,所以不需要采用本技术特殊处理。
yiyioo 2006-11-03
  • 打赏
  • 举报
回复
感觉这个应该是ie和ff的区别吧
在ie的iframe编辑器里,似乎回车就是<P>
Shift + 回车是 <br>

可以试着找一下keypress事件,如果是回车就输出<br>
我也没找过
Gdj 2006-11-03
  • 打赏
  • 举报
回复
说一下原理就行了。dz5也实现了。但看源码需要太多时间。
此文档的目录结构: 1 FCKeditor的下载及介绍 4 1.1 下载地址 4 1.2 FCKeditor下载包的介绍 4 2 FCKeditor的目录和文件精简 4 3 在页面创建FCKeditor 4 3.1 Js创建FCKeditor实例: 4 3.1.1 方法一:内嵌方法(推荐) 4 3.1.2 方法二:替换页面中的Textarea 5 3.1.3 方法三:适合于Ajax的调用方法 6 3.1.4 Js中FCKeditor对象的属性(集合)和方法 6 3.1.4.1 属性 6 3.1.4.2 集合 7 3.1.4.3 方法 7 3.1.5 FCKeditor的JS构造器 9 3.1.6 将从后台读取的数据显示在FCKeditor中 9 3.2 在Jsp中通过自定义标签创建: 9 3.3 FCKeditor API 调用 10 3.4 适时打开编辑器 10 4 修改FCKeditor的配置: 11 4.1 方法一:修改fckconfig.js 文件 11 4.2 方法二:使用一个额外的配置文件覆盖默认配置 11 4.3 配置的加载顺序 11 4.4 提示 11 4.5 一般需要修改的配置项 11 4.5.1 默认语言 11 4.5.2 自定义ToolbarSet, 去掉一些不需要的功能 12 4.5.3 加上几种常用的字体 13 4.5.4 修改“回车” 和 “Shift + 回车”的换行行为 13 4.5.5 修改编辑区的样式文件 14 4.5.6 更换表情图片 14 4.5.7 编辑区域的右键菜单功能 14 4.6 fckconfig.js配置参数选项说明 15 4.7 自定义工具栏按钮 17 4.8 自定义右键菜单 18 5 文件上传问题 19 5.1 开启和关闭文件上传功能(fckconfig.js) 19 5.2 文件上传的基本使用 19 5.3 上传中文文件名的文件会出现乱码 20 5.4 创建中文名目录会出现乱码 21 5.5 引用中文名文件的图片不能正常显示 21 5.6 控件允许上传的文件的类型 22 5.7 控制上传的文件的大小 22 5.8 增加文件删除功能 23 6 超连接重定位问题 25 7 使用FCKeditor的API 26 7.1 获得FCKeditor的实例 26 7.1.1 获得当前页FCKeditor实例 26 7.1.2 从FCKeditor的弹出窗口中获得FCKeditor实例 26 7.1.3 从框架页面的子框架中获得其它子框架的FCKeditor实例 26 7.1.4 从页面弹出窗口中获得父窗口的FCKeditor实例 26 7.2 常见的Js方法调用 27 7.2.1 插入HTML到FCKeditor 27 7.2.2 设置FCKeditor的内容(HTML) 27 7.2.3 获取FCKeditor中的XHTML 27 7.2.4 获取FCKeditor中的innerHTML和innerText 27 7.2.5 执行指定动作 28 7.2.6 统计编辑器中内容的字数 29 7.2.7 检查FCKeditor中的内容是否有改动 29 7.2.8 将FCKeditor中的内容是否有改动的值重新设置 29 8 外联编辑条(多个编辑域共用一个编辑条) 29 9 解释fck样式(CSS)的工作原理 30 10 获取FCKeditor中插入的图片 31

87,995

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧