浏览选项卡时tinymce编辑器的问题

Question

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

<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 上，我有另一个文本区域，如下所示

<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 Line: 1" 在错误控制台中。我只能在 Firefox 中看到此错误。

第 1 步 - 点击标签 1

第 2 步 - 点击标签 2

第 3 步 - 点击标签 1

第 4 步 - 在编辑器中输入一些评论。

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

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

相同的脚本在 IE6、Safari 中运行良好，但在 Firefox 3.6 中却不行。

感谢任何帮助。提前致谢！！

Answer 1

也许这与两个文本区域都有 class="mceEditor" 并且您在每种情况下都使用 TinyMCE.init 和 editor_selector :"mceEditor" 的事实有关。也许给每个文本区域一个不同的类“mceEditor1”和“mceEditor2”，并相应地为每个初始化调用设置参数： editor_selector :"mceEditor1" and editor_selector :"mceEditor2" ...

Answer 2

如果您正在使用 TinyMCE 执行任何动态操作（例如通过 javascript 在“选项卡”之间切换），您必须手动添加和删除编辑器，否则您会得到奇怪的结果。我在blog post 中更详细地介绍了这一点（我假设你在评论它并要求我帮助你之前没有真正阅读过它）但它的要点是这样的：

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

2. 任何时候显示选项卡（例如在页面加载或切换选项卡时），手动初始化文本区域上的 TinyMCE 编辑器，如下所示：

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

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

   tinyMCE.triggerSave();

4. 移除当前的 TinyMCE 实例：

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

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

Answer 3

这是一个 tinymce 错误。在内部，tinymce 代码使用<span id="mce_marker"></span> 来记住粘贴时的插入符号位置。在验证生成的片段时，粘贴后，跨度被视为无效并被删除，从而通过删除标记来破坏代码。 此问题将在下一个官方 tinymce 次要版本中修复。此类问题有一些解决方法。一种是将id和mce-data-type属性添加到spansas 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]",

Answer 4

我在论坛上没有尝试过好几天的方法，但就我而言，它们都没有奏效。

所以我选择解决...

<script type="text/javascript">
    (function() {
        if (window.localStorage) {
            if (!localStorage.getItem('firstLoad')) {
                localStorage['firstLoad'] = true;
                window.location.reload();
            } else
                localStorage.removeItem('firstLoad');
        }
    })();

    tinymce.init({
    ...
</script>