Merge pull request #4 from briangershon/clear-formatting

Add a new feature (with toolbar button) for removing all formatting from a selected range.

scripts/etch.js

@@ -11,7 +11,7 @@
     // in the markup as "data-button-class"
     etch.buttonClasses = {
         'default': ['save'],
-        'all': ['bold', 'italic', 'underline', 'unordered-list', 'ordered-list', 'link', 'save'],
+        'all': ['bold', 'italic', 'underline', 'unordered-list', 'ordered-list', 'link', 'save', 'clear-formatting'],
         'title': ['bold', 'italic', 'underline', 'save']
     }
 
@@ -43,7 +43,8 @@
             'click .etch-ordered-list': 'toggleOrderedList',
             'click .etch-link': 'toggleLink',
             'click .etch-image': 'getImage',
-            'click .etch-save': 'save'
+            'click .etch-save': 'save',
+            'click .etch-clear-formatting': 'clearFormatting'
         },
 
         changeEditable: function() {
@@ -88,6 +89,11 @@
             range.surroundContents(el);
         },
 
+        clearFormatting: function(e) {
+          e.preventDefault();
+          document.execCommand('removeFormat', false, null);
+        },
+
         toggleBold: function(e) {
             e.preventDefault();
             document.execCommand('bold', false, null);

styles/etch.css

@@ -35,5 +35,5 @@
 .etch-editor-panel .etch-justify-right span { background-position: -300px 0; }
 .etch-editor-panel .etch-cite span { background-position: -330px 0; }
 .etch-editor-panel .etch-heading span { background-position: -360px 0; }
-
+.etch-editor-panel .etch-clear-formatting span { background-position: -390px 0; }