正文 

当前位置： 首页 > java > java教程

ckeditor实现图片上传,并且回调图片路径

yuanlp yuanlp     2022-09-09     265

关键词：

CKEditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮


并且预览中有一堆火星文，可以修改相应配置删除它。
第一种方法：打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.config.image_previewText||'')单引号中的内容全删了，注意别删多了。(由于ckeditor的很多js文件都是压缩过的，格式很难看，很容易删错，所以不推荐此种方法)
第二种方法：打开config.js文件，加入下面一句话
config.image_previewText=' '; //预览区域显示内容

下面研究图片上传
要想出现上传按钮，两种方法
第一种：还是刚才那个image.js
搜索“upload”可以找到这一段 id:'Upload',hidden:true，而我使用的4.3的是
id:"Upload",hidden:!0，反正改为false就行了，(遗憾的是此种方法对我这个版本不起作用)
第二种：打开config.js文件，加入下面一句话
config.filebrowserImageUploadUrl= "admin/UserArticleFileUpload.do"; //待会要上传的action或servlet

OK现在基本上是下面这个样子的了




上面的只是一个上传页面。也就相当于一个HTML的form表单，
要配置点击"上传到服务器上"按钮后请求的Action。已在ckeditor/config.js中配置。
就是上面的 config.filebrowserImageUploadUrl = "admin/UserArticleFileUpload.do";
可使用chrome审查元素查看代码



接下来就是action中的上传方法：
 
route
 
$app->post('/savePic',function() use($app){

    $data=\model\Agv::uploadPic();


});

　　

 
model方法
 
//上传图片
    public static function uploadPic()
    { 
        $file_type=array('image/jpg','image/gif','image/png','image/bmp','image/jpeg');//文件类型
        $max_size='1048576';      // 最大文件限制（单位：byte）
        $upload_path='./attached/img'.date("Ym").'/'; //图片目录路径

        $file=$_FILES['upload'];  
        if (!is_dir($upload_path)) {    //判断存放文件目录是否存在
            mkdir($upload_path,0777,true);
        }
        if(!is_uploaded_file($file['tmp_name'])){ //判断上传文件是否存在tmp_name
            $rs['message'] = 2;//上传文件不存在
            return $rs;
        }
        if($file['size']>$max_size){  //判断文件大小是否大于500000字节
            $rs['message'] = 3;//上传文件大
            return $rs;
        } 
        if(!in_array($file['type'],$file_type)){  //判断图片文件的格式
            $rs['message'] = 4;//上传文件格式不对
            return $rs;
        }
        $image_size = getimagesize($file['tmp_name']);
        $img = $image_size[0].'*'.$image_size[1];
        $name = $file['name'];
        $fname = explode('.', $name);
        $pic_path = $upload_path.date("YmdHis").rand(100,999).".".$fname[1]; 
        if(file_exists($pic_path)){
            $rs['message'] = 5;//文件重名
            return $rs;
        }
        if(!move_uploaded_file($file['tmp_name'],$pic_path)){  
            $rs['message'] = 6;//文件移动错误
            return $rs;
        }else{
            $rs['message'] = 1;//文件上传成功
        }
            
        $rs['path'] = substr($pic_path, 1);
        //回调函数 返回图片预览
        $callback = $_REQUEST["CKEditorFuncNum"];    
        echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($callback,'".$pic_path."','');</script>"; 
    }

　　

 

config.js

	config.image_previewText=' '; //预览区域显示内容

	config.filebrowserImageUploadUrl= "savePic"; //待会要上传的action或servlet

 

图像预览

 

点击确定即可插入到文章里

ckeditor_uploader 动态图片上传路径

】ckeditor_uploader动态图片上传路径【英文标题】：ckeditor_uploaderDynamicImageUploadPath【发布时间】：2019-02-0622:30:03【问题描述】：我有一个Django应用程序，它要求用户为每个文档上传多个图像。该应用程序已安装django-ckeditor，但上传... 查看详情

django-ckeditor 上传的图片的绝对路径

】django-ckeditor上传的图片的绝对路径【英文标题】：Absolutepathsonimagesuploadedbydjango-ckeditor【发布时间】：2020-08-0302:32:18【问题描述】：我将django-rest-framework与django-ckeditor结合使用。我正在使用绝对url-s提供一些图像，没有任何问题... 查看详情

ckeditor编辑器如何做复制图片上传（包括本地图片及远程图片），以插件方式实现

参考技术A这个复制图片到编辑器中的问题是跟浏览器有关系的.IE浏览器是不支持的.firefox浏览器是支持的.但是firefox是将图片给解析成base64的大字符串而不是图片路径. 查看详情

ckeditor添加自定义按钮整合swfupload实现批量上传图片

ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮，由于ckeditor只能上传一张图片，如果要上传多张图片就要结合ckfinder，而ckfinder是收费的，所以就想通过自定义按钮整合swfupload实现一次上传多张图片... 查看详情

