服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > php教程 >

ckedit 图片上传 php

时间:2016-06-06 08:48来源:未知 作者:最模板 点击:
分享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,下面我加了一个隐藏内容,

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

(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容