0

我有一个包含三个水平选项卡的页面。单击选项卡会使用表单动态填充 div。我正在使用 BackboneJS 来管理视图的渲染（不确定是否相关）。当我在视图上调用 render() 时，在填充元素的 html 后，我调用了将 tinyMCE 应用于文本区域：

$('#text_' + this.model.id, this.$el).tinymce({
                script_url : '/lib/tinymce/tinymce.min.js',
                theme : "modern",
                content_css: "/css/bootstrap.min.css",
                menubar: false,
                toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | " +
                    "bullist numlist outdent indent | link image |  forecolor backcolor emoticons",

                setup: function(editor) {
                    editor.on('change', function(e) {
                        var change = {};
                        change["content"] = e.level.content;
                        self.model.set(change);

                    });
                }
            });

这在第一次运行时效果很好。当视图被删除时，会调用一个事件，该事件适用.tinymce().remove();于在显示下一个视图之前正确删除编辑器的字段。下一个视图呈现 - 它是相同的视图，但模型不同。在此以及所有后续调用中，tinyMCE 隐藏了 textarea，并且不显示编辑器。我知道我的观点有效——在 render() 中注释掉 .tinymce() 调用可以让一切按预期工作。TinyMCE 在某个地方跌跌撞撞。任何见解将不胜感激。

4

1 回答 1

0

我不是 100% 清楚在.tinymce().remove();做什么，但你有没有试过这个：

tinymce.triggerSave();
tinymce.execCommand('mceRemoveEditor', true, tinymce.activeEditor.id);

当您切换到下一个视图时，请尝试通过以下方式重新附加编辑器：

tinymce.execCommand('mceAddEditor', false, selector);

如果这不起作用或不适用于您正在做的事情。您是否考虑过拥有超过 1 个 tinyMCE 编辑器？听起来您有一定数量的选项卡，因此您可以为每个选项卡创建一个单独的 tinyMCE，并根据需要在每个选项卡上简单地隐藏/显示编辑器：

tinymce.execCommand('mceToggleEditor', false, selector);

这种方法被认为比添加/删除编辑器快得多。

于 2013-12-24T17:46:06.157 回答