diff --git a/bower.json b/bower.json index 5576ee4..f0bf848 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-markdown-editor-ghiscoding", - "version": "1.0.9", + "version": "1.1.0", "author": "Ghislain B.", "description": "Angular Markdown Editor, all-in-one Markdown Editor and Preview", "main": [ diff --git a/example/app.js b/example/app.js index c0e2ebf..1eacac8 100644 --- a/example/app.js +++ b/example/app.js @@ -22,8 +22,8 @@ angular.module('example-app', ['hc.marked', 'hljs', 'angular-markdown-editor']) tabReplace: ' ' }); }]) - .controller("MainController", ["$scope", "marked", function MarkdownController($scope, marked) { - $scope.markdown = "*This* **is** [markdown](https://daringfireball.net/projects/markdown/)\n and `{{ 1 + 2 }}` = {{ 1 + 2 }}"; + .controller("MainController", ["$rootScope", "$scope", "marked", function MarkdownController($rootScope, $scope, marked) { + $scope.editor1 = "*This* **is** [markdown](https://daringfireball.net/projects/markdown/)\n and `{{ 1 + 2 }}` = {{ 1 + 2 }}"; $scope.markdownService = marked('#TEST'); // -- @@ -32,4 +32,33 @@ angular.module('example-app', ['hc.marked', 'hljs', 'angular-markdown-editor']) vm.convertedMarkdown = marked(vm.markdown); } + /** + * For some convenience, Angular-Markdown-Editor Directive also save each Markdown Editor inside $rootScope + * Each of editor object are available through their $rootScope.markdownEditorObjects[editorName] + * + * Example: + * We would then call our object through $rootScope.markdownEditorObjects.editor1 + */ + $scope.fullScreenPreview = function() { + $rootScope.markdownEditorObjects.editor1.showPreview(); + $rootScope.markdownEditorObjects.editor1.setFullscreen(true); + } + + /** Markdown event hook onFullscreen, in this example we will automatically show the result preview when going in full screen + * the argument (e) is the actual Markdown object returned which help call any of API functions defined in Markdown Editor + * For a list of API functions take a look on official demo site http://www.codingdrama.com/bootstrap-markdown/ + * @param object e: Markdown Editor object + */ + $scope.onFullScreenCallback = function(e) { + e.showPreview(); + } + + /** After exiting from full screen, let's go back to editor mode (which mean hide the preview) + * NOTE: If you want this one to work, you will have to manually download the JS file, not sure why but they haven't released any versions in a while + * https://github.com/toopay/bootstrap-markdown/tree/master/js + */ + $scope.onFullScreenExitCallback = function(e) { + e.hidePreview(); + } + }]); diff --git a/example/index.html b/example/index.html index 801354d..f57eafb 100644 --- a/example/index.html +++ b/example/index.html @@ -23,8 +23,10 @@ - + + + @@ -43,20 +45,32 @@

Angular Markdown Editor

+
+ External Markdown Editor API Calls with `$rootScope.markdownEditorObjects` +
+ +
+
-
-
- - -
+
+
+ +
-
-
- -
-
-
+
+
+
+ +
+
+
diff --git a/package.json b/package.json index 945606b..4d2b85b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-markdown-editor", - "version": "1.0.9", + "version": "1.1.0", "author": "Ghislain B.", "description": "Angular Markdown Editor, all-in-one Markdown Editor and Preview", "main": "app.js", diff --git a/readme.md b/readme.md index bb75189..6711560 100644 --- a/readme.md +++ b/readme.md @@ -1,5 +1,5 @@ # Angular Markdown Editor (Directive) -`1.0.9` +`1.1.0` ## What do we have? In this package you a few libraries and tools to make a more convenient "all in one" WYSIWYG Markdown Editor with preview. All of that with a simple AngularJS Directive call. I plan to use this mainly for online documentation but it could be useful for many other reasons (doc, blog, etc...). Also planning on adding a 1-click button for simple Copy+Paste to email. @@ -57,8 +57,8 @@ _NOTE: Unfortunately, the "highlight.js" npm module doesn't seem to have proper - - + + ``` ### Inside the HTML @@ -87,5 +87,70 @@ I really thought that some buttons were missing to go a great job (~~Strikethrou +``` +Controller +You can call any API functions defined in Markdown Editor, take a look at their API section [Bootstrap Markdown Editor - API functions](http://www.codingdrama.com/bootstrap-markdown/) + +```javascript +/** Markdown event hook onFullscreen, in this example we will automatically show the result preview when going in full screen + * the argument (e) is the actual Markdown object returned which help call any of API functions defined in Markdown Editor + * @param object e: Markdown Editor object + */ +$scope.onFullScreenCallback = function(e) { + e.showPreview(); +} +``` + +### External function calls through $rootScope.markdownEditorObjects +###### starting with Angular-Markdown-Editor version 1.1.0 +For conveniencies and for possible external function calls, Angular-Markdown-Editor saves each of the Markdown Editors inside `$rootScope.markdownEditorObjects[editorName]`. This basically means that on any define editor, we could call any of the [Bootstrap Markdown Editor - API functions](http://www.codingdrama.com/bootstrap-markdown/). +This varies with previous subject of (Event Hooks), since using the `$rootScope.markdownEditorObjects` can be called at any and makes perfect for example on a function attached to a button (for example an external button for a Full Screen Preview as shown below). + +For example HTML +```html + +``` + +Controller +```javascript +/** + * For some convenience, Angular-Markdown-Editor Directive also save each Markdown Editor inside $rootScope + * Each of editor object are available through their $rootScope.markdownEditorObjects[editorName] + * + * Example: + * We would then call our object through $rootScope.markdownEditorObjects.editor1 + */ +$scope.fullScreenPreview = function() { + $rootScope.markdownEditorObjects.editor1.showPreview(); + $rootScope.markdownEditorObjects.editor1.setFullscreen(true); +} +``` + ## Preview ![Login Page](https://raw.githubusercontent.com/ghiscoding/angular-markdown-editor/master/images/scrshot_preview.png) diff --git a/src/angular-markdown-editor-locale.js b/src/angular-markdown-editor-locale.js deleted file mode 100644 index 6f0308f..0000000 --- a/src/angular-markdown-editor-locale.js +++ /dev/null @@ -1,20 +0,0 @@ -(function($) { - $.fn.markdown.messages['fr'] = { - 'Bold': "Gras", - 'Italic': "Italique", - 'Heading': "Titre", - 'URL/Link': "Insérer un lien HTTP", - 'Image': "Insérer une image", - 'List': "Liste à puces", - 'Preview': "Prévisualiser", - 'strong text': "texte important", - 'emphasized text': "texte souligné", - 'heading text': "texte d'entête", - 'enter link description here': "entrez la description du lien ici", - 'Insert Hyperlink': "Insérez le lien hypertexte", - 'enter image description here': "entrez la description de l'image ici", - 'Insert Image Hyperlink': "Insérez le lien hypertexte de l'image", - 'enter image title here': "entrez le titre de l'image ici", - 'list text here': "texte à puce ici" - }; -}(jQuery)); \ No newline at end of file diff --git a/src/angular-markdown-editor.js b/src/angular-markdown-editor.js index 739d196..b8c60bb 100644 --- a/src/angular-markdown-editor.js +++ b/src/angular-markdown-editor.js @@ -1,6 +1,6 @@ angular .module('angular-markdown-editor', []) - .directive('markdownEditor', ['$parse', function(parse) { + .directive('markdownEditor', ['$rootScope', function ($rootScope) { return { restrict: 'A', require: 'ngModel', @@ -31,10 +31,36 @@ angular enableDropDataUri: options.enableDropDataUri || false, showButtons: options.showButtons || null, additionalButtons: options.additionalButtons || (options.addExtraButtons ? addNewButtons() : []), - onChange: function(event) { - // When a change occurs, we need to update scope in case the user clicked one of the plugin buttons - // (which isn't the same as a keydown event that angular would listen for). - ngModel.$setViewValue(event.getContent()); + + //-- Events/Hooks -- + // each of them are defined as callback available in the directive + // example: + // NOTE: If you want this one to work, you will have to manually download the JS file, not sure why but they haven't released any versions in a while + // https://github.com/toopay/bootstrap-markdown/tree/master/js + onPreview: function (e) { runScopeFunction(scope, attrs.onPreview, e); }, + onPreviewEnd: function (e) { runScopeFunction(scope, attrs.onPreviewEnd, e); }, + onSave: function (e) { runScopeFunction(scope, attrs.onSave, e); }, + onBlur: function (e) { runScopeFunction(scope, attrs.onBlur, e); }, + onFocus: function (e) { runScopeFunction(scope, attrs.onFocus, e); }, + onFullscreen: function (e) { runScopeFunction(scope, attrs.onFullscreen, e); }, + onSelect: function (e) { runScopeFunction(scope, attrs.onSelect, e); }, + onFullscreenExit: function (e) { runScopeFunction(scope, attrs.onFullscreenExit, e); }, + onChange: function(e) { + // When a change occurs, we need to update scope in case the user clicked one of the plugin buttons + // (which isn't the same as a keydown event that angular would listen for). + ngModel.$setViewValue(e.getContent()); + + runScopeFunction(scope, attrs.onChange, e); + }, + onShow: function (e) { + // keep the Markdown Object in $rootScope so that it's available also from anywhere (like in the parent controller) + // we will keep this in an object under the ngModel name so that it also works having multiple editor in same controller + $rootScope.markdownEditorObjects = $rootScope.markdownEditorObjects || {}; + $rootScope.markdownEditorObjects[ngModel.$name] = e; + + if (!!attrs.onShow) { + runScopeFunction(scope, attrs.onShow, e); + } } }); } @@ -115,3 +141,32 @@ function addNewButtons() { }] }]]; } + +/** Evaluate a function name passed as string and run it from the scope. + * The function name could be passed with/without brackets "()", in any case we will run the function + * @param object self object + * @param string function passed as a string + * @param object Markdown Editor object + * @result mixed result + */ +function runScopeFunction(scope, fnString, editorObject) { + if (!fnString) { + return; + } + + // Find if our function has the brackets "()" + if (/\({1}.*\){1}/gi.test(fnString)) { + // if yes then run it through $eval else find it in the scope and then run it. That is the only way to evaluate all arguments of the function + // we'll have to make the object available in the scope so that we can evaluate it inside the controller + var lastParenthese = fnString.indexOf(")"); + scope.$markdownEditorObject = editorObject; + fnString = fnString.replace(")", "$markdownEditorObject)"); + result = scope.$eval(fnString); + } else { + var fct = objectFindById(scope, fnString, '.'); + if (typeof fct === "function") { + result = fct(editorObject); + } + } + return result; +} \ No newline at end of file