From bc4aa54ada49fb4aeb7961a559cc0efce26f1305 Mon Sep 17 00:00:00 2001 From: Simeon Date: Sat, 30 Nov 2013 12:51:43 +1300 Subject: [PATCH] Updates for v1.1.1 merge in. --- .bower.json | 2 +- README.md | 48 ++++++++++++++++------- changelog.md | 5 ++- demo/js/index.js | 2 +- textAngular.js | 99 +++++++++--------------------------------------- 5 files changed, 56 insertions(+), 100 deletions(-) diff --git a/.bower.json b/.bower.json index 24c0ecda..52e4320d 100644 --- a/.bower.json +++ b/.bower.json @@ -1,6 +1,6 @@ { "name": "textAngular", - "version": "1.1.0", + "version": "1.1.1", "main": "./textAngular.js", "description": "A radically powerful Text-Editor/Wysiwyg editor for Angular.js", "keywords": [ diff --git a/README.md b/README.md index 2eca4086..abdab3c1 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -textAngular v1.1.0 +textAngular v1.1.1 =========== Demo: http://www.textangular.com @@ -15,11 +15,12 @@ Demo: http://www.textangular.com ###How to Use -1. Get textAngular via `bower install textAngular`, using the cdn at http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.0/text-angular.min.js or from the github page https://github.com/fraywing/textAngular +1. Get textAngular via `bower install textAngular`, using the cdn at http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.1.1/text-angular.min.js or from the github page https://github.com/fraywing/textAngular 2. Include textAngular.js or textAngular.min.js in your project then include it in your module: ```angular.module('myModule', ['textAngular'])```, alternatively grab all this code and throw it in your directives.js module file. 3. In your HTML instantiate textAngular as an attribute or element, the only required attribute is the ng-model which is the variable to bind the content of the editor to, like so: ```
``` or `````` this acts in a similar fashion to the input directive of angular so if you define a name attribute you can use form validation as if it was a regular input. 4. I recommend using the following CSS in your stylesheet or a variant of to display the text box nicely: - ``` + +```css .ta-editor{ min-height: 300px; height: auto; @@ -30,24 +31,24 @@ Demo: http://www.textangular.com ``` Have fun! -**Important Note:** In it's current state textAngular does not support the use of class or style attributes in the RAW html or in plugins. +**Important Note:** textAngular supports the use of all attributes, please note that angulars ng-bind-html WILL strip out all of your style attributes. ###Setting Options Several options can be set through attributes on the HTML tag, these are; -- ta-toolbar: this should evaluate to an array of arrays. Each element is the name of one of the toolbar tools. The default is: ```[['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'],['html', 'insertImage', 'insertLink']]``` -- ta-toolbar-class: this is the class to apply to the overall div of the toolbar, defaults to "btn-toolbar". Note that the class "ta-toolbar" is also added to the toolbar. -- ta-toolbar-group-class: this is the class to apply to the nested groups in the toolbar, a div with this class is created for each nested array in the ta-toolbar array and then the tool buttons are nested inside the group, defaults to "btn-group". -- ta-toolbar-button-class: this is the class to apply to each tool button in the toolbar, defaults to: "btn btn-default" -- ta-toolbar-active-button-class: this is the class to apply to each tool button in the toolbar if it's activeState function returns true ie when a tool function is applied to the selected text, defaults to: "active". -- ta-text-editor-class: this is the class to apply to the text editor pre tag, defaults to "form-control". Note that the classes: ta-editor and ta-text are also added. -- ta-html-editor-class: this is the class to apply to the html editor div tag, defaults to "form-control". Note that the classes: ta-editor and ta-html are also added. +- `ta-toolbar`: this should evaluate to an array of arrays. Each element is the name of one of the toolbar tools. The default is: ```[['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'],['html', 'insertImage', 'insertLink']]``` +- `ta-toolbar-class`: this is the class to apply to the overall div of the toolbar, defaults to "btn-toolbar". Note that the class "ta-toolbar" is also added to the toolbar. +- `ta-toolbar-group-class`: this is the class to apply to the nested groups in the toolbar, a div with this class is created for each nested array in the ta-toolbar array and then the tool buttons are nested inside the group, defaults to "btn-group". +- `ta-toolbar-button-class`: this is the class to apply to each tool button in the toolbar, defaults to: "btn btn-default" +- `ta-toolbar-active-button-class`: this is the class to apply to each tool button in the toolbar if it's activeState function returns true ie when a tool function is applied to the selected text, defaults to: "active". +- `ta-text-editor-class`: this is the class to apply to the text editor pre tag, defaults to "form-control". Note that the classes: ta-editor and ta-text are also added. +- `ta-html-editor-class`: this is the class to apply to the html editor div tag, defaults to "form-control". Note that the classes: ta-editor and ta-html are also added. The defaults can be changed by altering/overwriting the variable: $rootScope.textAngularOpts which acts like global defaults for the classes and toolbar. The default value for this is: -``` +```js $rootScope.textAngularOpts = { toolbar: [['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'],['html', 'insertImage', 'insertLink']], classes: { @@ -64,7 +65,7 @@ $rootScope.textAngularOpts = { The toolbar buttons are defined in the object variable $rootScope.textAngularTools. The following is an example of how to add a button to make the selected text red: -``` +```js $rootScope.textAngularTools.colourRed = { display: "", action: function(){ @@ -72,6 +73,7 @@ $rootScope.textAngularTools.colourRed = { }, activeState: function(){return false;} //This isn't required, and currently doesn't work reliably except for the html tag that doesn't rely on the cursor position. }; + //the following adds it to the toolbar to be displayed and used. $rootScope.textAngularOpts.toolbar = [['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'colourRed', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'],['html', 'insertImage', 'insertLink']]; ``` @@ -80,7 +82,7 @@ To explain how this works, when we create a button we create an isolated child s Note that the way any functions are called in the plugins the 'this' variable will allways point to the scope of the button ensuring that this.$parent will allways Here's the code we run for every tool: -``` +```js toolElement = angular.element($rootScope.textAngularTools[tool].display); toolElement.addClass(scope.classes.toolbarButton); groupElement.append($compile(toolElement)(angular.extend scope.$new(true), $rootScope.textAngularTools[tool])); @@ -96,3 +98,21 @@ If you find something, please let me know - throw me a message, or submit a issu ## License This project is licensed under the [MIT license](http://opensource.org/licenses/MIT). + + + +####Contributers + +Special thanks to all the contributions thus far! + +Including those from: + +[SimeonC](https://github.com/SimeonC) + +[Slobodan Mišković](https://github.com/slobo) + +[edouard-lopez](https://github.com/edouard-lopez) + +[108ium](https://github.com/108ium) + +[nadeeshacabral](https://github.com/nadeeshacabral) diff --git a/changelog.md b/changelog.md index 372bedb3..9b8dbe6f 100644 --- a/changelog.md +++ b/changelog.md @@ -5,8 +5,9 @@ - Fixed buttons still submitting form - Fix for Null ngModel value. Thanks to @slobo #22 - Added Ability to override just "display" for default button set. Thanks to @slobo #27 -- Added Tests -- Updated Readme.md +- Fixed parsing issues see Issues: #35 #30 +- Updated Readme.md and consolidated the readme out of the textAngular.js file. +- Added basic demo to the repository. 2013-11-9 v1.1.0 diff --git a/demo/js/index.js b/demo/js/index.js index a89970ad..aca9f2dc 100644 --- a/demo/js/index.js +++ b/demo/js/index.js @@ -3,7 +3,7 @@ angular.module("textAngularTest", ['textAngular']); - wysiwygeditor = function($scope, $sce) { + wysiwygeditor = function($scope) { return $scope.htmlcontent = '

Hello World!

'; }; diff --git a/textAngular.js b/textAngular.js index 99fcfce4..1c2b6582 100644 --- a/textAngular.js +++ b/textAngular.js @@ -2,93 +2,16 @@ textAngular Author : Austin Anderson License : 2013 MIT -Version 1.1.0 +Version 1.1.1 -Requirements: Angular 1.2.0, Angular ngSanitize module -Optional Requirements: Bootstrap 3.0.0 and font-awesome for styling if you are using the default classes and icons. - -How to Use: - -1. Include textAngular.js in your project, alternatively grab all this code and throw it in your directives.js module file. -2. In your HTML instantiate textAngular as an attribute or element, the only required attribute is the ng-model which is the variable to bind the content of the editor to, this is the standard ng-model allowing you to use validating filters on it. -3. I reccommend using the following CSS in your stylesheet or a variant of to display the text box nicely: - -.ta-editor{ - min-height: 300px; - height: auto; - overflow: auto; - font-family: inherit; - font-size: 100%; -} - -4. Have fun! - -Setting Options: - -Several options can be set through attributes on the HTML tag, these are; - - ta-toolbar: this should evaluate to an array of arrays. Each element is the name of one of the toolbar tools. The default is: [['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'],['html', 'insertImage', 'insertLink']] - - ta-toolbar-class: this is the class to apply to the overall div of the toolbar, defaults to "btn-toolbar". Note that the class "ta-toolbar" is also added to the toolbar. - - ta-toolbar-group-class: this is the class to apply to the nested groups in the toolbar, a div with this class is created for each nested array in the ta-toolbar array and then the tool buttons are nested inside the group, defaults to "btn-group". - - ta-toolbar-button-class: this is the class to apply to each tool button in the toolbar, defaults to: "btn btn-default" - - ta-toolbar-active-button-class: this is the class to apply to each tool button in the toolbar if it's activeState function returns true ie when a tool function is applied to the selected text, defaults to: "active". - - ta-text-editor-class: this is the class to apply to the text editor 
, defaults to "form-control". Note that the classes: ta-editor and ta-text are also added.
-	- ta-html-editor-class: this is the class to apply to the html editor 
, defaults to "form-control". Note that the classes: ta-editor and ta-html are also added.
-
-The defaults can be changed by altering/overwriting the variable: $rootScope.textAngularOpts which acts like global defaults for the classes and toolbar.
-The default value for this is: 
-	$rootScope.textAngularOpts = {
-		toolbar: [['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'],['html', 'insertImage', 'insertLink']],
-		classes: {
-			toolbar: "btn-toolbar",
-			toolbarGroup: "btn-group",
-			toolbarButton: "btn btn-default",
-			toolbarButtonActive: "active",
-			textEditor: 'form-control',
-			htmlEditor: 'form-control'
-		}
-	}
-
-The toolbar buttons are defined in the object variable $rootScope.textAngularTools.
-The following is an example of how to add a button to make the selected text red:
-`
-$rootScope.textAngularTools.colourRed = {
-	display: "",
-	action: function(){
-		this.$parent.wrapSelection('formatBlock', '');
-	},
-	activeState: function(){return false;} //This isn't required, and currently doesn't work reliably except for the html tag that doesn't rely on the cursor position.
-};
-//the following adds it to the toolbar to be displayed and used.
-$rootScope.textAngularOpts.toolbar = [['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'colourRed', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'],['html', 'insertImage', 'insertLink']];
-`
-To explain how this works, when we create a button we create an isolated child scope of the textAngular scope and extend it with the values in the tools object, we then compile the HTML in the display value with the newly created scope.
-Note that the way any functions are called in the plugins the 'this' variable will allways point to the scope of the button ensuring that this.$parent will allways 
-Here's the code we run for every tool:
-
-`
-toolElement = angular.element($rootScope.textAngularTools[tool].display);
-toolElement.addClass(scope.classes.toolbarButton);
-groupElement.append($compile(toolElement)(angular.extend scope.$new(true), $rootScope.textAngularTools[tool]));
-`
+See README.md or http://github.com/fraywing/textangular for requirements and use.
 */
 
 
 var textAngular = angular.module("textAngular", ['ngSanitize']); //This makes ngSanitize required
 
 textAngular.directive("textAngular", function($compile, $sce, $window, $document, $rootScope, $timeout, taFixSelection) {
-	console.log("Thank you for using textAngular! http://www.textangular.com");
-	// Here we set up the global display defaults, make sure we don't overwrite any that the user may have already set.
-	$rootScope.textAngularOpts = angular.extend({
-		toolbar: [['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'], ['html', 'insertImage', 'insertLink']],
-		classes: {
-			toolbar: "btn-toolbar",
-			toolbarGroup: "btn-group",
-			toolbarButton: "btn btn-default",
-			toolbarButtonActive: "active",
-			textEditor: 'form-control',
-			htmlEditor: 'form-control'
-		}
-	}, ($rootScope.textAngularOpts != null)? $rootScope.textAngularOpts : {});
+	console.log("Thank you for using textAngular! http://www.textangular.com")
 	// deepExtend instead of angular.extend in order to allow easy customization of "display" for default buttons
 	// snatched from: http://stackoverflow.com/a/15311794/2966847
 	function deepExtend(destination, source) {
@@ -102,9 +25,21 @@ textAngular.directive("textAngular", function($compile, $sce, $window, $document
 			}
 		}
 		return destination;
-	}
+	};
+	// Here we set up the global display defaults, make sure we don't overwrite any that the user may have already set.
+	$rootScope.textAngularOpts = deepExtend({
+		toolbar: [['h1', 'h2', 'h3', 'p', 'pre', 'bold', 'italics', 'ul', 'ol', 'redo', 'undo', 'clear'], ['html', 'insertImage', 'insertLink']],
+		classes: {
+			toolbar: "btn-toolbar",
+			toolbarGroup: "btn-group",
+			toolbarButton: "btn btn-default",
+			toolbarButtonActive: "active",
+			textEditor: 'form-control',
+			htmlEditor: 'form-control'
+		}
+	}, ($rootScope.textAngularOpts != null)? $rootScope.textAngularOpts : {});
 	// Setup the default toolbar tools, this way allows the user to add new tools like plugins
-		$rootScope.textAngularTools = deepExtend({
+	$rootScope.textAngularTools = deepExtend({
 		html: {
 			display: "",
 			action: function() {