网上有很多simditor这个编辑器的文档,但是大多是重复的,并且php做服务端的也很少。最近做了一个上传功能,研究了一下,跟大家分享一下。

首先 说一下逻辑,理解好了逻辑,才能更好的理解代码。

点击上传本地图片,然后在编辑器中会出现一张图片,但是这张图片是base64格式的,直接存储对数据库会造成很大影响。
所以,在你的配置下,编辑器在选择好图片之后,会触发一个上传图片的事件,用于我们把这个图片上传到服务器。
我们上传成功后,返回图片地址,然后编辑器在成功之后会将图片路径替换掉原先的base64的图片。
以上就是 一般 编辑器上传图片的逻辑。下面 我们举一个实例。

// 初始化富文本编辑器
    var editor = new Simditor({
        textarea: $('#container'),
        allowTags:['br', 'span', 'a', 'img', 'b'],
        imageButton: ['upload'],
        upload:{
            url:upload_url, //这里是你的php接口地址  这个以下的其他参数其实不需要考虑,不影响功能
            params: null,
            fileKey: 'file', 
            connectionCount: 3,
            leaveConfirm: '正在上传文件..'
        }
    });

这里做好了还需要一步,要在图片的input里面添加name,在simditor.js中搜索accept="image/*",然后添加name name="file"

上面这步做好了之后,在你点击上传本地图片的时候,就会发送一个请求,在浏览器调试中 可以看到,然后 只需要在php中 跟正常的上传图片功能一样操作就可以。

我这里的代码是我使用的两个方法:

 // 上传封面
public function uploadimage()
{   
    // 调用common_helper中的文件上传方法
    $info = upload_file('/uploads_cdn/record/');
    $info['file'] = $this->config->config['base_url'].$info['file'];

    echo json_encode($info);
    exit;
}
// 基础方法 上传普通文档
function upload_file($targetFolder = null){
    $tempFile = $_FILES['filename']['tmp_name'];
    $targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;                
    $fileParts = pathinfo($_FILES['filename']['name']);
    $extension = $fileParts['extension'];
    $name = get_rand() . '.' . $extension;

    $targetFile = rtrim($targetPath,'/') . '/'.  $name;
    move_uploaded_file($tempFile,$targetFile);

    $data['size'] = abs(filesize($targetFile));
    $data['file'] = $targetFolder . $name;
    $data['tmp_name'] = $fileParts['filename'];
    return $data;
}

这里是返回值:

file:"/xxxxxxxx/xxxxxxx.jpg"  //图片保存的路径
size:5139                     //图片大小
tmp_name:"1_lumengabc"        //图片上传前的名称

这里我们只需要第一个file参数,当然参数的字段名 你是可以自定义的,你可以在php代码中做修改。

既然已经得到了图片的地址,下面我们只需要将data:image格式的图片替换成现在的图片地址就可以,
替换的位置,我是直接修改的simditor.js,搜索‘uploadsuccess’,得到代码:

this.editor.uploader.on('uploadsuccess', function(e, file, result) {
    var $img, $mask, msg;
    if (!file.inline) {
      return;
    }
    $img = file.img;
    $img.removeData('file');
    $img.removeClass('uploading');
    $mask = $img.data('mask');
    if ($mask) {
      $mask.remove();
    }
    $img.removeData('mask');
    if (result.success === false) {
      msg = result.msg || '上传被拒绝了';
      if ((typeof simple !== "undefined" && simple !== null) && (simple.message != null)) {
        simple.message({
          content: msg
        });
      } else {
        alert(msg);
      }
      $img.attr('src', _this.defaultImage);
    } else {
      $img.attr('src', result.file); //这里就是成功后的替换,将这个改成了我们所使用的字段名file
    }

修改后完成,大家可以看看效果了。