Ember：如何将TinyMCE textarea字段的值绑定到模型中 [英] Ember: How to valuebind TinyMCE textarea field to model

问题描述

我有一个嵌入在模板中的TinyMCE。现在，我想评估TinyMCE编辑器的内容（实际上是一个textarea）。

请参阅

任何想法如何做？

HTML：

 < script type =text / x-handlebars> 
< h2> Tiny MCE< / h2> 
 {{outlet}} 
< / script> 
 
< script type =text / x-handlebarsdata-template-name =index> 
< form method =postaction =somepage> 
 App.IndexController.bodyText值：< / br> 
 {{bodyText}} 
< / br>< / br> 
 
绑定到Ember.TextField：< br> 
 {{view Ember.TextField valueBinding ='bodyText'}} 
 
< / br>< / br> 
绑定到Ember.TextArea：< / br> 
 {{view Ember.TextArea valueBinding ='bodyText'}} 
 
< / form> 
< / script> 
  

JS：

var $ = $ {
}）;

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
}）;
}
}）;

解决方案

我在你的小提琴中做了一些改变。 >

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

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

并从 IndexView to 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（va略）; 
 this.get（editor）。setContent（content）; 
} .observes（value），
 willClearRender：function（）{
 this.get（editor）。 
} 
}）; 
  

由于TinyMCE改变了textarea并创建了很多元素，所以我观察了TinyMCE中的变化并使用ditor.on（keyup... 。）传播到 TinymceView 。

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/wtktK/10/

When entering text in the textfield, the text in the {{bodyText}} is updated. I would also like to update the text in the TinyMCE textarea ...

Any idea how to do this ?

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

解决方案

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"....

这篇关于Ember：如何将TinyMCE textarea字段的值绑定到模型中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！