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