码迷,mamicode.com
首页 > Web开发 > 详细

ckedit 图片上传 php

时间:2016-06-05 16:57:26      阅读:338      评论:0      收藏:0      [点我收藏+]

标签:

分享ckedit的使用。直接码出来

<input type="hidden" name="id" id="id" value="<?php echo $data[‘id‘];?>">
<div style="display:none" >
    <textarea id="data"><?php echo $data[‘content‘];?></textarea>
</div>

此处是html的ckedit的id,下面我加了一个隐藏内容,后面做数据填充,大家可以忽略.

重点是js配置

CKEDITOR.editorConfig = function( config ) {

    config.language = ‘zh-cn‘;
    // 设置宽高
    config.width = 800;
    config.height = 300;
    //改变大小的最小宽度
    config.resize_minWidth = 750;

};
//获取数据
var data = $("#data").val();
var ck = CKEDITOR.replace(‘content‘,{ //图片上传 filebrowserImageUploadUrl : ‘/admin/basic/basic/uploadImage‘ });
ck.setData(data);

这里只是简单的用来默认配置,此处要对主要,图片上传路径。由于我用的是七牛的上传空间,没有在本地保存,所以没有设置本地路径。如果你用的是本地图片上传。需要设置一下图片路径。同时注意上传图片的路径权限问题。

下面是重点:后端

    public function uploadImageAction() {
        
        $callback =$this->request->get("CKEditorFuncNum");
        $file = $this->request->getUploadedFiles()[0];

        $image_url = EFUserAPI::uploadpicture( $file->getTempName(), $file->getType(), $file->getName());
        $image = "<script type=‘text/javascript‘>window.parent.CKEDITOR.tools.callFunction($callback,‘".$image_url[‘url‘]."‘,‘‘);</script>";

        return $this->response->setContent($image);
    }

第一个注意的是callback这个是回调函数的id,直接从get方法获取,或者用$_REQUEST[‘CKEditorFuncNum’];直接读取这个数字id。这个是ckedit返回给后端的。图片上传到七牛后,获取到返回的图片url

这个时候需要返回给前端ckedit一个js,而不是内容。不懂的直接复制这个内容"<script type=‘text/javascript‘>window.parent.CKEDITOR.tools.callFunction($callback,‘".$image_url[‘url‘]."‘,‘‘);</script>";这个会在ckedit解析到图片信息里,自动填充。由于官方js是压缩的,内部东西还没看,简单的使用了一下。后面继续学习ckedit。

ckedit 图片上传 php

标签:

原文地址:http://www.cnblogs.com/erick-x/p/5560936.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!