tinymce 在backbone.js 视图中看不到我的textarea

Question

我无法让 TinyMCE v4 与backbone.js 一起使用。

我有一个包含我想与 TinyMCE 一起使用的文本区域的主干.js 视图。

我将 tinymce init 函数包装在一个 jquery 函数中，如下所示：

$(function () {
    tinymce.init({selector:'textarea'});
)};

我的视图使用这样的模板：

<script type="text/template" id="tn-template">
    <textarea> </textarea>
</script>

textarea 永远不会转换为 tinyMCE 实例。

如果我将 textarea 从模板中取出，然后将其转储到我的 html 页面中，那么它确实可以工作。

所以问题似乎是 tinyMCE 看不到 textarea，即使它在页面上，我可以使用 firebug 看到它。

我尝试在我的所有主干.js 调用之后放置 tinyMCE 初始化，但它仍然不起作用。

有什么建议吗？

谢谢

Answer 1

选择器不会查看“脚本”块，因为脚本块内的代码不是 DOM 元素。

你可能想在调用 tinyMCE 之前先渲染你的视图。

例如。

SomeView = Backbone.View.extend({

    render: function () {
        this.$el.html(this.template({
            //template args
        }));
        tinymce.init({selector:'textarea'});
    }
});

我发现在主干视图中使用 tinyMCE 很棘手，因为默认情况下，tinymce 初始化是全局的。

为了提高性能，请尝试使用精确模式并将 ID 作为选择器传递（请参阅 tinymce 文档），并在再次调用 init 之前始终检查 textarea 是否已经初始化。 （因为您的视图可能会多次渲染）

另外，我过去尝试过一种不同的方法，即在一切之前初始化 tinymce，然后只需使用 tinymce.exeCommand 和“mceAddEditor”来添加单个的。缺点是将事件绑定到新添加的编辑器很棘手。