From 28f13018cc600884737cc8afb085d41ad37a4f87 Mon Sep 17 00:00:00 2001 From: Astray-git Date: Fri, 11 Sep 2015 14:46:43 +0800 Subject: [PATCH] refine optional ready expression --- README.md | 9 +- demo/demo.js | 8 +- demo/view-index.html | 2 +- demo/view-route1.html | 2 +- src/ng-ueditor.js | 297 ++++++++++++++++++++++-------------------- 5 files changed, 164 insertions(+), 154 deletions(-) diff --git a/README.md b/README.md index 8275eec..547d94a 100644 --- 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 ``` ``` ### 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 index 6f3afac..324ec95 100644 --- 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 index 58c7684..3304928 100644 --- a/demo/view-index.html +++ b/demo/view-index.html @@ -4,7 +4,7 @@
diff --git a/src/ng-ueditor.js b/src/ng-ueditor.js index e4d0545..ff1b6a5 100644 --- 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 ] )