ckeditor 图片文件上传php回调代码

web | 2019-09-13 10:02:39

我之前用过ueditor,不得不说ckeditor是最老牌,最优秀得富文本编辑器,文档也很全面https://ckeditor.com/docs/,而且也方便支持自定义功能版本,我使用的是ckeditor 4,因为5应该是要自己来编译的而不是直接在web界面自定义。ckeditor可以方便的按需加载插件,easyimg就是我很喜欢的插件,可以很方便上传粘贴图片。但我总觉得,大量的功能相同的插件供你选择是很好,但这些插件不会冲突,我很困惑,我的图片上传的方式就和官方文档就有些区别。

1.下载ckeditor和easyimage插件

下载ckeditor时选择easyimage就可以了。

2.ckeditor配置

其实基本看官方文档就知道如何配置ckeditor和后端如何返回了:https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_upload.html

但还是有一些需要注意的点

引入ckeditor.js

<script type="text/javascript" language="javascript" class="lazy" data-original="../plugin/ckeditor/ckeditor.js"></script>

初始化ckeditor

$(document).ready(function(){
			CKEDITOR.replace( 'articleEditor',{
				height: 500,
				//这个配置可以不要,我是为了防止报错
				cloudServices_tokenUrl: 'userManage.html?module=token',
                //文件上传后台地址,其实这个配置好多配置都可以代替,imgupload什么的
				cloudServices_uploadUrl: 'userManage.html?module=upload',
                //回调,这个回调会先于默认的回调
				on:{
					fileUploadResponse:function(evt){
						
						evt.stop();
						
						try {
							var data = evt.data;
							var response = data.fileLoader.xhr.responseText;
							var result=$.parseJSON(response);
							
							data.message = result.message;
							if(result.uploaded==1){
								 data.url = result.url;
                                 //唯一比官方文档就多这个,不多这个,会报错,图片地址无法回写到html
								 data.response={"default":result.url}
							}else{
								evt.cancel();
							}
							
						} catch(e) {
							evt.cancel();
						}
						
						
					}
				}
			});
			
			
			
		});

 

3.php后端保存文件并返回

$result=array("uploaded" => 0, "error" => array("message"=>"服务器错误!"));
	
	$uploadFile=$_FILES['file'];
	
	$uploadFilename = $uploadFile['name']; 
    $uploadFilesize = $uploadFile['size'];
	
	$extensions = array("jpg","bmp","gif","png"); 
	$extension = pathInfo($uploadFilename,PATHINFO_EXTENSION);  
    if(in_array($extension,$extensions)){
		if($uploadFilesize  > 1024*1*1000){
			$result=array("uploaded" => 0, "error" => array("message"=>"图片大小不能超过1M!"));
		}else{
			$path="/data/attachment/upload/image/".date("Ym")."/";
			
			$uuidName = str_replace('.','',uniqid("",TRUE)).".".$extension; 
			
			$uploadPath =$_SERVER['DOCUMENT_ROOT'].$path; 
			
			$filePath=$uploadPath.$uuidName;
			
			$url=$path.$uuidName;
			
			if (!is_dir($uploadPath)){
				 mkdir($uploadPath,0777,true);
			}
			if(move_uploaded_file($uploadFile['tmp_name'],$filePath)){
				$userDao=new UserDao();
                //我加个水印
				$userDao->watermark($filePath,$filePath);
				$result=array("uploaded" => 1, "default"=>"文件上传成功!","fileName" => "$uploadFilename", "url" => "$url");
			}else{
				 $result=array("uploaded" => 0, "error" => array("message"=>"文件上传失败!"));
			}
		}
    }else{  
        $result=array("uploaded" => 0, "error" => array("message"=>"不支持的文件格式!"));
    }
	
	echo json_encode($result);

这样就可以方便的上传图片粘贴图片上来了。

 

登录后即可回复 登录 | 注册
    
关注编程学问公众号