Angularjs 与Ckeditor

 

Angularjs 诞生于Google是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化(Module机制)、自动化双向数据绑定、语义化标签(Directive)、依赖注入、路由(Route)机制、服务(services)机制等等。以前也用过Jquery、Extjs等,现在刚开始接触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>

 

 

    

Angularjs 与Ckeditor,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。