Angularjs 与Ckeditor

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>

 

 

　　　　

 

 

 

标签:  javascript,  AngularJs,  Ckeditor