Ember: How to valuebind TinyMCE textarea field to model

Question

I have a TinyMCE embedded in a template. Now, I want to valuebind the content of the TinyMCE editor (which is in fact a textarea).

See http://jsfiddle.net/cyclomarc

Answer 1

I made some changes in your fiddle.

Give a look here http://jsfiddle.net/Jw75L/26/

First I removed the var from App declaration, to become the App namespace global and visible in handlebars template.

And replaced the tinymce from IndexView to TinymceView, to be reusable.

App.TinymceView = Ember.TextArea.extend({
    editor: null,
    _suspendValueChange: false,
    didInsertElement: function(){
        var id = "#" + this.get("elementId");        
        var view = this;
        tinymce.init({
            selector: id,
            setup : function(ed) {                
                view.set("editor", ed);
                ed.on("keyup change", function() {
                    view.suspendValueChange(function() {
                        view.set("value", ed.getContent());
                    });
                });
           }
        });
    },
    suspendValueChange: function(cb) {
        this._suspendValueChange = true;
        cb();
        this._suspendValueChange = false;
    },
    valueChanged: function() {
        if (this._suspendValueChange) { return; }
        var content = this.get("value");
        this.get("editor").setContent(content);
    }.observes("value"),
    willClearRender: function() {        
        this.get("editor").remove();
    }
});

Because TinyMCE changes the textarea and create a lot of elements, I had that observer the change in the TinyMCE and propagate to the TinymceView, using ditor.on("keyup"....