Binding Redactor to a property


#1

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.