Merge pull request #5 from wesleycho/master

Updated plugin for TinyMCE 3

Author: ProLoser

README.md

@@ -1,98 +1,74 @@
-# ui-date directive [![Build Status](https://travis-ci.org/angular-ui/ui-tinymce.png)](https://travis-ci.org/angular-ui/ui-tinymce)
+# ui-tinymce directive [![Build Status](https://travis-ci.org/angular-ui/ui-tinymce.png)](https://travis-ci.org/angular-ui/ui-tinymce)
 
-This directive allows you to add a date-picker to your form elements.
+This directive allows you to add a TinyMCE editor to your form elements.
 
 # Requirements
 
 - AngularJS
-- JQuery
-- JQueryUI
-- [Date.toISOString()](https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Date/toISOString) (requires [polyfill](https://github.com/kriskowal/es5-shim/) for ≤IE8)
+- TinyMCE 3
 
 # Testing
 
-We use testacular and jshint to ensure the quality of the code.  The easiest way to run these checks is to use grunt:
+We use karma and jshint to ensure the quality of the code.  The easiest way to run these checks is to use grunt:
 
   npm install -g grunt-cli
   npm install
   bower install
   grunt
 
-The testacular task will try to open Chrome as a browser in which to run the tests.  Make sure this is available or change the configuration in `test\test.config.js` 
+The karma task will try to open Chrome as a browser in which to run the tests.  Make sure this is available or change the configuration in `test\test.config.js` 
 
 # Usage
 
 We use [bower](http://twitter.github.com/bower/) for dependency management.  Add
 
     dependencies: {
-        "angular-ui-date": "latest"
+        "angular-ui-tinymce": "latest"
     }
 
 To your `components.json` file. Then run
 
     bower install
 
-This will copy the ui-date files into your `components` folder, along with its dependencies. Load the script files in your application:
+This will copy the ui-tinymce files into your `components` folder, along with its dependencies. Load the script files in your application:
 
-    <script type="text/javascript" src="components/jquery/jquery.js"></script>
-    <script type="text/javascript" src="components/jquery-ui\ui\jquery-ui.custom.js"></script>
+    <script type="text/javascript" src="components/tinymce/tinymce.js"></script>
     <script type="text/javascript" src="components/angular/angular.js"></script>
-    <script type="text/javascript" src="components/angular-ui-date/date.js"></script>
+    <script type="text/javascript" src="components/angular-ui-tinymce/tinymce.js"></script>
 
-Add the date module as a dependency to your application module:
+Add the tinymce module as a dependency to your application module:
 
-    var myAppModule = angular.module('MyApp', ['ui.date'])
+    var myAppModule = angular.module('MyApp', ['ui.tinymce'])
 
 Apply the directive to your form elements:
 
-    <input ui-date>
+    <form method="post">
+      <textarea id="tinymce" ui-tinymce ng-model="tinymceModel"></textarea>
+    </form>
 
 ## Options
 
-All the jQueryUI DatePicker options can be passed through the directive.
+All the TinyMCE options can be passed through the directive.
 
 	myAppModule.controller('MyController', function($scope) {
-		$scope.dateOptions = {
-			changeYear: true,
-			changeMonth: true,
-			yearRange: '1900:-0'
+		$scope.tinymceOptions = {
+			handle_event_callback: function (e) {
+        // put logic here for keypress
+      }
 		};
 	});
 
-    <input ui-date="dateOptions" name="DateOfBirth">
-
-## Static Inline Picker
-
-If you want a static picker then simply apply the directive to a div rather than an input element.
-
-    <div ui-date="dateOptions" name="DateOfBirth"></div>
+    <form method="post">
+      <textarea id="tinymce" ui-tinymce ng-model="tinymceModel"></textarea>
+    </form>
 
 ## Working with ng-model
 
-The ui-date directive plays nicely with ng-model and validation directives such as ng-required.
-
-If you add the ng-model directive to same the element as ui-date then the picked date is automatically synchronized with the model value.
-
-_The ui-date directive stores and expects the model value to be a standard javascript Date object._
-
-## ui-date-format directive
-The ui-date directive only works with Date objects.
-If you want to pass date strings to and from the date directive via ng-model then you must use the ui-date-format directive.
-This directive specifies the format of the date string that will be expected in the ng-model.
-The format string syntax is that defined by the JQueryUI Date picker. For example
-
-    <input ui-date ui-date-format="DD, d MM, yy" ng-model="myDate">
-
-Now you can set myDate in the controller.
-
-    $scope.myDate = "Thursday, 11 October, 2012";
-
-## ng-required directive
-
-If you apply the required directive to element then the form element is invalid until a date is picked.
+The ui-tinymce directive plays nicely with the ng-model directive such as ng-required.
 
-Note: Remember that the ng-required directive must be explictly set, i.e. to "true".  This is especially true on divs:
+If you add the ng-model directive to same the element as ui-tinymce then the text in the editor is automatically synchronized with the model value.
 
-    <div ui-date="dateOptions" name="DateOfBirth" ng-required="true"></div>
+_ng-model and the id are required_.
 
+_The ui-tinymce directive stores and expects the model value to be a standard javascript tinymce object._
 

component.json

@@ -17,7 +17,7 @@
   ],
   "dependencies": {
     "angular": "~1.x",
-    "tinymce": "latest"
+    "tinymce-release": "latest"
   },
   "devDependencies": {
     "angular-mocks": "~1.x"

demo/demo.html

@@ -6,16 +6,16 @@
 <head>
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-  <title>AngularUI - Date Picker Demo</title>
+  <title>AngularUI - TinyMCE Demo</title>
   <base href=".."></base>
-  <link rel="stylesheet" href="components/jquery-ui/themes/smoothness/jquery-ui.css">
-  <script type="text/javascript" src="components/jquery/jquery.js"></script>
-  <script type="text/javascript" src="components/jquery-ui/ui/jquery-ui.custom.js"></script>
+  <script type="text/javascript" src="components/tinymce-release/tiny_mce.js"></script>
   <script type="text/javascript" src="components/angular/angular.js"></script>
-  <script type="text/javascript" src="src/date.js"></script>
+  <script type="text/javascript" src="src/tinymce.js"></script>
 </head>
-<body ng-app="ui.date">
-  <label>Select Date: <input type="text" ui-date ng-model="aDate"></label>
-  <div>{{aDate}}</div>
+<body ng-app="ui.tinymce">
+  <form method="post">
+    <textarea id="tinymce" ui-tinymce ng-model="tinymce"></textarea>
+  </form>
+  <div>{{tinymce}}</div>
 </body>
 </html>

gruntFile.js

@@ -1,22 +1,22 @@
 module.exports = function (grunt) {
 
-  grunt.loadNpmTasks('grunt-testacular');
+  grunt.loadNpmTasks('grunt-karma');
   grunt.loadNpmTasks('grunt-contrib-jshint');
 
   // Default task.
-  grunt.registerTask('default', ['jshint', 'testacular']);
+  grunt.registerTask('default', ['jshint', 'karma']);
 
-  var testacularConfig = function(configFile, customOptions) {
+  var karmaConfig = function(configFile, customOptions) {
     var options = { configFile: configFile, keepalive: true };
     var travisOptions = process.env.TRAVIS && { browsers: ['Firefox'], reporters: 'dots' };
     return grunt.util._.extend(options, customOptions, travisOptions);
   };
 
   // Project configuration.
   grunt.initConfig({
-    testacular: {
+    karma: {
       unit: {
-        options: testacularConfig('test/test.conf.js')
+        options: karmaConfig('test/test.conf.js')
       }
     },
     jshint:{

package.json

@@ -9,12 +9,12 @@
   "dependencies": {},
   "devDependencies": {
     "grunt": "~0.4.1",
-    "grunt-testacular": "~0.3.0",
+    "grunt-karma": "~0.4.4",
     "grunt-contrib-jshint": "~0.2.0"
   },
   "scripts": {},
   "repository": {
     "type": "git",
-    "url": "git://github.com/angular-ui/ui-date.git"
+    "url": "git://github.com/angular-ui/ui-tinymce.git"
   }
 }

src/tinymce.js

@@ -1,53 +1,57 @@
 /**
  * Binds a TinyMCE widget to <textarea> elements.
  */
-angular.module('ui.tinymce', []).directive('uiTinymce', ['uiTinymceConfig', function (uiTinymceConfig) {
-  uiTinymceConfig = uiTinymceConfig || {};
-  return {
-    require: 'ngModel',
-    link: function (scope, elm, attrs, ngModel) {
-      var expression,
-        options = {
-          // Update model on button click
-          onchange_callback: function (inst) {
-            if (inst.isDirty()) {
-              inst.save();
-              ngModel.$setViewValue(elm.val());
-              if (!scope.$$phase)
-                scope.$apply();
-            }
-          },
-          // Update model on keypress
-          handle_event_callback: function (e) {
-            if (this.isDirty()) {
-              this.save();
-              ngModel.$setViewValue(elm.val());
-              if (!scope.$$phase)
-                scope.$apply();
-            }
-            return true; // Continue handling
-          },
-          // Update model when calling setContent (such as from the source editor popup)
-          setup: function (ed) {
-            ed.onSetContent.add(function (ed, o) {
-              if (ed.isDirty()) {
-                ed.save();
+angular.module('ui.tinymce', [])
+  .value('uiTinymceConfig', {})
+  .directive('uiTinymce', ['uiTinymceConfig', function (uiTinymceConfig) {
+    uiTinymceConfig = uiTinymceConfig || {};
+    return {
+      require: 'ngModel',
+      link: function (scope, elm, attrs, ngModel) {
+        var expression,
+          options = {
+            // Update model on button click
+            onchange_callback: function (inst) {
+              if (inst.isDirty()) {
+                inst.save();
                 ngModel.$setViewValue(elm.val());
                 if (!scope.$$phase)
                   scope.$apply();
               }
-            });
-          }
-        };
-      if (attrs.uiTinymce) {
-        expression = scope.$eval(attrs.uiTinymce);
-      } else {
-        expression = {};
+            },
+            // Update model on keypress
+            handle_event_callback: function (e) {
+              if (this.isDirty()) {
+                this.save();
+                ngModel.$setViewValue(elm.val());
+                if (!scope.$$phase)
+                  scope.$apply();
+              }
+              return true; // Continue handling
+            },
+            // Update model when calling setContent (such as from the source editor popup)
+            setup: function (ed) {
+              ed.onSetContent.add(function (ed, o) {
+                if (ed.isDirty()) {
+                  ed.save();
+                  ngModel.$setViewValue(elm.val());
+                  if (!scope.$$phase)
+                    scope.$apply();
+                }
+              });
+            },
+            mode: 'exact',
+            elements: attrs.id
+          };
+        if (attrs.uiTinymce) {
+          expression = scope.$eval(attrs.uiTinymce);
+        } else {
+          expression = {};
+        }
+        angular.extend(options, uiTinymceConfig, expression);
+        setTimeout(function () {
+          tinymce.init(options);
+        });
       }
-      angular.extend(options, uiTinymceConfig, expression);
-      setTimeout(function () {
-        elm.tinymce(options);
-      });
-    }
-  };
-}]);
+    };
+  }]);

test/test.conf.js

@@ -2,11 +2,10 @@ basePath = '..';
 files = [
   JASMINE,
   JASMINE_ADAPTER,
-  'components/jquery/jquery.js',
-  'components/jquery-ui/ui/jquery-ui.custom.js',
   'components/angular/angular.js',
   'components/angular-mocks/angular-mocks.js',
-  'src/date.js',
+  'components/tinymce-release/tiny_mce.js',
+  'src/tinymce.js',
   'test/*.spec.js'
 ];
 singleRun = true;

test/tinymceSpec.js renamed to test/tinymce.spec.js

@@ -3,7 +3,7 @@ describe('uiTinymce', function () {
   'use strict';
 
   var scope, $compile, element, text = '<p>Hello</p>';
-  beforeEach(module('ui'));
+  beforeEach(module('ui.tinymce'));
   beforeEach(function () {
     // throw some garbage in the tinymce cfg to be sure it's getting thru to the directive
     angular.module('ui.tinymce').value('uiTinymceConfig', {tinymce: {bar: 'baz'}});
@@ -22,28 +22,28 @@ describe('uiTinymce', function () {
    */
   function compile() {
     runs(function () {
-      element = $compile('<form><textarea name="foo" ui-tinymce="{foo: \'bar\'}" ng-model="foo"></textarea></form>')(scope);
+      element = $compile('<form><textarea id="foo" ui-tinymce="{foo: \'bar\'}" ng-model="foo"></textarea></form>')(scope);
     });
     waits(1);
   }
 
   describe('compiling this directive', function () {
 
     it('should include the passed options', function () {
-      spyOn($.fn, 'tinymce');
+      spyOn(tinymce, 'init');
       compile();
       runs(function () {
-        expect($.fn.tinymce).toHaveBeenCalled();
-        expect($.fn.tinymce.mostRecentCall.args[0].foo).toEqual('bar');
+        expect(tinymce.init).toHaveBeenCalled();
+        expect(tinymce.init.mostRecentCall.args[0].foo).toEqual('bar');
       });
     });
 
     it('should include the default options', function () {
-      spyOn($.fn, 'tinymce');
+      spyOn(tinymce, 'init');
       compile();
       runs(function () {
-        expect($.fn.tinymce).toHaveBeenCalled();
-        expect($.fn.tinymce.mostRecentCall.args[0].bar).toEqual('baz');
+        expect(tinymce.init).toHaveBeenCalled();
+        expect(tinymce.init.mostRecentCall.args[0].bar).toEqual('baz');
       });
     });
   });