CKFeditor编辑器如何上传图片(PHP)

CKFeditor是一款非常不错的web编辑器，本文内容是基于CKFeditor4.7在php做服务端情况下如何进行配置图片的上传保存讲解。

交互示意图

交互示意图

CKFeditor4.7下载地址 ：https://ckeditor.com/download
可以根据自己需要对编辑器进行定制下载，我这里下载的是标准版。

前端编码

下载ckfeditor后将其放入自己的项目中，然后就可以创建页面使用CKEditor创建我们的编辑器页面了。

    
        
        
        
        
    
    
        

                            This is my textarea to be replaced with CKEditor.
            
            
        
    

试试看一下效果，通过浏览，浏览器中编辑器的效果是这个样子的

效果图-默认

看着按钮太多，需要定制一下，可以根据需要自己定制需要样式的编辑器，通过js配置来进行配置，下面是我进行调整后的配置，看看效果！

    
        
        
        
        
    
    
        

                            This is my textarea to be replaced with CKEditor.
            
            
        
    

我们再来看一下新的效果！

效果图-清爽版

这样看着是不是简单清爽很多呢，这里使用了图片上传插件。
插件下载地址：https://ckeditor.com/addon/uploadimage

服务端代码

服务端采用php实现图片上传后保存，保存的过程中我们采用上传根目录+“年”+“月”+“日”目录格式存放上传图片，例如：/uploads/images/2017/09/30/

window.parent.CKEDITOR.tools.callFunction($callback,'".$url."','');";
        }else{
                echo "上传失败";
        }
    }else{  
        echo "*文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）";
        }
    }
}catch (\Exception $e) {  
    $erro = $e->getMessage();  
    echo "";
}  
?>

好了，服务端文件内容就这么多，是不是很简单呢!

前端，后端代码都已具备，我们来实验下效果如何，看截图：

效果图-上传图片

效果图-上传图片后

图片的大小位置可以通过图片编辑器进行编辑，这个使用上还是比较简单方便的。

注意点说明

1. 使用了图片上传插件uploadimage，下载地址：https://ckeditor.com/addon/uploadimage。
2. 服务端一定要获取$_REQUEST["CKEditorFuncNum"];用于返回时回调。
3. 配置图片上传服务端地址filebrowserImageUploadUrl参数内容。

总结

使用起来不复杂，但是要喜欢就需要进一步了解ckeditor的配置说明，这个可以参看ckeditor官方网站。
就写到这里吧！以此记录，仅供参考！