首页 > web前端 > javascript/jquery > 为ckeditor4.4.7添加图片上传功能
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
06-11

为ckeditor4.4.7添加图片上传功能

文章目录 [收起]

由于fckeditor被拆分为ckeditor和ckfinder,ckeditor默认是不支持图片上传功能的,它是需要购买ckfinder整合使用的。

博主需要的功能很简单,只需要一个图片上传功能,不需要ckfinder高大上的功能集合,所以就只有自己写代码了,由于我使用的是onethink开发,这里就是onethink为例,原理都是一样一样的。

原理就是这样

  • 1.添加ckeditor图片上传路径。
  • 2.处理图片上传并把图片插入到ckeditor。

首先配置ckeditor的时候配置好图片上传地址

<script type="text/javascript"> 
 $('textarea[name="content"]').attr('id', 'editor_id_content'); 
 CKEDITOR.replace('editor_id_content', {
     language: 'zh-cn',
     filebrowserImageUploadUrl: '/onethink/index.php?s=/Admin/Addons/execute/_addons/EditorForAdmin/_controller/Upload/_action/ck_upimg.html' //图片上传地址,你可以任意修改.
 }); 
 </script>

后台调用PHP图片上传函数,返回图片的地址。

//ckditor编辑器上传图片处理
public function ck_upimg(){
  $img = $this->upload(); //图片上传函数
  $fn = intval($_GET['CKEditorFuncNum']); //ckeditor的funID
  $fileurl=$img['fullpath'].$img['upload']['savepath'].$img['upload']['savename'];//图片的保存地址
  $message=$img['upload']['name'];//图片名称
  $str='<script type="text/javascript">window.parent.CKEDITOR.tools.callFunction('.$fn.', "'.$fileurl.'","","'.$message.'");</script>';
 exit($str);//执行script,插入图片到编辑器
}


/* 上传图片 */
 public function upload(){
    session('upload_error', null);
    /* 上传配置 */
    $setting = C('EDITOR_UPLOAD');
    /* 调用文件上传组件上传文件 */
    $this->uploader = new Upload($setting, 'Local');
    $info = $this->uploader->upload($_FILES);
    if($info){
        $url = C('EDITOR_UPLOAD.rootPath').$info['imgFile']['savepath'].$info['imgFile']['savename'];
        $url = str_replace('./', '/', $url);
        $info['fullpath'] = __ROOT__.$url;
    }
    session('upload_error', $this->uploader->getError());
    return $info;
 }

两步就实现了ckeditor上传图片,很简单吧。

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

为ckeditor4.4.7添加图片上传功能》有 1 条评论

  1. we 说:

    博主能否把模板放出来,挺喜欢的

留下一个回复

你的email不会被公开。

*