我之前用过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);
这样就可以方便的上传图片粘贴图片上来了。