Angularjs 與Ckeditor

 

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>
相關文章
相關標籤/搜索