Question

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

<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，如下所示

<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为空源文件：http://localhost/portal/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js 行：错误控制台中的“1”。我只能在Firefox中看到此错误。

第1步 - 点击标签1

第2步 - 点击标签2

第3步 - 点击标签1

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

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

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

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

感谢任何帮助。在此先感谢!!

Answer 1

如果你正在做任何动态的事情（比如通过javascript在“标签”之间切换）你必须手动添加和删除编辑器，否则你会得到奇怪的结果。我在blog post中更详细地介绍了这一点（我假设你在评论之前没有真正阅读过，并要求我帮助你）但是它的要点是：

使用模式“none”，以便TinyMCE不会自动初始化并接管文本区域。使用“textareas”模式会导致任何隐藏文本区域出现问题，因为它们无法正确初始化。（例如，选项卡2上的那个最初是隐藏的。）
无论何时显示标签（例如在页面加载或切换标签时），都要在文本区域手动初始化TinyMCE编辑器，如下所示：

tinyMCE.execCommand（'mceAddControl'，false，'the_textareas_id_here'）;
在切换到新标签之前，触发当前文本区域的保存（这会将TinyMCE编辑器的内容放回实际表单的文本区域。

tinyMCE.triggerSave（）;
删除当前的TinyMCE实例：

tinyMCE.execCommand（'mceFocus'，false，'the_textareas_id_here'）;
tinyMCE.execCommand（'mceRemoveControl'，false，'the_textareas_id_here'）;
切换到新标签页，然后从步骤1开始重复。

Answer 2

也许这与textarea都有class =“mceEditor”这一事实有关，而你在每种情况下都使用TinyMCE.init和editor_selector：“mceEditor”。也许给每个textarea一个不同的类“mceEditor1”和“mceEditor2”，并相应地设置每个init调用的参数：editor_selector：“mceEditor1”和editor_selector：“mceEditor2”......

Answer 3

这是一个小小的错误。在内部，tinymce代码使用<span id="mce_marker"></span>来记住粘贴时的插入位置。在验证生成的片段时，在粘贴之后，跨度被视为无效并被移除，从而通过移除标记来破坏代码。这个问题将在下一个正式的小版本中修复。这类问题有一些解决方法。一种是添加id和mce-data-type属性添加到spans as valid elements (init setting)。例如：

// The valid_elements option defines which elements will remain in the edited text when the editor saves.
    valid_elements: "@[id|class|title|style]," +
    "a[name|href|target|title]," +
    "#p,-ol,-ul,-li,br,img[src],-sub,-sup,-b,-i,-u" +
    "-span[data-mce-type]",

导航选项卡时tinymce编辑器的问题

3 个答案: