textAngular.min.js

var textAngular=angular.module("textAngular",["ngSanitize"]);textAngular.directive("textAngular",function($compile,$sce,$window,$document,$rootScope,$timeout){console.log("Thank you for using textAngular! http://www.textangular.com");$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:{});function deepExtend(destination,source){for(var property in source){if(source[property]&&source[property].constructor&&source[property].constructor===Object){destination[property]=destination[property]||{};arguments.callee(destination[property],source[property])}else{destination[property]=source[property]}}return destination}$rootScope.textAngularTools=deepExtend({html:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'>Toggle HTML</button>",action:function(){var ht,_this=this;this.$parent.showHtml=!this.$parent.showHtml;if(this.$parent.showHtml){ht=this.$parent.displayElements.text.html();$timeout(function(){return _this.$parent.displayElements.html[0].focus()},100)}else{ht=this.$parent.displayElements.html.html();$timeout(function(){return _this.$parent.displayElements.text[0].focus()},100)}this.$parent.compileHtml(ht);this.active=this.$parent.showHtml}},h1:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'>H1</button>",action:function(){return this.$parent.wrapSelection("formatBlock","<H1>")}},h2:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'>H2</button>",action:function(){return this.$parent.wrapSelection("formatBlock","<H2>")}},h3:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'>H3</button>",action:function(){return this.$parent.wrapSelection("formatBlock","<H3>")}},p:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'>P</button>",action:function(){return this.$parent.wrapSelection("formatBlock","<P>")}},pre:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'>pre</button>",action:function(){return this.$parent.wrapSelection("formatBlock","<PRE>")}},ul:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-list-ul'></i></button>",action:function(){return this.$parent.wrapSelection("insertUnorderedList",null)}},ol:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-list-ol'></i></button>",action:function(){return this.$parent.wrapSelection("insertOrderedList",null)}},quote:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-quote-right'></i></button>",action:function(){return this.$parent.wrapSelection("formatBlock","<BLOCKQUOTE>")}},undo:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-undo'></i></button>",action:function(){return this.$parent.wrapSelection("undo",null)}},redo:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-repeat'></i></button>",action:function(){return this.$parent.wrapSelection("redo",null)}},bold:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-bold'></i></button>",action:function(){return this.$parent.wrapSelection("bold",null)},activeState:function(){return $document[0].queryCommandState("bold")}},justifyLeft:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-align-left'></i></button>",action:function(){return this.$parent.wrapSelection("justifyLeft",null)},activeState:function(){return $document[0].queryCommandState("justifyLeft")}},justifyRight:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-align-right'></i></button>",action:function(){return this.$parent.wrapSelection("justifyRight",null)},activeState:function(){return $document[0].queryCommandState("justifyRight")}},justifyCenter:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-align-center'></i></button>",action:function(){return this.$parent.wrapSelection("justifyCenter",null)},activeState:function(){return $document[0].queryCommandState("justifyCenter")}},italics:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-italic'></i></button>",action:function(){return this.$parent.wrapSelection("italic",null)},activeState:function(){return $document[0].queryCommandState("italic")}},clear:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-ban'></i></button>",action:function(){return this.$parent.wrapSelection("FormatBlock","<div>")}},insertImage:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-picture-o'></i></button>",action:function(){var imageLink;imageLink=prompt("Please enter an image URL to insert","http://");if(imageLink!==""){return this.$parent.wrapSelection("insertImage",imageLink)}}},insertLink:{display:"<button type='button' ng-click='action()' ng-class='displayActiveToolClass(active)'><i class='fa fa-chain'></i></button>",action:function(){var urlLink;urlLink=prompt("Please enter an URL to insert","http://");if(urlLink!==""){return this.$parent.wrapSelection("createLink",urlLink)}}}},$rootScope.textAngularTools!=null?$rootScope.textAngularTools:{});var sanitizationWrapper=function(html){return $sce.trustAsHtml(html)};return{require:"ngModel",scope:{},restrict:"EA",link:function(scope,element,attrs,ngModel){var group,groupElement,keydown,keyup,tool,toolElement;angular.extend(scope,$rootScope.textAngularOpts,{compileHtml:function(html){var compHtml=angular.element("<div>").append(html).html().replace(/(class="(.*?)")|(class='(.*?)')/g,"").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/style=("|')(.*?)("|')/g,"");if(scope.showHtml==="load"){scope.text=sanitizationWrapper(compHtml);scope.html=sanitizationWrapper(compHtml.replace(/</g,"&lt;"));scope.showHtml=scope.showHtmlDefault||false}else if(scope.showHtml){scope.text=sanitizationWrapper(compHtml)}else{scope.html=sanitizationWrapper(compHtml.replace(/</g,"&lt;"))}ngModel.$setViewValue(compHtml)},wrapSelection:function(command,opt,updateDisplay){if(updateDisplay==null)updateDisplay=true;document.execCommand(command,false,opt);if(scope.showHtml)scope.displayElements.text[0].focus();else scope.displayElements.html[0].focus();if(updateDisplay)scope.updateDisplay()},updateDisplay:function(){scope.compileHtml(!scope.showHtml?scope.displayElements.html.html():scope.displayElements.text.html())},showHtml:false});if(!!attrs.taToolbar)scope.toolbar=scope.$eval(attrs.taToolbar);if(!!attrs.taToolbarClass)scope.classes.toolbar=attrs.taToolbarClass;if(!!attrs.taToolbarGroupClass)scope.classes.toolbarGroup=attrs.taToolbarGroupClass;if(!!attrs.taToolbarButtonClass)scope.classes.toolbarButton=attrs.taToolbarButtonClass;if(!!attrs.taToolbarActiveButtonClass)scope.classes.toolbarButtonActive=attrs.taToolbarActiveButtonClass;if(!!attrs.taTextEditorClass)scope.classes.textEditor=attrs.taTextEditorClass;if(!!attrs.taHtmlEditorClass)scope.classes.htmlEditor=attrs.taHtmlEditorClass;scope.displayElements={toolbar:angular.element("<div></div>"),text:angular.element("<pre contentEditable='true' ng-show='showHtml' ng-bind-html='html' ></pre>"),html:angular.element("<div contentEditable='true' ng-hide='showHtml' ng-bind-html='text' ></div>")};element.append(scope.displayElements.toolbar);element.append(scope.displayElements.text);element.append(scope.displayElements.html);$compile(scope.displayElements.text)(scope);$compile(scope.displayElements.html)(scope);element.addClass("ta-root");scope.displayElements.toolbar.addClass("ta-toolbar "+scope.classes.toolbar);scope.displayElements.text.addClass("ta-text ta-editor "+scope.classes.textEditor);scope.displayElements.html.addClass("ta-html ta-editor "+scope.classes.textEditor);scope.tools={};for(var _i=0;_i<scope.toolbar.length;_i++){group=scope.toolbar[_i];groupElement=angular.element("<div></div>");groupElement.addClass(scope.classes.toolbarGroup);for(var _j=0;_j<group.length;_j++){tool=group[_j];toolElement=angular.element($rootScope.textAngularTools[tool].display);toolElement.addClass(scope.classes.toolbarButton);toolElement.attr("unselectable","on");var childScope=angular.extend(scope.$new(true),$rootScope.textAngularTools[tool],{displayActiveToolClass:function(active){return active?this.$parent.classes.toolbarButtonActive:""}});scope.tools[tool]=childScope;groupElement.append($compile(toolElement)(childScope))}scope.displayElements.toolbar.append(groupElement)}ngModel.$render=function(){if(ngModel.$viewValue===undefined)return;if(!($document[0].activeElement===scope.displayElements.html[0])&&!($document[0].activeElement===scope.displayElements.text[0])){var val=ngModel.$viewValue||"";scope.text=sanitizationWrapper(val);scope.html=sanitizationWrapper(val.replace(/</g,"&lt;"))}};scope.bUpdateSelectedStyles=false;scope.updateSelectedStyles=function(){for(var _k=0;_k<scope.toolbar.length;_k++){var groups=scope.toolbar[_k];for(var _l=0;_l<groups.length;_l++){tool=groups[_l];if(scope.tools[tool].activeState!=null){scope.tools[tool].active=scope.tools[tool].activeState.apply(scope)}}}if(this.bUpdateSelectedStyles)$timeout(this.updateSelectedStyles,200)};keydown=function(e){scope.bUpdateSelectedStyles=true;scope.$apply(function(){scope.updateSelectedStyles()})};scope.displayElements.html.on("keydown",keydown);scope.displayElements.text.on("keydown",keydown);keyup=function(e){scope.bUpdateSelectedStyles=false;scope.$apply(scope.updateDisplay)};scope.displayElements.html.on("keyup",keyup);scope.displayElements.text.on("keyup",keyup);mouseup=function(e){scope.$apply(function(){scope.updateSelectedStyles()})};scope.displayElements.html.on("mouseup",mouseup);scope.displayElements.text.on("mouseup",mouseup)}}});