Merge pull request #2 from Astray-git/refine_optional_ready_expression

refine optional ready expression
Astray-git · Sep 11, 2015 · 7eea685 · 7eea685
2 parents fa5fdad + 28f1301
commit 7eea685
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 154 deletions.
diff --git a/README.md b/README.md
@@ -30,19 +30,14 @@ use as a directive, you must provide a `ng-model` for view data biding, you can
 ```
 <textarea
     ng-ueditor="Controller.ueditorConfig"
-    ready="Controller.ready"
+    ready="Controller.ready($editor)"
     ng-model="Controller.ueditorContent"
 ></textarea>
 ```
 
 ### custom options
 - `ng-ueditor` add custom config.
-- `ready` (optional) add custom on ready callback.
-
-    callback will be invoked with these attributes:
-
-     `editorInstance`, link function attributes: `scope`, `element`, `attrs` and `ngModel`
-
+- `ready` (optional) **Breaking change since 0.3** now accept an expression to evaluate upon editor ready (editor instance available as `$editor`)
 - `all-html` (optional) normally result is get from [`UE.Editor.getContent`](http://ueditor.baidu.com/doc/#UE.Editor:getContent%28%29) use this attribute tell ueditor to return all html using [`UE.Editor.getAllHtml`](http://ueditor.baidu.com/doc/#UE.Editor:getAllHtml%28%29), result including some ueditor style blocks.
 
 ## Building

diff --git a/demo/demo.js b/demo/demo.js
@@ -32,8 +32,12 @@ var demo_controller = function (
         lang: 'en'
     };
 
-    controller.ready = function(editor){
-        console.debug('UEditor ready!');
+    controller.ready = function(editorInstance){
+        console.debug(
+            'UEditor ' +
+            editorInstance.uid +
+            ' ready!'
+        );
     };
 };
 

diff --git a/demo/view-index.html b/demo/view-index.html
@@ -4,7 +4,7 @@
         <form name="testForm" method="post">
             <textarea
                 ng-ueditor="Controller.ueditorConfig"
-                ready="Controller.ready"
+                ready="Controller.ready($editor)"
                 name="text"
                 ng-model="Controller.ueditorContent"
                 ng-change="Controller.updateHtml()"

diff --git a/demo/view-route1.html b/demo/view-route1.html
@@ -4,7 +4,7 @@
         <form method="post">
             <textarea
                 ng-ueditor="Controller.ueditorConfig"
-                ready="Controller.ready"
+                ready="Controller.ready($editor)"
                 ng-model="Controller.ueditorContent"
                 ng-change="Controller.updateHtml()"
             ></textarea>

diff --git a/src/ng-ueditor.js b/src/ng-ueditor.js
@@ -6,170 +6,180 @@ var ng_ueditor_directive = function (
     $window,
     $log,
     $sce,
-    $rootScope
+    $rootScope,
+    $parse
 ) {
     var generatedId = 0;
     var ID_PREFIX = 'ng-ueditor';
 
-    var link = function (
-        scope,
-        element,
-        attrs,
-        ctrls
-    ) {
-        if ($window.UE === undefined) {
-            $log.warn('Can not load ueditor.');
-            return;
+    var compile = function (element, attr) {
+        var customReadyFn;
+        if (attr.ready) {
+            customReadyFn = $parse(attr.ready);
         }
-        var editorInstance;
-        var editorReady = false;
-        var ngModel = ctrls[0];
-        // attributes options
-        var customOptions = scope.$eval(attrs.ngUeditor) || {};
-        var customReady = scope.$eval(attrs.ready);
-        var allHtml = attrs.allHtml !== undefined;
-
-        // use existing id or generate an ID
-        var currentId;
-        if (attrs.id !== undefined) {
-            currentId = attrs.id;
-        } else {
-            currentId = ID_PREFIX + '-' + generatedId++;
-            attrs.$set('id', currentId);
-        }
-
-        /**
-         * update ngModel view
-         * @method update_view
-         * @param {String} content updated content
-         * @private
-         */
-        var update_view = function (content) {
-            ngModel.$setViewValue(content);
-            $rootScope.$applyAsync();
-        };
-
-        /**
-         * update ngModel view with editor content
-         * @method update_view
-         * @private
-         */
-        var update_view_with_content = function (editor) {
-            var content = editor.getContent().trim();
-            update_view(content);
-        };
-
-        /**
-         * update ngModel view with full html page
-         * @method update_view_with_all_html
-         * @private
-         */
-        var update_view_with_all_html = function (editor) {
-            var content = editor.getAllHtml().trim();
-            update_view(content);
-        };
 
-        ngModel.$formatters.unshift(function(viewValue) {
-            return viewValue ? $sce.trustAsHtml(viewValue) : '';
-        });
-
-        ngModel.$render = function() {
-            var viewValue = $sce.getTrustedHtml(ngModel.$viewValue || '');
-
-
-            if (editorInstance !== undefined &&
-                editorReady === true
-            ) {
-                editorInstance.setContent(viewValue);
-                // trigger contentChange event for initial ngModel render,
-                // due to TinyMCE not firing event
-                editorInstance.fireEvent('contentChange');
+        return function (
+            scope,
+            element,
+            attrs,
+            ctrls
+        ) {
+            if ($window.UE === undefined) {
+                $log.warn('Can not load ueditor.');
+                return;
+            }
+            var editorInstance;
+            var editorReady = false;
+            var ngModel = ctrls[0];
+            // attributes options
+            var customOptions = scope.$eval(attrs.ngUeditor) || {};
+            if (customReadyFn) {
+                var customReady = function () {
+                    customReadyFn(
+                        scope,
+                        {
+                            $editor: editorInstance
+                        }
+                    );
+                };
+            }
+            var allHtml = attrs.allHtml !== undefined;
+
+            // use existing id or generate an ID
+            var currentId;
+            if (attrs.id !== undefined) {
+                currentId = attrs.id;
+            } else {
+                currentId = ID_PREFIX + '-' + generatedId++;
+                attrs.$set('id', currentId);
             }
-        };
 
-        // initialize editor
-        editorInstance = UE.getEditor(
-            currentId,
-            customOptions
-        );
-
-        /**
-         * callback when edit ready
-         * @method ready_callback
-         */
-        var ready_callback = function () {
-            editorReady = true;
-
-            var update_callback = allHtml === true ?
-                update_view_with_all_html.bind(
-                    undefined,
-                    editorInstance
-                ) :
-                update_view_with_content.bind(
-                    undefined,
-                    editorInstance
-                )
-            ;
-
-            // set up listeners
-            editorInstance.addListener(
-                'afterExecCommand',
-                update_callback
-            );
-            editorInstance.addListener(
-                'contentChange',
-                update_callback
+            /**
+             * update ngModel view
+             * @method update_view
+             * @param {String} content updated content
+             * @private
+             */
+            var update_view = function (content) {
+                ngModel.$setViewValue(content);
+                $rootScope.$applyAsync();
+            };
+
+            /**
+             * update ngModel view with editor content
+             * @method update_view
+             * @private
+             */
+            var update_view_with_content = function (editor) {
+                var content = editor.getContent().trim();
+                update_view(content);
+            };
+
+            /**
+             * update ngModel view with full html page
+             * @method update_view_with_all_html
+             * @private
+             */
+            var update_view_with_all_html = function (editor) {
+                var content = editor.getAllHtml().trim();
+                update_view(content);
+            };
+
+            ngModel.$formatters.unshift(function(viewValue) {
+                return viewValue ? $sce.trustAsHtml(viewValue) : '';
+            });
+
+            ngModel.$render = function() {
+                var viewValue = $sce.getTrustedHtml(ngModel.$viewValue || '');
+
+                if (editorInstance !== undefined &&
+                    editorReady === true
+                ) {
+                    editorInstance.setContent(viewValue);
+                    // trigger contentChange event for initial ngModel render,
+                    // due to TinyMCE not firing event
+                    editorInstance.fireEvent('contentChange');
+                }
+            };
+
+            // initialize editor
+            editorInstance = UE.getEditor(
+                currentId,
+                customOptions
             );
 
-            // temporary fix enableAutoSave option in ueditor 1.4.3
-            // covered language: zh-cn and en
-            // https://github.com/fex-team/ueditor/issues/1421
-            if (customOptions.enableAutoSave === false) {
+            /**
+             * callback when edit ready
+             * @method ready_callback
+             */
+            var ready_callback = function () {
+                editorReady = true;
+
+                var update_callback = allHtml === true ?
+                    update_view_with_all_html.bind(
+                        undefined,
+                        editorInstance
+                    ) :
+                    update_view_with_content.bind(
+                        undefined,
+                        editorInstance
+                    )
+                ;
+
+                // set up listeners
                 editorInstance.addListener(
-                    'showmessage',
-                    function(type, m){
-                        if (
-                            m.content === '本地保存成功' ||
-                            m.content === 'Local conservation success'
-                        ) {
-                            return true;
-                        }
-                    }
+                    'afterExecCommand',
+                    update_callback
                 );
-            }
-
-            // call optional custom ready callback
-            if (angular.isFunction(customReady)) {
-                customReady(
-                    editorInstance,
-                    scope,
-                    element,
-                    attrs,
-                    ngModel
+                editorInstance.addListener(
+                    'contentChange',
+                    update_callback
                 );
-            }
 
-            // trigger initial ngModel render
-            ngModel.$render();
-            ngModel.$setPristine();
-        };
+                // temporary fix enableAutoSave option in ueditor 1.4.3
+                // covered language: zh-cn and en
+                // https://github.com/fex-team/ueditor/issues/1421
+                if (customOptions.enableAutoSave === false) {
+                    editorInstance.addListener(
+                        'showmessage',
+                        function(type, m){
+                            if (
+                                m.content === '本地保存成功' ||
+                                m.content === 'Local conservation success'
+                            ) {
+                                return true;
+                            }
+                        }
+                    );
+                }
 
-        editorInstance.ready(
-            ready_callback
-        );
+                // call optional custom ready callback
+                if (customReady) {
+                    scope.$apply(customReady);
+                }
 
-        scope.$on('$destroy', function() {
-            if (editorInstance !== undefined) {
-                UE.delEditor(currentId);
-                editorInstance = undefined;
-            }
-        });
+                // trigger initial ngModel render
+                ngModel.$render();
+                ngModel.$setPristine();
+            };
+
+            editorInstance.ready(
+                ready_callback
+            );
+
+            scope.$on('$destroy', function() {
+                if (editorInstance !== undefined) {
+                    UE.delEditor(currentId);
+                    editorInstance = undefined;
+                }
+            });
+        };
     };
 
     return {
         restrict: 'A',
         require: ['ngModel'],
-        link: link
+        compile: compile
     };
 };
 
@@ -181,6 +191,7 @@ angular.module('ng.ueditor', [])
             '$log',
             '$sce',
             '$rootScope',
+            '$parse',
             ng_ueditor_directive
         ]
     )