将tinymce应用于动态创建的textarea只需一次

时间:2013-08-22 00:49:24

标签: tinymce tinymce-4

我有一个包含三个水平标签的页面。单击选项卡可动态填充带有表单的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在某个地方绊倒了。任何见解都将受到赞赏。

1 个答案:

答案 0 :(得分: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);

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