Ember valueBinding for Redactor WYSIWYG

Question

I use the Redactor WYSIWYG editor, and it allows you to use minimal markup before initializing it as follows:

<textarea id="redactor" name="content"> … </textarea> 

However, upon initialization, Redactor will wrap this textarea following content:

 <div class="redactor_box"> <div class="redactor_ redactor_editor" contenteditable="true" dir="ltr"> … </div> <textarea id="redactor" name="content" style="display: none;"> … </textarea> </div> 

I have currently done this in Ember

Template:

 {{ view App.RedactorView valueBinding='contentAttributes.headerContent' class='header-redactor' name='headerContent' }} 

View the Ember.TextArea extension:

 App.RedactorView = Ember.TextArea.extend({ didInsertElement: function() { $("#"+this.elementId).redactor(); } }); 

It still contains a binding to textarea (now hidden), but now I need to bind the redactor_editor class. How can i do this?

Answer 1

After digging a bit in Redactor code, I found that if your element intended to be an editor is not a textarea element, Redactor will do the opposite and add textarea if your a uses a div instead.

I updated my view and changed it based on the code from Ember.TextArea and Ember.TextSupport so that it gets the correct value, this will probably work fine if you also use an element with contenteditable support.

 App.RedactorView = Ember.View.extend({ 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(); this._updateElementValue(); } }); 

Here's JSBin demonstrating this: http://emberjs.jsbin.com/cefebepa/1/edit

Answer 2

I use Ember + Foundation and the kroofy solution worked like a charm for me.

The contentEditable height was loaded without paddings (missing a paragraph), so ive changed the redactor insertHtml method to update the value.

from

 return $el.innerHTML = value; 

in

 return this.$().redactor('insertHtml', value); 

thanks kroofy.

Answer 3

First, when you want to access the Ember View DOM element, you should use this:

 this.$() 

instead

 $("#"+this.elementId) 

About the problem with Redactor ... I'm not sure how reasonable it is to connect the Ember code with the functionality of the WYSIWYG editor, but if you decide on this, you can do the following:

 App.RedactorView = Ember.TextArea.extend({ didInsertElement: function() { var box = this.$().closest('.' + this.elementId + '_box'); box.find('.' + this.elementId + '_redactor_editor').redactor(); } });