我正在制作一个包含富文本的表单。我有 TinyMCE,Backbone 控制逻辑,下划线用于模板。
我找不到是否有办法将 Backbone 模型绑定(bind)到 TinyMCE 值?
类似于:
var backboneModel = new BackBobeModel();
tinymce.init({
selector:'#rich-text',
'data-object': backboneModel.richText
});
最佳答案
据我所知,TinyMCE 不会自动与 Backbone 绑定(bind)。所以我做了一个简单的可重复使用的TextArea
组件。
它是由初始化其自己的根的 Backbone View 制成的 <textarea>
元素作为 TinyMCE 实例并将自身绑定(bind)到其 Change
事件。
TinyMCE 主干组件
var TextArea = Backbone.View.extend({
tagName: 'textarea',
initialize: function(options) {
// set the default options
options = this.options = _.extend({
attribute: 'value',
format: 'raw'
}, options);
// initialize a default model if not provided
if (!this.model) this.model = new Backbone.Model();
if (!this.getValue()) this.setValue('');
this.listenTo(this.model, 'change:' + options.attribute, this.onModelChange);
},
render: function() {
this.$el.html(this.getValue());
tinymce.init({
target: this.el,
init_instance_callback: this.onEditorInit.bind(this)
});
return this;
},
// simple accessors
getValue: function() {
return this.model.get(this.options.attribute) || '';
},
setValue: function(value, options) {
return this.model.set(this.options.attribute, value, options);
},
// event handlers
onEditorInit: function(editor) {
editor.on('Change', this.onTextChange.bind(this));
this.editor = editor;
},
onTextChange: function(e) {
this.setValue(this.editor.getContent());
},
onModelChange: function(model, value, options) {
if (!this.editor) return;
this.editor.setContent(value, { format: this.options.format });
}
});
按原样使用
您可以在没有模型的情况下使用它,它会创建自己的模型来跟踪数据。
var component = new TextArea({ content: "initial content" });
可以检索数据,甚至可以监听组件的模型。
component.getValue();
// or use events:
Backbone.listenTo(component.model, 'change:value', function(model, value, options) {
// use the new value
});
将其与自定义模型一起使用
假设您有一个具有任意属性的自定义模型。
var car = new CarModel({
make: "mazda",
description: "This is a car"
// ...
});
只需将其传递给组件,定义它应该使用哪个属性来更新模型。
var component = new TextArea({
model: car,
//
attribute: 'description'
});
相同的初始模型实例 description
现在,只要用户在 TinyMCE 框中键入内容,属性就会自动更新。
Backbone.listenTo(car , 'change:description', function(model, value, options) {
console.log("Car description changed:", value);
});
关于javascript - 将 Backbone Model 属性绑定(bind)到 TinyMCE 文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43635512/