AngularJS+ckediter+ckfinder实现粘贴图片上传+图片上传

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&currentFolder='+ckeditor.config.ckfinderUploadPath;
//上传图片请求地址
			ckeditor.config.filebrowserImageUploadUrl = ckeditor.config.ckfinderPath+'/core/connector/java/connector.java?command=QuickUpload&type=images&currentFolder='+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+文件名