ckedit 图片上传 php

分享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。