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

问题描述

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

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

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

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

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

知道怎么做吗?

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.

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

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

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

并将tinymce 从IndexView 替换为TinymceView，以实现可重用.

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

因为 TinyMCE 更改了文本区域并创建了很多元素，所以我让观察者将 TinyMCE 中的更改传播到 TinymceView，使用 ditor.on("keyup"....

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屋！