thinkphp5 + ckeditor 图片上传

原创 maolego 2021年12月08日 150 2

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

 

本文地址: https://maolego.com/323.html
温馨提示: 本站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议
相关文章 关键词:

发表评论

*

  1. tx
    某1 1楼 2021年12月08日

    学习了

    • tx
      maolego 2楼 2022年03月20日

      (#^.^#)