tinymce does not see my textarea inside a backbone.js view

Question

I am having trouble getting TinyMCE v4 to work with backbone.js.

I have a backbone.js view that contains a textarea that I want to use with TinyMCE.

I wrapped the tinymce init function inside a jquery function like this:

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

My view uses a template like this:

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

The textarea is never converted to a tinyMCE instance.

If I take the textarea out of the template, and just dump it into my html page, then it does work.

So the issue seems to be that tinyMCE can't see the textarea even though it's on the page and I can see it using firebug.

I tried putting the tinyMCE init after all my backbone.js calls, but it still doesn't work.

Any tips?

Thanks

Answer 1

selectors will not look into 'script' blocks because codes inside a script block are not DOM elements.

you may wanna render your view first before calling tinyMCE.

eg.

SomeView = Backbone.View.extend({

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

I find it tricky to use tinyMCE within backbone's view just because by default tinymce initialization is global.

to improve performance, try using exact mode and pass IDs as selectors(see tinymce documentation), and always check if a textarea is already initialized before you call init again. (since your view may render more than once)

also, I've tried a different method in the past, which is to init tinymce before everything, then just use tinymce.exeCommand with "mceAddEditor" to add individual ones. the draw back is it's tricky to bind events to the newly added editor.