Angularjs 誕生於Google是一款優秀的前端JS框架,已經被用於Google的多款產品當中。AngularJS有着諸多特性,最爲核心的是:MVC、模塊化(Module機制
)、自動化雙向數據綁定、語義化標籤(Directive
)、依賴注入、路由(Route)機制、服務(services)機制等等。之前也用過Jquery、Extjs等,如今剛開始接觸AngularJS,感受這是一個很吸引人的一個框架。javascript
學習網址:html
咱們在作B/S系統是常常會用到在線編輯器(FreeTextBox,Ckeditor,KindEditor等等),我比較經常使用的是kindEditor和ckEditor。前端
開始打算用kindEditor,java
mainApp.directive('kindeditor', function() { return { require : '?ngModel', link : function(scope, element, attrs, ngModel) { var editor; KindEditor.ready(function(K) { editor = K.create(element[0], { resizeType : 1, allowPreviewEmoticons : false, allowImageUpload : false, items : [ 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist', 'insertunorderedlist', '|', 'emoticons', 'image', 'link'] }); }); if (!ngModel) { return; } editor.on('instanceReady', function() { editor.setData(ngModel.$viewValue); }); editor.on('pasteState', function() { scope.$apply(function() { ngModel.$setViewValue(editor.getData()); }); }); ngModel.$render = function(value) { editor.setData(ngModel.$viewValue); }; } }; });
不過沒有成功,緣由使Editor 須要在KindEditor.ready中初始化,後面的editor爲undefined,因此edito.on()等沒法運行,這個地方可能會有其餘方法,可是我暫時沒有找到方法,若是有朋友找到,能夠交流下。angularjs
而後有使用了ckeditor寫了一個指令app
/** * ckeditor Directive * @author 張世民 @ 數雲圖 */ mainApp.directive('ckeditor', function() { return { require : '?ngModel', link : function(scope, element, attrs, ngModel) { var ckeditor = CKEDITOR.replace(element[0], { }); if (!ngModel) { return; } ckeditor.on('pasteState', function() { scope.$apply(function() { ngModel.$setViewValue(ckeditor.getData()); }); }); ngModel.$render = function(value) { ckeditor.setData(ngModel.$viewValue); }; } }; });
這樣能夠成功使用了。框架
可是在編輯時又發現問題了,在第二次編輯時沒有執行編輯器
ckeditor.setData(ngModel.$viewValue);
又給ckeditor綁定了instanceReady事件,這樣用起來比較完美了,最後ckeditor指令以下模塊化
/** * ckeditor Directive * @author 張世民 @ 數雲圖 */ mainApp.directive('ckeditor', function() { return { require : '?ngModel', link : function(scope, element, attrs, ngModel) { var ckeditor = CKEDITOR.replace(element[0], { }); if (!ngModel) { return; } ckeditor.on('instanceReady', function() { ckeditor.setData(ngModel.$viewValue); }); ckeditor.on('pasteState', function() { scope.$apply(function() { ngModel.$setViewValue(ckeditor.getData()); }); }); ngModel.$render = function(value) { ckeditor.setData(ngModel.$viewValue); }; } }; });
用法簡單,只須要在html標籤上加入ckeditor 指令學習
<textarea ckeditor ng-model="entity.catalog" class="form-control"></textarea>
補充:
幾位朋友說Ueditor挺好用的,測試了一下,寫了一個AngularJs的Ueditor指令
mainApp.directive('ueditor', function() { return { require : '?ngModel', link : function(scope, element, attrs, ngModel) { var ueditor = UE.getEditor(element[0], { //配置 }); if (!ngModel) { return; } ueditor.on('instanceReady', function() { ueditor.setContent(ngModel.$viewValue); }); ueditor.on('pasteState', function() { scope.$apply(function() { ngModel.$setViewValue(ueditor.getContent()); }); }); ngModel.$render = function(value) { ueditor.setContent(ngModel.$viewValue); }; } }; });
用法只需在Html標籤上加上ueditor指令
<textarea ueditor ng-model="entity.catalog" class="form-control"></textarea>