javascript - Ember : How to valuebind TinyMCE textarea field to model

Question

我在模板中嵌入了 TinyMCE。现在，我想对 TinyMCE 编辑器的内容进行值绑定(bind)(实际上是一个文本区域)。

参见 http://jsfiddle.net/cyclomarc/wtktK/10/

在文本字段中输入文本时，{{bodyText}} 中的文本会更新。我还想更新 TinyMCE 文本区域中的文本 ...

知道怎么做吗？

HTML:

<script type="text/x-handlebars">
    <h2>Tiny MCE</h2>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="index">
        <form method="post" action="somepage">
            App.IndexController.bodyText value:</br>
            {{bodyText}}
            </br></br>

            Bound to Ember.TextField:<br>
            {{view Ember.TextField valueBinding='bodyText'}}

            </br></br>
            Bound to Ember.TextArea:</br>
            {{view Ember.TextArea valueBinding='bodyText'}}

        </form>
</script>

JS:

var App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

App.Router.map(function () {});

App.IndexRoute = Ember.Route.extend({ });

App.IndexController = Ember.Controller.extend({
    bodyText: '...' 
});

App.IndexView = Ember.View.extend({
    didInsertElement: function(){
        tinymce.init({
            selector: "textarea"
        });
    }
});

Answer 1

我对你的 fiddle 做了一些改动。

看这里http://jsfiddle.net/Jw75L/26/

首先，我从 App 声明中删除了 var，使其成为全局的 App 命名空间，并在 handlebars 模板中可见。

并将 tinymce 从 IndexView 替换为 TinymceView，以便可重用。

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();
    }
});

因为 TinyMCE 改变了文本区域并创建了很多元素，我让那个观察者改变了 TinyMCE 并传播到 TinymceView，使用 ditor.on("keyup".. ..