导航选项卡时tinymce编辑器的问题 [英] problem with tinymce editor when navigating through tabs

问题描述

我在我的应用程序中使用tinymce来显示tinymce编辑器代替textarea。在JSP中我有两个选项卡，都包含tinymce文本编辑器。在标签1中，我有以下代码段

I am using tinymce in my application to show the tinymce Editor in place of the textarea. In the JSP I have two tabs and both contains the tinymce text editor. In tab 1 I have below snippet

<form:textarea path="msgToIS" class="mceEditor" rows="4" cols="175"/>
...
...
<script type="text/javascript" >
tinyMCE.init({
            mode : "textareas", 
            theme : "advanced",
            plugins : "pagebreak,style,layer,table,save,advhr,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
            editor_selector :"mceEditor",
            skin : "o2k7",
            skin_variant : "silver"
         });
</script>

在标签2上我有另一个textarea，如下所示

On tab 2 I have another textarea as below

<form:textarea path="comment" class="mceEditor" rows="4" cols="175"/>
...
...
<script type="text/javascript" >
    tinyMCE.init({
                mode : "textareas",
                theme : "advanced",
                plugins : "pagebreak,style,layer,table,save,advhr,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template",
                editor_selector :"mceEditor",
                skin : "o2k7",
                skin_variant : "silver"
             });
    </script>

问题 - 当我按照以下步骤操作时出现错误错误：j为null
源文件： http：// localhost / portal / javascript / tinymce / jscripts / tiny_mce / tiny_mce.js
行：错误控制台中的1。我只能在Firefox中看到此错误。

Issue - When I follow below steps I am getting error "Error: j is null Source File: http://localhost/portal/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js Line: 1" in the error console. I can see this error only in Firefox.

第1步 - 点击标签1

step 1 - Click on tab 1

第2步 - 点击在选项卡2上

Step 2 - Click on tab 2

步骤3 - 单击选项卡1

Step 3 - Click on tab 1

步骤4 - 在编辑器中输入一些注释。

Step 4 - Enter some comment in the editor.

第5步 - 提交页面。当我尝试使用tinyMCE.get（'msgToIS'）访问编辑器值时提交.getContent（）我遇到了错误。

Step 5 - submit the page. On submit when I try to access editor value using "tinyMCE.get('msgToIS').getContent()" I am getting above error.

然而，当我点击选项卡1而不访问选项卡2并提交页面时我不会收到任何错误，事实上我得到了正确的编辑器内容。

However When I just click on the tab 1 without visiting tab 2 and submit the page I wont get any error, infact I get correct editor content.

相同的脚本在IE6，Safari中正常工作，但在Firefox 3.6中没有。

The same script is working fine in IE6, Safari but not in Firefox 3.6.

任何帮助表示赞赏。在此先感谢!!

Any help is appreciated. Thanks in advance!!

推荐答案

如果你正在做任何动态的事情（比如通过javascript切换标签）和TinyMCE你必须手动添加和删除编辑器，否则会得到奇怪的结果。我在博客文章（我假设你在评论之前没有真正阅读并要求我帮助你）但其中的要点是：

If you're doing anything dynamic (like switching between "tabs" via javascript) with TinyMCE you have to add and remove the editors manually or you will get strange results. I cover this in more detail in my blog post (which I'm assuming you didn't actually read before commenting on it and asking for me to help you with this) but the gist of it is this:

1. 使用模式none，以便TinyMCE不会自动初始化并接管文本区域。使用textareas模式会导致任何隐藏文本区域出现问题，因为它们无法正确初始化。 （例如，选项卡2上的那个最初是隐藏的。）

1. Use mode "none" so that TinyMCE doesn't automatically init and take over text areas. Using mode "textareas" will cause issues for any hidden text areas since they won't be properly initialized. (For example, the one on tab 2 is initially hidden.)

任何时候显示一个标签（例如在页面加载或切换标签时），手动在文本区域初始化TinyMCE编辑器，如下所示：

Anytime a tab is shown (like say at page load or when switching tabs), manually initialize the TinyMCE editor on the text area like so:

tinyMCE.execCommand（'mceAddControl'，false，'the_textareas_id_here'）;

tinyMCE.execCommand('mceAddControl', false, 'the_textareas_id_here');

在切换到新选项卡之前，触发当前文本区域的保存（这会将TinyMCE编辑器的内容放回实际表单的文本区域。

Before switching to a new tab, trigger a save on the current text area (this will put the contents of the TinyMCE editor back into the actual form's text area.

tinyMCE.triggerSave（）;

tinyMCE.triggerSave();

删除当前的TinyMCE实例：

Remove the current TinyMCE instance:

tinyMCE.execCommand（'mceFocus'，false，'the_textareas_id_here'）;

tinyMCE.execCommand（'mceRemoveControl'，false，'the_textareas_id_here'）;

tinyMCE.execCommand('mceFocus', false, 'the_textareas_id_here');
tinyMCE.execCommand('mceRemoveControl', false, 'the_textareas_id_here');

切换到新标签页并从步骤1开始重复。

Switch to the new tab and repeat from step 1.

这篇关于导航选项卡时tinymce编辑器的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！