联系
Knight's Tale » 技术

解决Tinymce在chrome中focus问题

2013-02-04 0:01

今天发布了ECV5的一个新版本,修复了按了回复主题按钮时,在Chrome下无反应的问题。

问题原因:

网站使用tinymce, 想要使用JS代码focus tinymce的编辑框,代码为

tinyMCE.activeEditor.focus();

上面的代码在IE下可以正常被FOCUS,但是在FIREFOX和CHROME下都出现不同程度的问题,不管怎样,一直无法被聚集。特别是CHROME,完全没有响应。虽然可以使用先销毁TINYMCE实例再重建其实例的方法来解决FIREFOX的问题,但是还是无法解决CHROME的问题。

解决方法:

在GOOGLE上搜索了近两天,还是无果,Tinymce官方论坛也是没有任何解决方案。

但是我想出了另外一种Hack的方法。既然我们无法focus编辑器,那我们可以让视图自动滚动到编辑器的窗口来实现类似Focus的效果。实现步骤为:

1.首先在编辑框的旁边加入一个没有大小的div框

<div id="reply_textarea_id" style="height:0px;"></div>

其中,reply_textarea_id为自已定义的一个ID号,大家可以自己进行修改名字。以下均假设以reply_textarea_id 来进行操作。

2.然后,我们增加以下JS代码:

function move_to_reply_textarea() {
document.getElementById( 'reply_textarea_id' ).scrollIntoView();
}

上面添加了JS函数后,我们在将要被触发的JS代码里调用它。

经过上面两个步骤,就可以使用在任何平台里,实现Tinymce的focus聚集功能了。