Ueditor angularjs化过程记录（重点在于验证）

选了几款editor，最后还是觉得ueditor强大美观（但是死穴是太她妈大了），因为是使用angularjs所以用angularjs directive把meditor(ueditor的mini版)封装了一下，一运行报错了，算了应该有人封装好了，于是找了一下，还真有github:https://github.com/zqjimlove/angular-ueditor

使用方式，如下说明：

Installation

Include both the javascript file of UEditor:

<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="/ueditor/ueditor.all.js"></script>

Grab the latest release and javascript file:

<script type="text/javascript" src="angular-ueditor.js"></script>

Then add angular-ueditor to your modules dependencies:

angular.module('app', ['ng.ueditor'])

MetronicApp.controller('originController', function($rootScope, $scope, $http, $timeout,$state) {
	  $scope.config = {
			  themePath:'./resources/scripts/lib/ueditor/themes/',
			  langPath:'./resources/scripts/lib/ueditor/lang/',
			  UEDITOR_HOME_URL:'./resources/scripts/lib/ueditor/',
			  initialFrameHeight:250,
			  toolbars: [[
			                'fullscreen', 'source', '|', 'undo', 'redo', '|',
			                'bold', 'italic', 'underline', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|',
			                'rowspacingtop', 'rowspacingbottom', 'lineheight', '|','fontfamily', 'fontsize', '|',
			                'directionalityltr', 'directionalityrtl', 'indent', '|',
			                'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|',
			                'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|',
			                'simpleupload', 'emotion','insertframe','|','help'
			            ]]
		    }
	  
	  
});

<div class="ueditortitle">简介
	    <span ng-show='myForm.Brief.$invalid&&ueditor.dirty'  class="validc">简介不能为空</span>
	  </div>
        <div class="ueditor" config="config" ng-model="pageModel.Brief" name='Brief' required ueditorempty></div> 

然后自己写了一个验证内容的指令：

MetronicApp.directive('ueditorempty', function($http, $q) {
	  return {
	    require: 'ngModel',
	    link: function(scope, elm, attrs, ctrl) {
	    	
	      ctrl.$validators.ueditorempty =function (modelValue, viewValue) {
	    	 
		        if(viewValue==null||viewValue==''){return false}
		        else{
		        	if(!scope.ueditor.dirty){scope.ueditor.dirty = true;}
		        	return true;
		        	}
		      };
		      scope.ueditor = {dirty: false};
		/*      scope.$watch(function(){
		      		return scope.$eval(attrs.ueditorempty);
		      	},function(){
		      		scope.ueditor.dirty = true;
		    	  ctrl.$validators.ueditorempty =function (modelValue, viewValue) {
		    		 
				        if(viewValue==null||viewValue==''){return false}
				        else{return true;}
				      };
		      });*/
	    }
	  };
	});