thinkphp5 + ckeditor 图片上传

ckeditor 下载地址： https://ckeditor.com/ckeditor-4/download/

之前一直使用的kingeditor, 而kingeditor 外观不美观又过于落后，而开始使用ckeditor，本人使用ckeditor4.17.1版本，ckditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮 并且预览中有一堆火星文，可以修改相应配置删除它

1.显示图片上传按钮

在ckeditor 目录里，打开  ckeditor/plugins/image/dialogs/image.js 文件，  搜索 Upload  找到这一段  {id:”Upload”,hidden:!0}, 改成 {id:”Upload”,hidden:0}，注意某些版本可能是 {id:”Upload”,hidden:true} 可以改成 {id:”Upload”,hidden:false}

2.去除预览里面的英文

ckeditor 4.17.1 版本 在 config.js 里面修改无效

CKEDITOR.replace( 'ckeditor',{
     // 图片上传地址
     filebrowserImageUploadUrl:'{:url("tools/UploadsImg")}',
     // 去除预览的英文
     image_previewText:' '   
 });

亲测 有效

截图：

3.实现图片上传功能

<script src="/ckeditor/ckeditor.js"></script>
<script>
    CKEDITOR.replace( 'ckeditor',{
        // 图片上传 地址
        filebrowserImageUploadUrl:'{:url("tools/UploadsImg")}',
        // 去除预览里面的英文
        image_previewText:' '
    });
</script>

上传代码：

 public function UploadsImg(){
        $file = request()->file('upload');
        $result  = [];
        $error = [];
        if($file  != null){
            $filename = get_file_uploads();
            $info = $file->validate(['size'=>15678,'ext'=>'jpg,png,gif'])->move($filename);
            if($info){
                $result['uploaded'] = 1; 
                $strimg = str_replace('\\','/',$info->getSaveName());
                $img = "/uploads/image/".$strimg;
                $result['fileName'] = $info->getFilename();  
                $result['url'] = $img;
                return json($result);
            }else{
                $error['uploaded'] = 0;
                $error['error']['message'] = '上传失败';
                return json($error);
            } 
}

注意：ckeditor4.5 以后响应格式为JSON：

成功：

{
    "uploaded": 1,
    "fileName": "foo.jpg",
    "url": "/files/foo.jpg"
}

失败：

{
    "uploaded": 0,
    "error": {
        "message": "The file is too big."
    }
}

文档：https://docs.ckeditor.com/ckeditor4/latest/guide/dev_file_upload.html