首页 > 代码库 > 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>
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。