1:自定义指令
App.directive('ckeditor', function() {
return {
require : '?ngModel',
link : function(scope, element, attrs, ngModel, disabled) {
var ckeditor = CKEDITOR.replace(element[0], {
});
//需要指定ckfinder包的位置
ckeditor.config.ckfinderPath="/static/ckfinder";
//ckeditor上传文件根路径,最后拼接的路径,可以拓展成每个实例独有的
ckeditor.config.ckfinderUploadPath="/ckeditor"
//粘贴上传图片请求的后台地址(这里自定义实现)
ckeditor.config.uploadUrl='/test/testUpload/ckeditorUpload';
//上传文件请求地址
ckeditor.config.filebrowserUploadUrl = ckeditor.config.ckfinderPath+'/core/connector/java/connector.java?command=QuickUpload&type=files¤tFolder='+ckeditor.config.ckfinderUploadPath;
//上传图片请求地址
ckeditor.config.filebrowserImageUploadUrl = ckeditor.config.ckfinderPath+'/core/connector/java/connector.java?command=QuickUpload&type=images¤tFolder='+ckeditor.config.ckfinderUploadPath;
if (!ngModel) {
return;
}
if(disabled='disabled'){
}
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);
};
}
};
});
主要是注意这一块设置
2:粘贴上传后台接收
//富文本编辑器粘贴上传图片
@RequestMapping(value = "ckeditorUpload", method = RequestMethod.POST)
public @ResponseBody CkUploadResponsEntity ckeditorUpload(HttpServletRequest request,@RequestParam("upload") MultipartFile file, MultipartHttpServletRequest MultiRequest) throws Exception {
图片会用upload参数带进来,处理逻辑不贴了,要注意的是返回值格式
使用@ResponseBody 配合封装的实体解决了返回值的问题
3:图片上传按钮
这里请求的路径对应前面指令里的这个
ckeditor.config.filebrowserUploadUrl
最终的文件传地址会拼接ckfinder的
baseDir+type+currentFolder+文件名
最终的文件访问地址会拼接
baseURL+type+currentFolder+文件名