2007年06月29日

FCKeditor在隐藏层中的问题

作者 非鱼

最近发表文章的部分一直有个很奇怪的现象。论坛的发表文章分成几种类型,普通贴、金币贴、回复可见贴等等,有几种类型选择以后需要输入被隐藏的内容,这一部分是在一个单独的输入框里面的。因此,在这一个页面上就放了两个Textarea,用两个FCKeditor实例来替换。下面的一个是放在隐藏层里的,点击那几个类别的时候,才把这个层显示出来。结果就出现了很奇怪的问题。

第一、Firefox用户在第二个编辑器里面无法点击进去,也就是根本无法把光标置于这个编辑器内,无法输入文字。后来发现点击源代码按钮两次切换一下就好了。到网上搜索了一下,有不少有这个问题,但是似乎是比较早的版本的问题,新的应该已经没有问题了,而且有人提供了修改方案也没有作用。第二,在IE下第二个编辑器是可以输入的,但是这个编辑器刚显示出来的时候高度是预设的400,只要用鼠标在里面一点,高度立马缩小成只有一行,但是随着内容的输入,编辑器可以自动扩展,删除内容的时候,又会缩小成只有一行。(在Firefox下也会缩小成一行)

研究了很长时间,终于找到问题的源头,就是这个隐藏层的问题。如果把这个编辑器设成默认显示的话,这两个问题就都不存在了。那么剩下的问题就是何时隐藏何时显示了。试了一下在编辑器ReplaceTextarea() 的函数之后再把层隐藏起来,没有效果。似乎这个函数执行的过程比较慢,而浏览器并不等待它执行完毕,直接就调用了后面的隐藏过程,所以,在页面显示的时候,是看不到第二个编辑器的渲染过程的。再想了一下,似乎只有一个办法了,就是在层显示出来之前,不去替换编辑器,当使层显示出来的时候,再调用ReplaceTextarea() 函数。

最终测试下来效果良好,总算解决了这个问题。具体方法,把第二个编辑器的初始化代码移到一个单独的函数中,在调用第二个编辑器所在层的show()方法以后,再调用这个初始化函数。为了避免多次初始化编辑器,设一个全局变量用来标识是否已经初始化过。