Html mode button.

Support a toggle for moving between html & WYSIWYG content.

0.1.1 Release

addon/action-text-html-toggler.js

@@ -0,0 +1,36 @@
+import Em from 'ember';
+import WithConfigMixin from 'ember-idx-utils/mixin/with-config';
+var computed = Em.computed;
+
+export default Em.Component.extend(WithConfigMixin, {
+  tagName: 'a',
+  layoutName: 'components/em-wysiwyg-action',
+  classNameBindings: ['styleClasses', 'activeClasses'],
+  wysiwyg: computed.alias('parentView.wysiwyg'),
+  editor: computed.alias('wysiwyg.editor'),
+  //When active, we'r in textarea mode
+  active: false,
+  styleClasses: (function() {
+    var _ref;
+    return (_ref = this.get('config.wysiwyg.actionClasses')) != null ? _ref.join(" ") : void 0;
+  }).property(),
+  activeClasses: (function() {
+    var _ref;
+    if (this.get('active')) {
+      return (_ref = this.get('config.wysiwyg.actionActiveClasses')) != null ? _ref.join(" ") : void 0;
+    }
+  }).property('active'),
+  click: function() {
+    if (this.get('active')) {
+      this.set('active', false);
+      this.set('wysiwyg.editor.display', 'block');
+      this.set('wysiwyg.editor-textarea.display', 'none');
+      //Copy the content of as_html into data
+      this.get('editor').$().html(this.get('wysiwyg.as_html'));
+    } else {
+      this.set('active', true);
+      this.set('wysiwyg.editor.display', 'none');
+      this.set('wysiwyg.editor-textarea.display', 'block');
+    }
+  }
+});

addon/editor-textarea.js

@@ -0,0 +1,15 @@
+import Em from 'ember';
+var computed = Em.computed;
+import StyleBindingsMixin from 'ember-idx-utils/mixin/style-bindings';
+
+export default Em.TextArea.extend(StyleBindingsMixin, {
+    styleBindings: ['display', 'width', 'border'],
+    width: '100%',
+    border: 'none;',
+    wysiwyg: computed.alias('parentView'),
+    value: computed.alias('wysiwyg.as_html'),
+    display: 'none',
+    registerInParent: (function() {
+        this.set('parentView.editor-textarea', this);
+    }).on('init')
+});

addon/editor.js

@@ -2,11 +2,12 @@ import Em from 'ember';
 import StyleBindingsMixin from 'ember-idx-utils/mixin/style-bindings';
 
 export default Em.Component.extend(StyleBindingsMixin, {
-  styleBindings: ['marginTop:margin-top', 'background'],
+  styleBindings: ['marginTop:margin-top', 'background', 'display'],
   attributeBindings: ['contenteditable'],
   contenteditable: 'true',
   marginTop: 10,
   background: 'white',
+  display: 'block',
   wysiwyg: Em.computed.alias('parentView'),
   updateToolbar: function(e) {
     return this.get('wysiwyg').trigger('update_actions');

app/components/em-wysiwyg-action-text-html-toggler.js

@@ -0,0 +1,2 @@
+import WysiwygActionTextHtmlToggler from 'ember-idx-wysiwyg/action-text-html-toggler';
+export default WysiwygActionTextHtmlToggler;

app/components/em-wysiwyg-editor-textarea.js

@@ -0,0 +1,2 @@
+import WysiwygEditorAreaComponent from 'ember-idx-wysiwyg/editor-textarea';
+export default WysiwygEditorAreaComponent;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-idx-wysiwyg",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "directories": {
     "doc": "doc",
     "test": "tests"

tests/dummy/app/controllers/simple.js

@@ -0,0 +1,5 @@
+import Em from 'ember';
+
+export default Em.Controller.extend({
+
+});

tests/dummy/app/templates/simple.hbs

@@ -10,6 +10,7 @@
             {{em-wysiwyg-action command="strikethrough" title="Strikethrough" icon="fa fa-strikethrough"}}
             {{em-wysiwyg-action command="underline" title="Underline (Ctrl/Cmd+U)" icon="fa fa-underline"}}
             {{em-wysiwyg-action-format icon="fa fa-text-height"}}
+            {{em-wysiwyg-action-text-html-toggler icon="fa fa-code"}}
         {{/em-wysiwyg-action-group}}
         {{#em-wysiwyg-action-group}}
             {{em-wysiwyg-action command="justifyleft" title="Align Left (Ctrl/Cmd+L)" icon="fa fa-align-left"}}
@@ -26,6 +27,7 @@
         {{/em-wysiwyg-action-group}}
     {{/em-wysiwyg-toolbar}}
     {{em-wysiwyg-editor}}
+    {{em-wysiwyg-editor-textarea}}
 {{/em-wysiwyg}}
 
 <h2>Markup</h2>