脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-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);
};
}
};
});
复制代码
这样可以成功使用了。
但是在编辑时又发现问题了,在第二次编辑时没有执行
1
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);
};
}
};
});
复制代码
<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>
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-Angularjs 与Ckeditor全部内容,希望文章能够帮你解决javascript代码实例教程-Angularjs 与Ckeditor所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。