ckeditor+ckfinder,上传图片成功，图片链接正确，但是无法显示，请问怎么回事？

...片存储路径../../Scripts/ckfinder/userfiles/images/图片名称1，将ckeditor解压打开，打开_Samples，将ckeditor文件夹拷贝项目中的根目录下，把bin放在根目录下2，将ckfinder解压，ckfinder文件夹拷贝项目中的根目录下，把bin放在根目录下，把_samp... 查看详情

ckeditor在asp.net中怎么实现上传图片？

参考技术A可以的，要设置上传目录追问这位大哥，能不能详细点！ 查看详情

ckeditor5上传的图片如何用php接收？

CKEditor5自带的图片上传，定义了uploadUrl，但不知道怎么用PHP接收。还有一个疑问就是CKEditor5传递到upload.php的是文件路径还是二进制数据？问题已经解决，详细步骤在评论里从图上看应该是传的文件用$_FIELES接收，如果不行的话试... 查看详情

ckeditor如何在asp中配置上传图片

参考技术A我很久没弄了，以前搞过，修改下上传文件还有路径追问如何修改 查看详情

ckeditor+ckfinder(上传图片出现问题)

CKEditor+CKFinder实现图片上传功能，在本地测试的时候，是可以上传的，没有问题。但是上传至服务器后，上传时就出现问题了，弹出了“由于文件系统的限制，该请求不能完成”的警告框！请问这应该怎么解决呢？（详细）参考... 查看详情

ckeditor自定义按钮插入服务端图片

CKEditor富文本编辑器很好用，功能很强大，在加上支持服务端图片上传的CKFinder更是方便，最近在使用CKFinder的时候发现存在很多问题，比如上传图片的时候，图片不能按时间降序排列，另外CKFinder是也是收费的，所以自己想实现... 查看详情

ckeditor上传图片php版

ckeditor到底是怎么上传图片的吖？？怎么感觉它和FCK有这么大的区别？能给个详细说明不？参考技术A返回格式因该是：<scripttype="text/javascript">window.parent.CKEDITOR.tools.callFunction($_GET["CKEditorFuncNum"],路径,'消息... 查看详情

django-ckeditor 上传图片以外的文件

】django-ckeditor上传图片以外的文件【英文标题】：django-ckeditorfilesuploadotherthanimage【发布时间】：2013-02-0500:57:41【问题描述】：我正在使用django-ckeditor。我正在上传图像文件和.swf文件中的图像和Flash上传图标。但是当我上传除这... 查看详情

ckeditor中粘贴图片

我们在ckeditor中有上传图片，但是实际使用中这种手动上传图片方式并不是很方便，而是复制或者截图粘贴图片。 这里我们实现主要是获取对应的粘贴事件。CKEDITOR.instances["editor1"].on(‘instanceReady‘,function(e)this.document.on("paste"... 查看详情

CKEditor, 图片上传 (filebrowserUploadUrl)

】CKEditor,图片上传(filebrowserUploadUrl)【英文标题】：CKEditor,ImageUpload(filebrowserUploadUrl)【发布时间】：2011-01-0802:07:28【问题描述】：我正在使用CKEditor，并希望能够允许用户在文本编辑器中上传和嵌入图像...以下JS是加载CKEditor的内... 查看详情

ckeditor无法上传图片

】ckeditor无法上传图片【英文标题】：Can\'tuploadimageinckeditor【发布时间】：2020-11-2709:28:46【问题描述】：我正在使用CKEDITOR5，并希望能够允许用户上传图像。我正在使用官方网站上描述的自定义上传适配器，但我不能使用XMLHttpReq... 查看详情

CKEditor 5 注册多个上传适配器

】CKEditor5注册多个上传适配器【英文标题】：CKEditor5RegisterMoreThanOneUploadAdapter【发布时间】：2019-04-0915:24:02【问题描述】：我使用CKEditor5为我们的软件实现编辑器。我想用这个编辑器上传图片和视频。它有图像插件。我定制了ckfi... 查看详情

如何实现ckeditor文件上传

想把javaweb项目中的fckeditor在线文本编辑器升级到ckeditor，但又不想购买ckfinder来实现文件上传？老k将告诉你一个不用花钱就可以实现ckeditor上传文件的好方法，只要对fckeditor的filemanager做出几处修改，就可以集成fckeditor的文件上... 查看详情

Django-CKEditor 图片上传

】Django-CKEditor图片上传【英文标题】：Django-CKEditorImageUpload【发布时间】：2013-06-0517:38:48【问题描述】：我目前已经安装了Django-CKEditor并拥有自己的自定义工具栏。我正在努力寻找如何启用图片上传。单击图像按钮时，我只能通... 查看详情