Javascript 余烬：如何将TinyMCE textarea字段绑定到模型

我在模板中嵌入了一个TinyMCE。现在，我想对TinyMCE编辑器（实际上是一个textarea）的内容进行valuebind

看

在文本字段中输入文本时，{{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>

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

---

我对你的小提琴做了一些改动

看看这里

首先，我从App声明中删除了

var

，成为

App

名称空间的全局名称空间，并在handlebar模板中可见

并将tinymce从

索引视图

替换为

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更改了textarea并创建了很多元素，所以我让那个观察者在TinyMCE中更改并使用ditor.on（“keyup”）将更改传播到

TinymceView

，

…

已经找到了类似的敲除方法：谢谢。看起来非常复杂…很难相信在Ember中，与标准的jquery实现相比，您需要额外的150行（在其中，您只需使用id或css选择器设置并获取textarea的值）.UI框架应该可以简化开发人员的工作，在这种情况下，我的印象是，您确实需要对Ember有深入的了解才能填补空白。哇，将tinyMCE与其他框架集成需要很多代码。我的implemantition只知道keyup上的绑定更改。我想做得更好，但我我对tinymce不太了解。我的代码对你很有用，Marc？它看起来很复杂，我完全同意。在我看来，tinymce更重要的问题是它没有提供与其他库/框架相结合的挂钩。如果tinymce允许你订阅类似

change

的事件，你就可以在闭包中提供对Ember应用程序的引用。Márcio Rodrigues Correa Júnior的响应看起来不错，但它无法解决问题，因为它不支持例如鼠标粘贴或拖放文本。@Márciorodrigues Correajúnior您知道一个类似的组件可以更好地与Ember集成吗？我同意impleme下面显示的提示部分起作用（仅支持键控事件）；因此，当使用工具栏按钮时（例如，将文本设置为标题1-绑定文本字段中不会发生任何事情）…很好的解决方案！只需一句话：绑定应该考虑html代码而不是纯文本。因此，在文本字段中输入XXXX时，TinyMCE应该以h2样式显示（这已经是正确的），但在TinyMCE中更改为h1样式时，TextField中的值应为XXXX。知道如何解决此问题吗？非常感谢。我进行了更新。我从ed.getContent（）中删除了$（）.text（）这将使h1出现。我添加了更改事件，以在用户通过格式->标题->h1更改内容时更新输入。因为这不会触发键控事件。@Marc只是最后一次更新。我添加了一个钩子“willClearRender”，以在视图被破坏时删除编辑器，这对于防止内存泄漏非常重要。注意向你问好！