Some updates

README.md

@@ -1,4 +1,3 @@
-
 Angular WYSIWYG directive.
 ===========================
 
@@ -58,7 +57,9 @@ Option|Description
 **textarea-name**	 |			The name attribute of the editable div 
 **textarea-required**|			True/False HTML/AngularJS required validation
 **enable-bootstrap-title**|		True/False whether or not to show the button hover title styled with bootstrap	
-**textarea-menu**    |          Cusomize the wysiwyg buttons and button groups ***See Below** If nothing is specified then the default buttons and groups will be shown.
+**textarea-menu**    |          Customize the wysiwyg buttons and button groups ***See Below** If nothing is specified then the default buttons and groups will be shows.
+**textarea-custom-menu** | Create a customized menu
+**textarea-custom-functions** | Allow add your custom function to your custom element
 **disabled**  |          Disable the buttons and wysiwig area 
 
 Buttons
@@ -115,7 +116,70 @@ quote |
 link |
 image |
 
+Custom elements
+--------------
 
+You can add you own button or select element
 
-
+````html
+<wysiwyg textarea-id="question" textarea-class="form-control"  textarea-height="80px" textarea-name="textareaQuestion" textarea-required ng-model="yourModel.model" enable-bootstrap-title="true" textarea-menu="yourModel.menu" textarea-custom-menu="yourModel.customMenu" textarea-custom-functions="yourModel.customFunctions"></wysiwyg>
+```
+```javascript
+var insertVariables = {
+      '0': 'Choose one',
+      'a': 'Insert a',
+      'b': 'Insert b'
+    };
+    var insertOptions = [];
+    for (var i in insertVariables) {
+      insertOptions.push({
+        tag: 'option',
+        attributes: [{
+          name: 'value',
+          value: i
+        }],
+        text: insertVariables[i]
+      });
+    }
+    $scope.yourModel = {};
+    $scope.yourModel.customMenu = {
+      'myInsertElement': {
+        tag: 'select',
+        classes: 'form-control wysiwyg-select',
+        attributes: [{
+          name: 'ng-model',
+          value: 'myInsertElement'
+        }, {
+          name: 'ng-init',
+          value: 'myInsertElement = "0"'
+        }, {
+          name: 'ng-change',
+          value: 'chInsert(this)'
+        }],
+        data: insertOptions,
+      },
+    };
+
+    $scope.yourModel.customFunctions = {
+      chInsert: function(scope) {
+        if (scope.myInsertElement != '0') {
+          document.execCommand("insertHTML", false, scope.myInsertElement);
+          scope.myInsertElement = '0';
+        }
+      }
+    };
+    $scope.yourModel.menu = [
+      ['bold', 'italic', 'underline', 'strikethrough', 'subscript', 'superscript'],
+      ['format-block'],
+      ['font'],
+      ['font-size'],
+      ['font-color', 'hilite-color'],
+      ['remove-format'],
+      ['ordered-list', 'unordered-list', 'outdent', 'indent'],
+      ['left-justify', 'center-justify', 'right-justify'],
+      ['code', 'quote', 'paragraph'],
+      ['link', 'image'],
+      ['myInsertElement']
+    ];
+```
 

bower.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "angular": ">= 1.0.0",
     "angular-bootstrap-colorpicker": ">= 3.0.0",
-    "jquery": "~2.1.3"
+    "jquery": "~2.1.3",
+    "flickrapi": "0.3.36"
   }
 }

demo/index.html

@@ -16,6 +16,12 @@
       .test1{
         font-size:1.8em;
       }
+
+      #question{
+        font-family: Lucida Console;
+        font-size: 24px;
+        color: lightgrey;
+      }
     </style>
   </head>
 

demo/scripts/app.js

@@ -15,8 +15,7 @@ app.controller('MyCtrl', function($scope) {
         ['ordered-list', 'unordered-list', 'outdent', 'indent'],
         ['left-justify', 'center-justify', 'right-justify'],
         ['code', 'quote', 'paragraph'],
-        ['link', 'image'],
-        ['css-class']
+        ['link', 'image']
     ];
 
     $scope.cssClasses = ['test1', 'test2'];