Angularjs 與Ckeditor

 

Angularjs 誕生於Google是一款優秀的前端JS框架，已經被用於Google的多款產品當中。AngularJS有着諸多特性，最為核心的是：MVC、模塊化（Module機制）、自動化雙向數據綁定、語義化標簽（Directive）、依賴注入、路由（Route）機制、服務（services）機制等等。以前也用過Jquery、Extjs等，現在剛開始接觸AngularJS，感覺這是一個很吸引人的一個框架。

學習網址：

• http://www.angularjs.org
• http://www.angularjs.cn/tag/AngularJS AngularJS 中文社區
• http://www.360doc.com/content/13/0729/13/13328522_303333441.shtml AngularJS 學習筆記

我們在做B/S系統是經常會用到在線編輯器（FreeTextBox，Ckeditor，KindEditor等等），我比較常用的是kindEditor和ckEditor。

開始打算用kindEditor，

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()等無法運行，這個地方可能會有其他方法，但是我暫時沒有找到方法，如果有朋友找到，可以交流下。

然后有使用了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('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>