I’m using Redactor in my app to edit a text field, I reuse a template to display the redactor editor. I have it bound to a computed property because I could find a way to bind it to the model’ property. The problem I have is that it gets out of sync. It start displaying the correct values, but as I go down the list, redactor stops updating it value.
This is the view that has redactor in it.
App.RedactorView = Ember.View.extend({
templateName: "editor",
tagName: 'div',
init: function() {
this._super();
this.on("focusOut", this, this._elementValueDidChange);
this.on("change", this, this._elementValueDidChange);
this.on("paste", this, this._elementValueDidChange);
this.on("cut", this, this._elementValueDidChange);
this.on("input", this, this._elementValueDidChange);
},
_updateElementValue: Ember.observer(function() {
var $el, value;
value = Ember.get(this, "value");
$el = this.$().context;
if ($el && value !== $el.innerHTML) {
return $el.innerHTML = value;
}
}, "value"),
_elementValueDidChange: function() {
var $el;
$el = this.$().context;
return Ember.set(this, "value", $el.innerHTML);
},
didInsertElement: function() {
this.$().redactor({
focus: true,
buttons: [ 'formatting', 'bold', 'italic', 'deleted', 'unorderedlist', 'orderedlist', 'image', 'alignment'],
plugins: ['imagemanager']
});
this._updateElementValue();
}
});
This is the controller of the template
App.SetupMatterController = Ember.ObjectController.extend({
redactorValue: function () {
return this.get('content.intro');
}.property('content.intro'),
}
And this is how I use it on the template:
<div class="edit-page">
{{view App.RedactorEditorView valueBinding = "redactorValue" }}
</div>
I don’t think using a computed property is the right approach, but I could not get it working otherwise.
Thanks for help.